Google Maps Multiple Markers

Also handles the closure issue

by mwfire

HTML

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

CSS

#map_canvas {
    width: 400px;
    height: 400px;
    background: #CCC;
}

JavaScript

var map,
    geocoder,
    bounds,
    address,
    myLatlng = new google.maps.LatLng(40, -74);

function initialize() {

    var mapOptions = {
        center: myLatlng,
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: false,
        scrollwheel: false,
        navigationControl: true,
        mapTypeControl: false,
        scaleControl: true,
        draggable: true
    };

    //styles
    var styles = [{
        "elementType": "geometry.fill",
        "stylers": [
                { "visibility": "on" },
                { "hue": "#FF0000" },
                { "weight": 2 },
                { "gamma": 1 },
                { "lightness": 20 },
                { "saturation": 50 }
            ]
    }];

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    map.setOptions({styles: styles});

    var buildings = [
        { address: '76 Ninth Ave, New York, NY‎', title: "Test 1" },
        { address: '825 8th Ave, New York, NY‎', title: "Test 2" },
        { address: '127 E 23rd St, New York, NY‎', title: "Test 3" }
    ];

    geocoder = new google.maps.Geocoder();

    // Create the info window
    var infowindow = new google.maps.InfoWindow();
    
    for (var i=0; i < buildings.length; i++) {
        // Create a new lexical scope by "copying the buildings"
        (function(building) {
            geocoder.geocode({ 'address': building.address }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    // Create the marker
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                    
                    // Add the eventListener
                    google.maps.event.addListener(marker, 'click', function() {
                        infowindow.setContent("<b>" + building.title + "</b><br> " +...