Google Maps API с несколькими маркерами и InfoWindows - PullRequest
Новая
       4

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

2 голосов
/ 04 октября 2010

Я создаю простую страницу, используя 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);
    });
}

1 Ответ

2 голосов
/ 04 октября 2010

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

..Но вот что действительно вас убивает: вы перезаписываете переменную infowindow.Попробуйте этот код (вкратце протестированный на игровой площадке code ): 

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 .

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

...