Google Maps MarkerClusterer mit Infowindow integrieren

Question

Ich versuche InfoWindow in mehrere Marker zu gruppieren, die mit MarkerClusterer gruppiert sind, aber ohne Erfolg. Ich kann nur Karten mit Infofenster ODER mit Cluster erstellen; nicht beides gleichzeitig. Die Suche über Web macht mich zu verwirren ....

Der Startpunkt war google developers page: mit meinen Bedürfnissen, habe ich den folgenden Code:

<div id="map"></div> 
    <script> 

     function initMap() { 

     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 5, 
      center: {lat: -15.7942357, lng: -47.8821945} 
     }); 

     // Add some markers to the map. 
     // Note: The code uses the JavaScript Array.prototype.map() method to 
     // create an array of markers based on a given "locations" array. 
     // The map() method here has nothing to do with the Google Maps API. 
     var markers = locations.map(function(location, i) { 
      return new google.maps.Marker({ 
      position: location, 
      }); 
     }); 

     // Add a marker clusterer to manage the markers. 
     var markerCluster = new MarkerClusterer(map, markers, 
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
     } 
     var locations = [ 
    {lat: -19.9286,  lng: -43.93888}, 
    {lat: -19.85758, lng: -43.9668}, 
    {lat: -18.24587, lng: -43.59613}, 
    {lat: -20.46427, lng: -45.42629}, 
    {lat: -20.37817, lng: -43.41641}, 
    {lat: -20.09749, lng: -43.48831}, 
    {lat: -21.13594, lng: -44.26132}, 
     ] 
    </script> 
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"> 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
    </script> 

Dann hier ich stoped. Der in InfoWindow gezeigte Code ruft ein anderes Objekt als die "Standorte" auf. Mehr als ich versuche, schlechteste Ergebnisse sind ...

Ich möchte nur einfache Informationen zu jedem Marker hinzufügen: nur einen Titel und einen einzigartigen Weblink pro Marker.

Kann jemand helfen?

Answer 1

Fügen Sie die "eindeutigen Informationen" für jeden Marker zu Ihrem Standort-Array hinzu (wie die Antwort auf diese Frage:).

Fügen Sie jedem Marker einen Klick-Listener hinzu, der das InfoWindow mit diesem eindeutigen Inhalt öffnet.

var infoWin = new google.maps.InfoWindow(); 
var markers = locations.map(function(location, i) { 
    var marker = new google.maps.Marker({ 
    position: location 
    }); 
    google.maps.event.addListener(marker, 'click', function(evt) { 
    infoWin.setContent(location.info); 
    infoWin.open(map, marker); 
    }) 
    return marker; 
}); 

proof of concept fiddle

Code-Schnipsel:

function initMap() { 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 5, 
 
    center: { 
 
     lat: -15.7942357, 
 
     lng: -47.8821945 
 
    } 
 
    }); 
 
    var infoWin = new google.maps.InfoWindow(); 
 
    // Add some markers to the map. 
 
    // Note: The code uses the JavaScript Array.prototype.map() method to 
 
    // create an array of markers based on a given "locations" array. 
 
    // The map() method here has nothing to do with the Google Maps API. 
 
    var markers = locations.map(function(location, i) { 
 
    var marker = new google.maps.Marker({ 
 
     position: location 
 
    }); 
 
    google.maps.event.addListener(marker, 'click', function(evt) { 
 
     infoWin.setContent(location.info); 
 
     infoWin.open(map, marker); 
 
    }) 
 
    return marker; 
 
    }); 
 

 
    // Add a marker clusterer to manage the markers. 
 
    var markerCluster = new MarkerClusterer(map, markers, { 
 
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' 
 
    }); 
 

 
} 
 
var locations = [{ 
 
    lat: -19.9286, 
 
    lng: -43.93888, 
 
    info: "marker 1" 
 
}, { 
 
    lat: -19.85758, 
 
    lng: -43.9668, 
 
    info: "marker 2" 
 
}, { 
 
    lat: -18.24587, 
 
    lng: -43.59613, 
 
    info: "marker 3" 
 
}, { 
 
    lat: -20.46427, 
 
    lng: -45.42629, 
 
    info: "marker 4" 
 
}, { 
 
    lat: -20.37817, 
 
    lng: -43.41641, 
 
    info: "marker 5" 
 
}, { 
 
    lat: -20.09749, 
 
    lng: -43.48831, 
 
    info: "marker 6" 
 
}, { 
 
    lat: -21.13594, 
 
    lng: -44.26132, 
 
    info: "marker 7" 
 
}, ]; 
 

 
google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> 
 
<div id="map"></div>