Google Maps API InfoWindows

Question

Ich habe eine Google Map mit mehreren Markern. Ich versuche, für jeden Marker Info in meinem Infofenster zu zeigen:

function initializeMaps() { 
     var latlng = new google.maps.LatLng(59.4920, 37.3010); 
     var myOptions = { 
      zoom: 6, 
      center: latlng, 
      disableDefaultUI: false, 
      scrollwheel: false, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
     }; 
     var infoWindow = new google.maps.InfoWindow(); 
     var latlngbounds = new google.maps.LatLngBounds(); 
     var map = new google.maps.Map(document.getElementById('map'),myOptions); 

     var mc = new MarkerClusterer(map); 
     var marker, i; 
     for (i = 0; i < data.markers.length; i++) { 
       var image = "/images/markers/green-marker.png"; 
       marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(data.markers[i].lat, data.markers[i].lng), 
       map: map, 
       title: data.markers[i].name, 
       icon: image, 
      }); 
      /*jshint loopfunc: true */ 
      (function (marker, data) { 
      google.maps.event.addListener(marker, "click", function (e) { 

       for (i=0; i<data.markers.length; i++) { 
        infoWindow.setContent("<div style = 'min-width:200px;min-height:40px'>" + '<img src="' + data.markers[i].link + '" style="height:150px;width:250px;" />' + "<br />" + data.markers[i].description + "<br />" + "<button>Read More</button>" + "</div>"); 
        infoWindow.open(map, marker); 
       } 

      }); 
     })(marker, data); 
     latlngbounds.extend(marker.position); 

      mc.addMarker(marker); 
     } 
     var bounds = new google.maps.LatLngBounds(); 
    } 

Aber es zeigt mir nur letzte Element Informationen meiner Array an jedem einzelnen Marker infowindow auf der Karte. Im Folgenden meine JSON-Datei:

var data = { 
"markers":[ 
    { 
     "city": "City Sample Text", 
     "name": "Name Sample Text", 
     "shortname": "redsquare_location", 
     "description": "Descr Sample Text", 
     "lat": "51.4910", 
     "lng": "31.2985", 
     "link": "images/infowindows/rs_rp.png", 
    }, 
    { 
     "city": "City Sample Text", 
     "name": "Name Sample Text", 
     "shortname": "pchurch_location", 
     "description": "Descr Sample Text", 
     "lat": "51.4925", 
     "lng": "31.3007", 
     "link": "images/infowindows/pc_rp.png", 
    }, 
    { 
     "city": "City Sample Text", 
     "name": "Name Sample Text", 
     "shortname": "muschool_location", 
     "description": "Decr Sample Text", 
     "lat": "51.4932", 
     "lng": "31.3054", 
     "link": "images/infowindows/ms_rp.png", 
    }  
] 
} 

Was mein Fehler ist?

Answer 1

Sie können wegen dieser nur das letzte Element Informationen siehe

var marker, i; 
for (i = 0; i < data.markers.length; i++) { 
     var image = "/images/markers/green-marker.png"; 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(data.markers[i].lat, data.markers[i].lng), 
      map: map, 
      title: data.markers[i].name, 
      icon: image, 
     }); 

     google.maps.event.addListener(marker, "click", function (e) { 
      ... 
     }); 
} 

Sie versuchen, Ereignis-Listener innerhalb des „für“ Schleife einzustellen. Also, Ihr Fall ist sehr ähnlich zu Javascript multiple dynamic addEventListener created in for loop - passing parameters not working.

Dieser Code funktioniert, wenn Sie so etwas wie diese verwenden werden:

data.markers.forEach(function(marker){ 
    var image = "/images/markers/green-marker.png"; 
    var mapMarker = new google.maps.Marker({ 
      position: new google.maps.LatLng(marker.lat, marker.lng), 
      map: map, 
      title: marker.name, 
      icon: image, 
    }); 
    google.maps.event.addListener(marker, "click", function(e) { 
     ... 
    }); 
    mc.addMaker(mapMarker); 
}) 

Answer 2

Duplizieren des Problems in Frage: Google Maps JS API v3 - Simple Multiple Marker Example

Sie sind nicht Funktion Verschluss auf dem i Variable in dem Klick bekommen

(function (marker, data) { 
    google.maps.event.addListener(marker, "click", function (e) { 

     for (i=0; i<data.markers.length; i++) { 
      infoWindow.setContent("<div style = 'min-width:200px;min-height:40px'>" + '<img src="' + data.markers[i].link + '" style="height:150px;width:250px;" />' + "<br />" + data.markers[i].description + "<br />" + "<button>Read More</button>" + "</div>"); 
      infoWindow.open(map, marker); 
     } 

    }); 
})(marker, data); 

: Hörer und durch die Schleife innerhalb des Klick Zuhörer gehen die Informationen im Infofenster auf den letzten Eintrag in der Daten immer verlassen 10

Simplest Lösung es Funktion Schließung auf die Daten zu erhalten, erforderlich, um das Infofenster zu füllen, so dass Sie brauchen nicht durch den ganzen Satz von Eingabedaten auf jeden Marker Klick iterieren:

(function(marker, data) { 
    google.maps.event.addListener(marker, "click", function(e) { 

    infoWindow.setContent("<div style = 'min-width:200px;min-height:40px'>" + '<img src="' + data.link + '" style="height:150px;width:250px;" />' + "<br />" + data.description + "<br />" + "<button>Read More</button>" + "</div>"); 
    infoWindow.open(map, marker); 
    }); 
})(marker, data.markers[i]); 

proof of concept fiddle

Code-Schnipsel:

function initializeMaps() { 
 
    var latlng = new google.maps.LatLng(59.4920, 37.3010); 
 
    var myOptions = { 
 
    zoom: 6, 
 
    center: latlng, 
 
    disableDefaultUI: false, 
 
    scrollwheel: false, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    }; 
 
    var infoWindow = new google.maps.InfoWindow(); 
 
    var latlngbounds = new google.maps.LatLngBounds(); 
 
    var map = new google.maps.Map(document.getElementById('map'), myOptions); 
 

 
    var mc = new MarkerClusterer(map); 
 
    var marker, i; 
 
    for (i = 0; i < data.markers.length; i++) { 
 
    var image = "http://maps.google.com/mapfiles/ms/icons/green.png"; 
 
    var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(data.markers[i].lat, data.markers[i].lng), 
 
     map: map, 
 
     title: data.markers[i].name, 
 
     icon: image, 
 
    }); 
 
    /*jshint loopfunc: true */ 
 
    (function(marker, data) { 
 
     google.maps.event.addListener(marker, "click", function(e) { 
 

 
     infoWindow.setContent("<div style = 'min-width:200px;min-height:40px'>" + '<img src="' + data.link + '" style="height:150px;width:250px;" />' + "<br />" + data.description + "<br />" + "<button>Read More</button>" + "</div>"); 
 
     infoWindow.open(map, marker); 
 
     }); 
 
    })(marker, data.markers[i]); 
 
    latlngbounds.extend(marker.position); 
 

 
    mc.addMarker(marker); 
 
    } 
 
    // var bounds = new google.maps.LatLngBounds(); 
 
    map.fitBounds(latlngbounds); 
 
} 
 
google.maps.event.addDomListener(window, "load", initializeMaps); 
 

 
var data = { 
 
    "markers": [{ 
 
    "city": "City Sample Text", 
 
    "name": "Name Sample Text", 
 
    "shortname": "redsquare_location", 
 
    "description": "Descr Sample Text 0", 
 
    "lat": "51.4910", 
 
    "lng": "31.2985", 
 
    "link": "images/infowindows/rs_rp.png", 
 
    }, { 
 
    "city": "City Sample Text", 
 
    "name": "Name Sample Text", 
 
    "shortname": "pchurch_location", 
 
    "description": "Descr Sample Text 1", 
 
    "lat": "51.4925", 
 
    "lng": "31.3007", 
 
    "link": "images/infowindows/pc_rp.png", 
 
    }, { 
 
    "city": "City Sample Text", 
 
    "name": "Name Sample Text", 
 
    "shortname": "muschool_location", 
 
    "description": "Decr Sample Text 2", 
 
    "lat": "51.4932", 
 
    "lng": "31.3054", 
 
    "link": "images/infowindows/ms_rp.png", 
 
    }] 
 
};

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script> 
 
<div id="map"></div>