My goal was a function that creates a marker and its info window with minimal syntax.
The options are Marker options and InfoWindow options combined in a single object. The minimum syntax is:
  position: new google.maps.LatLng(60.17295,24.93981)
Add some more properties and you get info window and a tooltip:
  position: new google.maps.LatLng(60.17295,24.93981),
  content: "Some text in the info bubble.",
  title: "Tooltip text"
Repeat the function call for as many markers as you need. You don't need to give them unique variable names.

To use the syntax, you must paste the following function to your script:

 * creates Marker and InfoWindow on a Map() named 'map'
 * saves marker to markerArray and markerBounds
 * @param options object for Marker and InfoWindow
 * @author Esa 2009
var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];
function makeMarker(options){
  var pushPin = new google.maps.Marker({map:map});
  google.maps.event.addListener(pushPin, "click", function(){
    infoWindow.setOptions(options);, pushPin);
  return pushPin;

google.maps.event.addListener(map, "click", function(){
Add following line after all the makeMarker() calls:
It takes care of centering and zooming.

❤ InfoWindow closes on map click for user convenience.

❤ Content can be HTML string or DOM node.

markerArray is needed if you want to modify or clear the markers live.

Yes, there is a namespace collision with properties 'position' and 'zIndex'. I don't see any harm with that. Still Google should have chosen unique property names.

Feel free to use/develop/molest the function as you like.


Internet Explorer does not handle right object literal with a trailing comma. If your page works fine with all the browsers but IE, check the commas first.


See the source this page or plain example with minimal html.

Drawing rectangles on v3 map

Overlaying images in v3

Kilometer/mile sized overlays in v3

More experiments

Spread Firefox Affiliate Button Google Chrome