API Карт Google с несколькими маркерами и InfoWindows

Question

Я делаю простую страницу с помощью API Карт Google 3. Мой первый. Один маркер с InfoWindow отлично работает. Я добавил второй маркер, но я не могу заставить каждого отобразить его собственный InfoWindow. Я уверен, что это просто, но это не работает.

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

Вы упускаете точкой с запятой, * и вы определяете marker1 и marker2 как LatLng с, а потом перезаписывать их с Marker с ...

... но вот то, что действительно убивает вы: вы переписываете переменную infowindow. Попробуйте этот код из (кратко испытанный в 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); 
    }); 
}​ 

Этот тип ошибки очень легко поймать с статического анализа кода, как jslint.

---

* Незначительная проблема, пока вы не Минимизировать код - то это большая проблема