Несколько маркеров на Google Map с JSP

Question

Несколько маркеров на Google Map с JSP

1

Я работаю над приложением, используя тот пользователь, который может видеть посещенные города/страны в своем профиле в качестве списка, а также эти места должны быть отмечены на карте. Я попытался использовать API карт Google, но независимо от того, какие места я устанавливаю, маркеры не видны на карте. Я использую 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>

Cassie 15 июнь 2017, в 14:17

Источник

Теги:

javascript

jsp

spring-mvc

google-maps

google-maps-api-3

1 ответ

Ещё вопросы

Gurkan Yesilyurt · Accepted Answer · 2017-06-15T09-42-00.000Z

Прежде всего, определите переменную bounds перед for-loop:

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

И удалите или измените this.setZoom(14) в boundsListener, иначе маркеры не будут отображаться на экране инициализации из-за диапазона масштабирования.

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

Большое спасибо!! ты действительно помог мне