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="map"></div>
CSS
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
JavaScript
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...