如何在谷歌地图上加载JSTL和Javascript中的所有标记

Question

使用GoogleMap通过JSTL和Javascript获取所有标记。在我的服务和存储库层，我可以获得所有经纬度。但是，当从谷歌地图得到我只有一个经纬度和长。

我来源：

<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> 

如何通过JSTL的循环中得到的GoogleMap的所有标记，谢谢

Answer 1

不要为每个标记一个新的地图。首先创建地图，在forEach中将每个标记添加到地图中，然后（可选）缩放并居中地图以显示所有标记。

<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>