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>
@Named
@RequestScoped
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;
}
}