GoogleMaps InfoWindow не отображается при нажатии на маркер

Question

У меня есть три массива: myLats, (широты) myLngs (долготы) и myLocs (строки адреса) например myLats [0] = 53,3534751, myLngs [0] = -2,5682085, myLocs [0] = Longwood Rd Appleton Warrington. Таким образом, элементы каждого массива все численно соответствуют друг другу.

При построении карты в моей функции initialize () я перебираю их, чтобы разместить несколько маркеров в правильных координатах, и я также пытаюсь, чтобы каждый маркер, имеющий информационное окно, появлялся при нажатии, но когда я щелкаю маркер информационное окно просто не появляется. Любая помощь с этим будет принята с благодарностью.

Код:

function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(54.00366, -2.547855),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

    var marker, infowindow, i;

    for (i = 0; i <= myLats.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(myLats[i], myLngs[i]),
            map: map,
            clickable: true,
            icon: '". url::base() ."resources/icons/accident.png',
        });
        infowindow = new google.maps.InfoWindow({
            content: myLocs[i],
        });
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }
}

Answer 1

Это распространенная проблема при работе с более чем одним маркером. Фактически вы не создаете новое окно для каждого маркера, но должны переопределить отдельное окно для каждого маркера.

Вы найдете проблему и решение на стр. 88 Google Map API V3

Если вы новичок в Google Maps API, я бы порекомендовал прочитать эту книгу, она послужила отличным началом, и я избежал многих "распространенных" ошибок.

Надеюсь, это поможет. Jim

Answer 2

Я сделал несколько изменений, таких как добавление маркеров внутри функции, добавление 'var' и изменение i <= myLats.length на i <myLats.length.Это была комбинация этих изменений, которые заставили его работать. </p>

    var  myLats = [ 54.20366, 54.42366, 54.64366];
    var  myLngs = [ -2.54788, -2.66788, -2.78788];
    var  myLocs = [ "Loc a" , "Loc b" , "Loc c"];

function initialize()
{
var myOptions =
{
    center: new google.maps.LatLng(54.00366,-2.547855),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);

var marker, infowindow, i;

for (i=0; i < myLats.length; i++)
{
  addMarker(i);
}
function addMarker(i) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(myLats[i],myLngs[i]),
        map: map,
        clickable: true,
        //icon: '". url::base() ."resources/icons/accident.png',
    });
    var infowindow = new google.maps.InfoWindow({
        content: myLocs[i]
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}
}

Однако, я предполагаю, что вам нужно решение, которое поддерживает только одно информационное окно, я сначала выяснил это:

    var  myLats = [ 54.20366, 54.42366, 54.64366];
    var  myLngs = [ -2.54788, -2.66788, -2.78788];
    var  myLocs = [ "Loc a" , "Loc b" , "Loc c"];
    var  map, marker, infowindow, i;


function initialize()
{
var myOptions =
{
    center: new google.maps.LatLng(54.00366,-2.547855),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);


infowindow = new google.maps.InfoWindow({ });
for (i = 0; i < myLats.length; i++) {
  addMarker(i);
}
}

function addMarker(i) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(myLats[i],myLngs[i]),
        map: map,
        clickable: true
        //icon: '". url::base() ."resources/icons/accident.png'      
    });

    google.maps.event.addListener(marker, 'click', function(event) {
        infowindow.setContent(myLocs[i]);
        infowindow.open(map,marker);
    });
}