帶有多個標記和InfoWindows的Google Maps API

Question

我正在使用Google Maps API 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和​​爲LatLng s，然後後來與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一個靜態代碼分析工具。

---

*一個小問題，直到您壓縮代碼 - 那麼它是一個更大的問題