Разместите несколько маркеров с несколькими информационными окнами на картах Google - PullRequest
Новая
       14

Разместите несколько маркеров с несколькими информационными окнами на картах Google

0 голосов
/ 04 октября 2011

У меня есть mapArray, который создается динамически на основе средств клиентов в нашей базе данных.

Я пытаюсь пройтись по ним и создать click слушатель, чтобы открыть информационное окно каждого из них соответственно.

Вот что у меня есть 

for (var i in mapArray) {

    var thislatlng = new google.maps.LatLng(mapArray[i][1], mapArray[i][2]),
    contentString = '<b>' + mapArray[i][6] + '</b><br /><br />' + mapArray[i][3] + '<br /><br /><a href="http://maps.google.com/maps?daddr=' + mapArray[i][3].replace("<br />", " ").replace("#", " ") + '" target ="_blank">Get Directions<\/a>',
    marker = new google.maps.Marker({
        map: map,
        position: thislatlng
    }),
    infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    google.maps.event.addListener(marker, 'click', function() {

        infowindow.open(map, this);
    });
}

Но у меня проблема в том, что все они имеют один и тот же contentString. Мне удалось преодолеть одну проблему, изменив 

infowindow.open(map, marker);

до 

infowindow.open(map, this);

Но это все еще не решает проблемы с окном.

Как я могу использовать открыть каждый 1013 * динамически? Они просто принимают значение последнего.

1 Ответ

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

JavaScript не имеет блока видимости.infoWindow подтягивается к вершине функции, и каждый маркер указывает на тот же самый, который является последним созданным окном.Вы можете повторно использовать одно и то же InfoWindow, убедившись, что вы не открываете более одного одновременно, и заменить содержимое на основе маркера, на который нажали: 

var infowindow = new google.maps.InfoWindow();

for (var i in mapArray) {

    var thislatlng = new google.maps.LatLng(mapArray[i][1], mapArray[i][2]),
        contentString = '<b>' + mapArray[i][6] + '</b><br /><br />' + mapArray[i][3] + '<br /><br /><a href="http://maps.google.com/maps?daddr=' + mapArray[i][3].replace("<br />", " ").replace("#", " ") + '" target ="_blank">Get Directions<\/a>',
        marker = new google.maps.Marker({
            map: map,
            position: thislatlng,
            information: contentString //Just store the string in a property
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(this.information); //Recall the property when clicked to set the content of the window
        infowindow.open(map, this);
    });
}

JSFiddle: http://jsfiddle.net/YCW5a/

...