Google Multiple Pins with Infowindow

by Faisal Khan Janjua

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

CSS

#map_canvas{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

JavaScript

var locations = [
    ['<strong>Evamp</strong><br>Street # 1, F-8/3 Islamabad', 33.717194, 73.035833],
    ['<strong>Saanga</strong><br>Street # 1, F-8/3 Islamabad', 33.714194, 73.038833],
    ['<strong>Evamp & Saanga</strong><br>Street # 1, F-8/3 Islamabad', 33.716569, 73.043579], // Default last location
];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom:15,
  scrollwheel:false,
  draggable: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  center: new google.maps.LatLng(33.716569, 73.043579)
});

var marker, i;
for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
		icon: 'http://www.iconninja.com/files/979/767/799/map-navigation-marker-location-pin-icon.png',
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

var infowindow = new google.maps.InfoWindow({
  content: '<strong>Evamp & Saanga</strong><br>Street # 1, F-8/3 Islamabad'
});
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});
// infowindow.open(map,marker); // open default info window on start