JSFiddle - React, Tailwind, and code Playground
HTML
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
JavaScript
function initMap() {
var latlng = {lat: -25.363, lng: 131.044};
var markerArr =[
{
text:'1',
latlng:new google.maps.LatLng({lat: -25.363, lng: 131.044}),
},
{
text:'2',
latlng:new google.maps.LatLng({lat: -25.362, lng: 131.044}),
},
{
text:'3',
latlng:new google.maps.LatLng({lat: -25.361, lng: 131.044}),
},
{
text:'4',
latlng:new google.maps.LatLng({lat: -25.363, lng: 131.043}),
},
{
text:'5',
latlng:new google.maps.LatLng({lat: -25.363, lng: 131.044}),
},
{
text:'6',
latlng:new google.maps.LatLng({lat: -25.363, lng: 131.042}),
},
{
text:'7',
latlng:new google.maps.LatLng({lat: -25.363, lng: 131.044}),
},
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: latlng
});
var infowindow = new google.maps.InfoWindow({
});
markerArr.map(function(e, i, arr){
e.overlaped = arr.reduce(function(sum, x){
if ( e.latlng.equals(x.latlng) ) sum++;
return sum;
},0);
addMarker(e)
});
var i = 0;
function addMarker(_){
var latlng = _.latlng;
var text = _.text;
var overlaped = _.overlaped;
var marker = new google.maps.Marker({
position: _.latlng,
map: map,
label: String(overlaped),
zIndex: 0
});
marker.addListener('click', function(e) {
infowindow.setContent(text);
infowindow.open(map, marker);
this.setZIndex(--i);
});
}
}