When I change "const map" to "const map1" markerClusterer is preset in progect, but don't create and don't show any clusters. old MarkerClusterer from from google examples still work fine.
It's error or feature or my missandestending?
I'm try to disply 2 clasters (via MarkerClusterer and markerClusterer )
<!DOCTYPE html >
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100% }
</style>
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script type="text/javascript">
const locations = [
{ lat: -31.56391, lng: 147.154312 },
{ lat: -33.718234, lng: 150.363181 },
];
function initMap() {
const map1 = new google.maps.Map(document.getElementById("map"), {
zoom: 3,
center: { lat: -28.024, lng: 140.887 },
});
// Create an array of alphabetical characters used to label the markers.
const labels = "ABC";
// Add some markers to the map.
const markers = locations.map((location, i) => {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length],
});
});
// Add cluster via @googlemaps/markerclusterer
var MyCluster = new markerClusterer.MarkerClusterer ( { map1, markers } );
// Add cluster via examples/markerclusterer
var markerCluster = new MarkerClusterer(map1, markers, {imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
</script>
</head>
<body
<div id="map" style="width:100%; height:100%"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY" async defer></script>
</body>
</html>