Integre Google Maps MarkerClusterer con la ventana de información
Estoy tratando de poner InfoWindow en múltiples marcadores agrupados con MarkerClusterer, pero sin éxito. Solo puedo generar mapas con infowindows O con cluster; No ambos al mismo tiempo. Buscar en la web me confunde más ...
El punto de partida fuepágina de desarrolladores de google: con mis necesidades, creé el siguiente código:
<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>
Entonces me detuve aquí. El código que se muestra enInfoWindow llama a otros objetos además de las "ubicaciones". Más de lo que intento, los peores resultados son ...
Me gustaría agregar información simple a CADA marcador: solo un título y un enlace web único por marcador.
Alguien puede ayudar?