Все информационные окна имеют одинаковые данные

Question

Я довольно новичок в API Карт Google V3, и я столкнулся с проблемой, когда все информационные окна имеют одинаковые данные, код, который я использую, перебирает массив данных маркера и выводит маркер плюс информационное окно для каждого маркера.Это мой код:

    <script type="text/javascript">

(function () {
google.maps.Map.prototype.markers = new Array();
google.maps.Map.prototype.addMarker = function(marker) {
this.markers[this.markers.length] = marker;
};})();

function initialize() {

var latlng = new google.maps.LatLng(37.0691, -8.0312);

    var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var house = 'images/house.png';

    var a = new Array();

    var t =  new Object();
    t.name = "Casa De Cova"
    t.lat =  37.0691
    t.lng =  -8.0312
    t.ico = house
    t.info = 'Casa De Cova Villa'
    a[0] = t;

    var t =  new Object();
    t.name = "Casa Jaquinta"
    t.lat =  37.0450
    t.lng =  -8.0442
    t.ico = house
    t.info = 'Jaquinta Villa'
    a[1] = t;

    var t =  new Object();
    t.name = "Faro Aiport"
    t.lat =  37.016187
    t.lng =  -7.970581
    t.ico = 'images/plane.png'
    t.info = 'The main Airport'
    a[2] = t;


    for (var i = 0; i < a.length; i++) 
    {
        var latlng = new google.maps.LatLng(a[i].lat, a[i].lng);
        map.addMarker(createMarker(a[i].name,latlng,a[i].ico,a[i].info));
    }
}

var counter = 1;

function createMarker(name, latlng, icon, info) 
{
    var marker = new google.maps.Marker({position: latlng, map: map, icon: icon, title: name});

    infowindow = new google.maps.InfoWindow({            
        content: info
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });

    document.getElementById(counter).onclick = function() {
        infowindow.open(map, marker);
    }

    counter++;
    return marker;
}
</script>

Проблема вроде исправлена, если объявление 'var' было сделано до 'infowindow.open (map, marker);'если это сделано, то я могу видеть каждое окно с соответствующими данными, но тогда, когда одно информационное окно открыто, предыдущее не закроется.

сайт находится здесь: http://www.danhall.co.uk/algarve/map.php

I 'Я немного потерян, любая помощь очень ценится.

Answer 1

Определенно используйте объявление var для информационного окна; в противном случае infowindow является глобальным и вы перезаписываете его каждый раз, когда звоните createMarker().

После этого вам просто нужно закрывать все открытые информационные окна каждый раз, когда вы их открываете. Вот как я решил это раньше:

...
var counter = 1,
    infowindows = [];

function closeInfoWindows()
{
    var i = infowindows.length;
    while(i--)
    {
        infowindows[i].close();
    }
}

function createMarker(name, latlng, icon, info) 
{
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: icon,
        title: name
    });

    var infowindow = new google.maps.InfoWindow({            
        content: info
    });

    infowindows.push(infowindow);

    google.maps.event.addListener(marker, 'click', function ()
    {
        infowindow.open(map,marker);
    });

    document.getElementById(counter).onclick = function ()
    {
        infowindow.open(map, marker);
    }

    counter++;
    return marker;
}