Maps API v3 Multiple markers with single infowindow

Draw multiple markers that share a common infowindow object

by upsidown

HTML

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

CSS

#map-canvas {
    height: 400px;
}

JavaScript

function initialize() {

    var mapOptions = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(1, 1)
    };

    var locations = [
        [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'],
        [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'],
        [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'],
        [new google.maps.LatLng(2, 0), 'Marker 4', 'Infowindow content for Marker 4'],
        [new google.maps.LatLng(2, 1), 'Marker 5', 'Infowindow content for Marker 5'],
        [new google.maps.LatLng(2, 2), 'Marker 6', 'Infowindow content for Marker 6']
    ];

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var infowindow = new google.maps.InfoWindow();

    for (var i = 0; i < locations.length; i++) {

        var marker = new google.maps.Marker({
            position: locations[i][0],
            map: map,
            title: locations[i][1],
            iwContent: locations[i][2]
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(this.iwContent);
            infowindow.open(map, this);
        });
    }
}

initialize();