All infowindows have same data

Question

Hi Guys,

im fairly new to the Google Maps V3 API and i'm running into an issue where all infowindows have the same data, the code im using iterates through an array of marker details and outputs the marker plus an infowindow for each marker. This is my code:

    <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>

The issue is sort of fixed if a 'var' declaration is made before 'infowindow.open(map,marker);' if this is done then i can see each window with its respective data but then when one infowindow is opened the previous one will not close.

the site is here: http://www.danhall.co.uk/algarve/map.php

I'm a bit lost, any help much appreciated.

Answer 1

Definitely use the var declaration for the infowindow; otherwise infowindow is global and you're overwriting it every time you call createMarker().

After that, you just need to close all open infowindows every time you show one. Here's how I've solved this before:

...
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;
}