Google Maps API with Multiple Markers and InfoWindows

Question

I'm making a simple page using Google Maps API 3. My first. One marker with InfoWindow works great. I added a second marker but I can't get each to display its own InfoWindow. I'm sure it's simple but it's not working.

function initialize() {
    var myLatlng = new google.maps.LatLng(37.8736111,-122.4555556);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


    // Marker1  
    var marker1 = new google.maps.LatLng(37.8736111,-122.4555556);

    var contentString1 = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">Blackie&#8217;s Pasture</h1>'+
    '<div id="bodyContent">'+
    '<p><b>Historical Marker No. 1</b></p> '+
    '<p>The pasture where Blackie lived </p> '+
    '<a href="images/harvey.jpg" alt="Harvey" width="185" height="209" target="_blank">' +
    '<img src="images/harvey.jpg" alt="Harvey" width="93" height="104"  /></a>' +
    '<img src="images/marker-test.jpg" alt="Marker placque" width="93" height="104"  /></a><br />' +
    '<em>Click on a photo to enlarge it</em>' +
'</div>'+
    '</div>';   

    var infowindow = new google.maps.InfoWindow({
        content: contentString1
    });

var marker1 = new google.maps.Marker({
        position: marker1,
        map: map,
        title: "Blackie's Pasture"
    });

google.maps.event.addListener(marker1, 'click', function() {
        infowindow.open(map, marker1);
    });

    // Marker2
var marker2 = new google.maps.LatLng(37.8837959515249951,-122.46597290039062);

var contentString2 = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">Marker Number 2</h1>'+
    '<div id="bodyContent">'+
    '<p><b>The second marker</b></p> '+
    '<p>Just another place </p> '+
    '<a href="images/harvey.jpg" alt="Harvey" width="185" height="209" target="_blank">' +
    '<img src="images/harvey.jpg" alt="Harvey" width="93" height="104"  /></a>' +
    '<img src="images/marker-test.jpg" alt="Marker placque" width="93" height="104"  /></a><br />' +
    '<em>Click on a photo to enlarge it</em>' +
    '</div>'+
    '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString2
    });

var marker2 = new google.maps.Marker({
        position: marker2,
        map: map,
        title: "Marker Number 2"
    });


    google.maps.event.addListener(marker2, 'click', function() {
        infowindow.open(map,marker2);
    });
}

Answer 1

You're missing a semicolon*, and you're defining marker1 and marker2 as LatLngs, and then later overwriting them with Markers...

...but here's what's really killing you: you're overwriting the infowindow variable. Try this code out (untested tested briefly in the code playground):

function initialize() {
    var myLatlng = new google.maps.LatLng(37.8736111, -122.4555556);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // Marker1  
    var latLng1 = new google.maps.LatLng(37.8736111, -122.4555556);

    var contentString1 = '<div id="content"><div id="siteNotice"></div><h2 id="firstHeading" class="firstHeading">Blackie&#8217;s Pasture</h1><div id="bodyContent"><p><b>Historical Marker No. 1</b></p> <p>The pasture where Blackie lived </p> <a href="images/harvey.jpg" alt="Harvey" width="185" height="209" target="_blank"><img src="images/harvey.jpg" alt="Harvey" width="93" height="104" /></a><img src="images/marker-test.jpg" alt="Marker placque" width="93" height="104" /></a><br /><em>Click on a photo to enlarge it</em></div></div>';

    var infowindow1 = new google.maps.InfoWindow({
        content: contentString1
    });

    var marker1 = new google.maps.Marker({
        position: latLng1,
        map: map,
        title: "Blackie's Pasture"
    });

    google.maps.event.addListener(marker1, 'click', function() {
        infowindow1.open(map, marker1);
    });

    // Marker2
    var latLng2 = new google.maps.LatLng(37.8837959515249951, -122.46597290039062);

    var contentString2 = '<div id="content"><div id="siteNotice"></div><h2 id="firstHeading" class="firstHeading">Marker Number 2</h1><div id="bodyContent"><p><b>The second marker</b></p> <p>Just another place </p> <a href="images/harvey.jpg" alt="Harvey" width="185" height="209" target="_blank"><img src="images/harvey.jpg" alt="Harvey" width="93" height="104" /></a><img src="images/marker-test.jpg" alt="Marker placque" width="93" height="104" /></a><br /><em>Click on a photo to enlarge it</em></div></div>';

    var infowindow2 = new google.maps.InfoWindow({
        content: contentString2
    });

    var marker2 = new google.maps.Marker({
        position: latLng2,
        map: map,
        title: "Marker Number 2"
    });

    google.maps.event.addListener(marker2, 'click', function() {
        infowindow2.open(map, marker2);
    });
}​

This type of error is really easy to catch with a static code analysis tool like jslint.

---

*A minor problem, until you minify your code - then it's a bigger problem