Google Maps v3 Infowindows at true location anchor

This adapts the Google Maps API Infowindow example to place the infowindow anchor at the actual marker point, instead of the top of the marker image. This is achieved by temporarily hiding the marker visibility while the infowindow is being displayed. It also assigns the marker object directly to the markers array, instead of the usu al assignment to the marker variable which is then pushed to the markers array anyway. This prevents unneeded assignments, helps keep the global namespace cleaner, and speeds up processing.

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>

CSS

#map_canvas { 
  border:1px solid black;
  height: 400px;
  width: 100%;
  border-radius: 4px;
}

JavaScript

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1],
  ['Maroubra Beach', -13.950198, 101.259302, 1]
];
var map;
var bounds;
var markers = [];

function init(){
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.92, 151.25),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var num_markers = locations.length;
  for (var i = 0; i < num_markers; i++) {  
    markers[i] = new google.maps.Marker({
      position: {lat:locations[i][1], lng:locations[i][2]},
      map: map,
      html: locations[i][0],
      id: i,
    });
         
    google.maps.event.addListener(markers[i], 'click', function(){
      var infowindow = new google.maps.InfoWindow({
        id: this.id,
        content:this.html,
        position:this.getPosition()
      });
      google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
        markers[this.id].setVisible(true);
      });
      this.setVisible(false);
      infowindow.open(map);
    });
  }
  	bounds = new google.maps.LatLngBounds();
			for(i=0;i<markers.length;i++) {
   			bounds.extend(markers[i].getPosition());
			}
  	map.setCenter(bounds.getCenter());

		map.fitBounds(bounds);

	//remove one zoom level to ensure no marker is on the edge.
		map.setZoom(map.getZoom()-1); 

	// set a minimum zoom 
	// if you got only 1 marker or all markers are on the same address map will be zoomed too much.
	if(map.getZoom()> 15){
 	 map.setZoom(15);
	}
}

init();