Я не знаю, почему кластер маркеров не показывает мои маркеры сгруппированы, как здесь: http://media.svennerberg.com/2009/01/screenshot_clusterereffect.jpg
Я столкнулся с проблемой в кластеризации маркеров карты Google.Я использую api v3, но по некоторым причинам, которые я не могу выяснить, я не могу применить кластеризацию маркеров.Буду благодарен за любую помощь и предложения.
Мой код выглядит так:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_n_0mOPCs7DxlW4t6rzSiD0KyUXQktVY&callback=myMap"></script>
<script type="text/javascript">
var map;
var infoWindow;
var markersData = [
{lat: 50.25202,
lng: 19.015023,
name: "Test1",
address1: "Test1",
address2: "Test1",
address3: "2019-03-13",
address4: "2019-03-13",
ikona: "http://historia-lokalna.pl/images/places.png" ,
wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"},
{lat: 49.824791,
lng: 19.040867,
name: "Test2",
address1: "Test2",
address2: "Test2",
address3: "2019-03-22",
address4: "2019-03-22",
ikona: "http://historia-lokalna.pl/images/places.png" ,
wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"},
{lat: 50.334918,
lng: 18.14136,
name: "Test3",
address1: "Test3",
address2: "Test3",
address3: "2019-03-08",
address4: "2019-03-08",
ikona: "http://historia-lokalna.pl/images/places.png" ,
wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"},
{lat: 49.825794,
lng: 19.040889,
name: "Test4",
address1: "Test4",
address2: "Test4",
address3: "2019-03-13",
address4: "2019-03-13",
ikona: "http://historia-lokalna.pl/images/places.png" ,
wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"},
]
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(50.57628900072813,21.356987357139587),
zoom: 9,
mapTypeId: 'roadmap',
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
displayMarkers();
// I added a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, marker,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
// End
}
google.maps.event.addDomListener(window, 'load', initialize);
function displayMarkers(){
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markersData.length; i++){
var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
var name = markersData[i].name;
var address1 = markersData[i].address1;
var address2 = markersData[i].address2;
var address3 = markersData[i].address3;
var address4 = markersData[i].address4;
var image = markersData[i].ikona;
var wwwsite = markersData[i].wwwsite;
createMarker(latlng, name, address1, address2, address3, address4, image, wwwsite);
bounds.extend(latlng);
}
map.fitBounds(bounds);
}
function createMarker(latlng, name, address1, address2,address3,address4, image, wwwsite){
var marker = new google.maps.Marker({
map: map,
position: latlng,
title: name,
icon: image
});
google.maps.event.addListener(marker, 'click', function() {
var iwContent = '<div id="iw_container">' +
'<div class="iw_title">' + name + '</div>' +
'<div class="iw_content">' + address1 + '<br />' +
address2 + '<br />' +address3 + '<br />' +address4 + '<br />' +
wwwsite + '</div></div>';
infoWindow.setContent(iwContent);
infoWindow.open(map, marker);
});
}
</script>
<!-- I added a javascript markerclusterer -->
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<!-- End -->
</head>
<body>
<h2 class="przeg">Map:</h2>
<div id="map-canvas"style="width:100%;height:600px;"> </div>
</body>
</html>