API Google Maps avec plusieurs marqueurs et InfoWindows

Question

Je crée une page simple à l'aide de l'API Google Maps 3. Ma première. Un marqueur avec InfoWindow fonctionne très bien. J'ai ajouté un second marqueur mais je n'arrive pas à obtenir chacun son propre InfoWindow. Je suis sûr que c'est simple mais ça ne marche pas.

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

vous manque un point-virgule, * et vous définissez marker1 et marker2 comme LatLng s, puis réécrites plus tard avec Marker s ...

... mais voici ce qui est vraiment tuer vous: vous écrasez la variable infowindow. Essayez ce code à (testé brièvement dans le 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); 
    }); 
}​ 

Ce type d'erreur est vraiment facile à attraper avec un outil d'analyse de code statique comme jslint.

---

* Un problème mineur, jusqu'à ce que vous réduisez la taille de votre code - alors il est un problème plus grave