Mehrere Marker auf Google Map mit JSP

Ich habe an der Anwendung gearbeitet, mit der Benutzer besuchte Städte/Länder in seinem Profil als Liste sehen können und auch diese Orte sollten auf der Karte markiert werden. Ich habe versucht, Google Map API zu verwenden, aber egal, welche Orte ich Markierungen gesetzt habe, sind auf der Karte nicht sichtbar. Ich verwende JSP und Spring Framework für mein Projekt. Ich wäre dankbar, wenn Sie mir geholfen hätten, einen Fehler zu finden!Mehrere Marker auf Google Map mit JSP

Das Benutzerseite Code ist:

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

Quelle

2017-06-15 Cassie

Zu allererst Definieren Sie Ihre bounds Variable vor for-Schleife:

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

Und entfernen oder this.setZoom(14) in boundsListener ändern, andernfalls Marker aren‘ t aufgrund des Zoombereichs im Initialisierungsbildschirm sichtbar.

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

Quelle

2017-06-15 12:17:15

Vielen Dank !! Sie haben mir wirklich geholfen – Cassie

@Cassie Gern geschehen. –

Mehrere Marker auf Google Map mit JSP

Antwort

Verwandte Themen