MapModel API is used to add markers to the map. Marker class has various configuration options like custom icons, dragging, title text and more.
<script src="https://maps.google.com/maps/api/js?key=AIzaSyCvCDkYieuUBmMWon_mfLAfjuaeuosuqow&sensor=false"></script>
<div class="card">
<p:gmap center="36.890257,30.707417" zoom="13" type="HYBRID" style="width:100%;height:400px"
model="#{markersView.simpleModel}"/>
</div>
package org.primefaces.showcase.view.data.gmap;
import jakarta.annotation.PostConstruct;
import jakarta.enterprise.context.RequestScoped;
import jakarta.inject.Named;
import java.io.Serializable;
import io.quarkus.runtime.annotations.RegisterForReflection;
import org.primefaces.model.map.DefaultMapModel;
import org.primefaces.model.map.LatLng;
import org.primefaces.model.map.MapModel;
import org.primefaces.model.map.Marker;
import org.primefaces.model.map.Point;
import org.primefaces.model.map.Symbol;
@Named
@RequestScoped
@RegisterForReflection(serialization = true)
public class MarkersView implements Serializable {
private MapModel<Long> simpleModel;
@PostConstruct
public void init() {
simpleModel = new DefaultMapModel<>();
simpleModel.addOverlay(new Marker<>(new LatLng(36.879466, 30.667648), "Konyaalti", 1L));
simpleModel.addOverlay(new Marker<>(new LatLng(36.883707, 30.689216), "Ataturk Parki", 2L));
Marker marker3 = new Marker<>(new LatLng(36.879703, 30.706707), "Karaalioglu Parki", 3L,
"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png");
simpleModel.addOverlay(marker3);
Marker marker4 = new Marker<>(new LatLng(36.885233, 30.702323), "Kaleici", 4L);
Symbol symbol = new Symbol(
"""
M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945\
2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75\
0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906\
2.039-4.945t4.945-2.039z\
""");
symbol.setFillColor("#fff");
symbol.setFillOpacity(.7);
symbol.setScale(2.0);
symbol.setAnchor(new Point(15.0, 30.0));
marker4.setIcon(symbol);
simpleModel.addOverlay(marker4);
}
public MapModel<Long> getSimpleModel() {
return simpleModel;
}
}