JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<div id="map"></div>
CSS
#map {
width: 500px;
height: 500px;
}
JavaScript
var map;
var delay = 100;
var infowindow = new google.maps.InfoWindow();
var latlng = new google.maps.LatLng(21.0000, 78.0000);
var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();
var nextAddress = 0;
function initialize() {
var mapOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
theNext();
}
function geocodeAddress(address, next) {
geocoder.geocode({
address: address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var p = results[0].geometry.location;
var lat = p.lat();
var lng = p.lng();
createMarker(address, lat, lng);
} else {
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
nextAddress--;
delay++;
} else {}
}
next();
});
}
function createMarker(add, lat, lng) {
var contentString = add;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
bounds.extend(marker.position);
}
function theNext() {
if (nextAddress < locations.length) {
setTimeout('geocodeAddress("' + locations[nextAddress] + '",theNext)', delay);
nextAddress++;
} else {
map.fitBounds(bounds);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
var locations = ['SO21 3NE','Horsham','RG45 7EG',
'New Delhi, India',
'Mumbai, India',
'Bangaluru, Karnataka, India',
'Hyderabad, Ahemdabad, India',
'Gurgaon, Haryana, India',
'Cannaught Place, New Delhi, India',
'Bandra, Mumbai, India',
'Nainital, Uttranchal, India',
...