<div id="map"></div>
<style>
body
{
padding:0px;
margin:0px;
}
#map
{
width:100%;
height:500px;
}
</style>
<script>
var map;
var locations = [
["Jaipur",26.912434,75.787271,"Jaipur"],
["Delhi",28.613939,77.209021,"Delhi"],
];
function initMap() {
myLatLng = {lat: 26.912434, lng: 75.787271};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: myLatLng
});
setMarkers(map,locations);
}
function setMarkers(map,locations)
{
var marker, i
for (i = 0; i < locations.length; i++)
{
var title = locations[i][0]
var lat = locations[i][1]
var long = locations[i][2]
var content = locations[i][3]
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map, title: title , position: latlngset
});
map.setCenter(marker.getPosition());
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
if($('.gm-style-iw').length)
{
$('.gm-style-iw').parent().remove();
}
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
}
</script>
<script async defer src="https://maps.google.com/maps/api/js?sensor=false&callback=initMap"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>