How to load all marker on google map in JSTL and Javascript

Question

Im using GoogleMap to get all marker by JSTL and Javascript. In my Service and Repository layer I can get all Lat and Long. But when get from google map I just get one Lat and Long.

My source:

<div id="map_canvas" style="height: 680px;"></div>
    <script>    
    function initMap() {
    <c:forEach var="item" items="${page.content}" varStatus="status">
        var latLng = new google.maps.LatLng(<c:out value="${item.map_lat}"/>, <c:out value="${item.map_maplong}"/>);                    
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
         zoom: 16,
         center: latLng,
         mapTypeId: google.maps.MapTypeId.ROADMAP});
         var markerMap = new MarkerWithLabel({
         position: latLng,
         draggable: true,
         raiseOnDrag: false,
         map: map,
         labelContent: "Content display",
         labelAnchor: new google.maps.Point(30, 30),
         labelClass: "labels", // the CSS class for the label
         isClicked: false });

         var windowDialog = new google.maps.InfoWindow({
                               content: "content display dialog"                                            
                        });
        google.maps.event.addListener(markerMap, "click", function (e) { windowDialog.open(map, this); });                          
   </c:forEach>
}       
initMap();
</script>

How to get all marker on GoogleMap by loop of JSTL, Thank you

Answer 1

Don't create a new map for each marker. Creat the map first, add each marker to it in the forEach, then (optionally) zoom and center the map to show all the markers.

<div id="map_canvas" style="height: 680px;"></div>
<script>    
function initMap() {
    // create the map
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
     zoom: 16,
     // center: latLng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    // create a bounds object
    var bounds = new google.maps.LatLngBounds();
// for each marker do this
<c:forEach var="item" items="${page.content}" varStatus="status">
     var latLng = new google.maps.LatLng(<c:out value="${item.map_lat}"/>, <c:out value="${item.map_maplong}"/>);
     // include in the map bounds                    
     bounds.extend(latLng);
     var markerMap = new MarkerWithLabel({
       position: latLng,
       draggable: true,
       raiseOnDrag: false,
       map: map,
       labelContent: "Content display",
       labelAnchor: new google.maps.Point(30, 30),
       labelClass: "labels", // the CSS class for the label
       isClicked: false
     });

     var windowDialog = new google.maps.InfoWindow({
                           content: "content display dialog"                                            
     });
     google.maps.event.addListener(markerMap, "click", function (e) {
       windowDialog.open(map, this); 
     });                          
</c:forEach>
   // center and zoom map to fit the markers
   map.fitBounds(bounds);
}       
initMap();
</script>