JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<div id="info"></div>
<div id="map"></div>
CSS
html, body, #map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
JavaScript
var geocoder;
var markers = [];
function initialize(cities) {
var mapOptions = {
center: new google.maps.LatLng(48.220, 15.199),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var markerCluster = new MarkerClusterer(map, markers, {
zoomOnClick: false
});
//markerCluster should be always above the geocoder-->
geocoder = new google.maps.Geocoder();
for (var i = 0; i < cities.length; i++) {
var city = cities[i];
geocodeCity(city, markerCluster);
}
// Listen for a cluster to be clicked
google.maps.event.addListener(markerCluster, 'clusterclick', function (cluster) {
var markers = cluster.getMarkers();
var content = '';
for (var i = 0; i < markers.length; i++) {
var marker = markers[i];
content += marker.title;
content += ("<br>");
}
var infowindow = new google.maps.InfoWindow();
infowindow.setPosition(cluster.getCenter());
infowindow.close();
infowindow.setContent(content);
infowindow.open(map);
google.maps.event.addListener(map, 'zoom_changed', function () {
infowindow.close();
});
});
}
function geocodeCity(city, markerCluster) {
geocoder.geocode({
'address': city.city + " Niederösterreich"
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
position = results[0].geometry.location;
var marker = new google.maps.Marker({
map: map,
position: position,
title: "Ort: " + city.city + "\nBeitrag: " + city.title + "\nRed.: " + city.reporter + "\nDatum: " + city.storydate
});
// below code alway lies inside the loop
markers.push(marker);
markerCluster.addMarker(marker);
} else {
...