JSFiddle - React, Tailwind, and code Playground
JavaScript
function initialize() {
var center = new google.maps.LatLng(49.9, 15.5);
var lastInfoWindow = null;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
});
var markers = [];
var max = data.photos.length;
for (var i = 0; i < max; i++) {
(function(index) {
var dataPhoto = data.photos[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude, dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng,
icon: '/wp-content/themes/default/img/home-icon.png'
});
var contentString = '<div class="mapcontent">' +
'<a href="' + dataPhoto.link + '"><h5>' + dataPhoto.title + '</h5></a>' +
'' +
'<a href="' + dataPhoto.link + '"><img src="' + dataPhoto.photo_file_url + '"/></a><p></p>' +
'<a href="' + dataPhoto.link + '" class="btn btn-primary btn-md" data-toggle="modal">Zobrazit detaily</a>' +
'' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
});
marker.addListener('click', function () {
if(lastInfoWindow!==null) {
lastInfoWindow.close();
}
infowindow.open(map, marker);
lastInfoWindow = infowindow;
});
markers.push(marker);
})(i);
}
var clusterStyles = [
{
textColor: 'white',
url: '/wp-content/themes/default/img/home-icon3.png',
height: 48,
width: 48
},
{
textColor: 'white',
url: '/wp-content/themes/default/img/home-icon3.png',
height: 48,
width: 48
},
...