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 textArr =['1','2','3'];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: latlng
});
var infowindow = new google.maps.InfoWindow({
});
addMarker(textArr[0]);
addMarker(textArr[1]);
addMarker(textArr[2]);
var i = 0;
function addMarker(text){
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: 0
});
marker.addListener('click', function(e) {
infowindow.setContent(text);
infowindow.open(map, marker);
this.setZIndex(--i);
});
}
}