Javascript 使用JSP在Google地图上创建多个标记_Javascript_Google Maps_Jsp_Spring Mvc_Google Maps Api 3

Javascript 使用JSP在Google地图上创建多个标记

javascript google-maps jsp spring-mvc google-maps-api-3

Javascript 使用JSP在Google地图上创建多个标记,javascript,google-maps,jsp,spring-mvc,google-maps-api-3,Javascript,Google Maps,Jsp,Spring Mvc,Google Maps Api 3,我一直在开发这个应用程序，使用它，用户可以在他的个人资料中看到访问过的城市/国家作为列表，并且这些地方应该在地图上标出。我试图使用谷歌地图API，但无论我在地图上设置了什么位置，标记都不可见。我正在为我的项目使用JSP和Spring框架。如果您能帮我找到错误，我将不胜感激这是用户页面代码： <%@page session="false"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

我一直在开发这个应用程序，使用它，用户可以在他的个人资料中看到访问过的城市/国家作为列表，并且这些地方应该在地图上标出。我试图使用谷歌地图API，但无论我在地图上设置了什么位置，标记都不可见。我正在为我的项目使用JSP和Spring框架。如果您能帮我找到错误，我将不胜感激

这是用户页面代码：

<%@page session="false"%>
<%@ taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>${title}</title>
    <jsp:include page="header.jsp"/>
    <script
        src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyDxS8WSvbLkzJPrH2TVqfVspGs4QgSLWy8">
    </script>
    <script>
    var map;
    function initialize() {
      var mapOptions = {
        zoom: 1,
        center: new google.maps.LatLng(48.295637, 26.6949621)
      };

      // Display a map on the page
      map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

      // Multiple Markers
      var markers = [
            ['Kyiv, Ukraine', 50.401699,30.252508],
            ['Lviv, Ukraine', 49.8326679,23.9421957]
      ];


      // Loop through our array of markers & place each one on the map  
        for( i = 0; i < markers.length; i++ ) {
            var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
            bounds.extend(position);
            marker = new google.maps.Marker({
                position: position,
                map: map,
                title: markers[i][0]
            });

            // Automatically center the map fitting all markers on the screen
            map.fitBounds(bounds);
        }

     // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
            this.setZoom(14);
            google.maps.event.removeListener(boundsListener);
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <jsp:include page="_menu.jsp" />

    <h1><c:forEach items="${nsur}" var="item" varStatus="loop">
        ${item}
        ${loop.last ? '' : ''}
    </c:forEach></h1>
    <p>${summary} <br> from ${residence}</p>

    <h2>
        <c:forEach items="${countriesCount}" var="item">
            ${item}
        </c:forEach> visited countries: 
    </h2>

    <c:forEach items="${countries}" var="item" varStatus="loop">
        ${item}
        ${loop.last ? '' : ', '}
    </c:forEach>

    <h2>
    <c:forEach items="${citiesCount}" var="item">
        ${item}
    </c:forEach> visited cities: 
        </h2>

    <c:forEach items="${cities}" var="item" varStatus="loop">
        ${item}
        ${loop.last ? '' : ', '}
    </c:forEach>

    <br/><br/><br/>
    <div id="map-canvas" style="height:300px; width:500px"></div>
    <jsp:include page="footer.jsp"/> 
</body>
</html>


${title}
var映射；
函数初始化（）{
变量映射选项={
缩放：1，
中心：新google.maps.LatLng（48.295637,26.6949621）
};
//在页面上显示地图
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
//多重标记
变量标记=[
[乌克兰基辅，50.401699,30.252508]，
[乌克兰利沃夫，49.8326679,23.9421957]
];
//在我们的标记阵列中循环并将每个标记放置在地图上
对于（i=0；i来自${residence}
${item}
访问过的国家：
${item}
${loop.last？''：'，}
${item}
访问城市：
${item}
${loop.last？''：'，}

首先，在for循环之前定义

界限

变量：

var bounds = new google.maps.LatLngBounds();

并在boundsListener中删除或更改此.setZoom（14），否则，由于缩放范围，标记在初始化屏幕中不可见

var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
   //this.setZoom(14)
    google.maps.event.removeListener(boundsListener);
});

非常感谢你！！你真的帮了我