Google Maps and Their Markers

Question

I have a JSON array of Marker positions being pulled into a Google map - This works fine.

I also have infoWindows linked to each of those markers - These also work fine.

However, when I click a marker (in any browser), the infoWindow only appears over the last added marker.

Here is a fiddle: http://jsfiddle.net/neuroflux/8WDwn/10/ and here is my loop:

for (var a = 0; a < dealer_markers.length; a++) {
    var tmpLat = dealer_markers[a].lat;
    var tmpLng = dealer_markers[a].lng;
    var tmpName = dealer_markers[a].name;
    var tmpAdr = dealer_markers[a].adr;
    var tmpTel = dealer_markers[a].pc;
    var tmpPc = dealer_markers[a].tel;

    contentString[a] = '<div id="bg"><h2 class="title">'+tmpName+'</h2><h3 class="address">'+tmpAdr+'</h3><h3 class="pc">'+tmpPc+'</h3><h3 class="telephone">'+tmpTel+'</h3></div>';
    var content = contentString[a];

    dealer[a] = new google.maps.LatLng(tmpLat,tmpLng);

    deal = dealer[a];

    marker[a] = new google.maps.Marker({ 
        map:map,
        position: deal,
        icon:'dealer.png',
        title: "|"+new google.maps.LatLng(dealer[a].Ja,dealer[a].Ka)
    });

    lat = marker[a].position.Ja;
    lng = marker[a].position.Ka;

    compositeLatLng = new google.maps.LatLng(lat,lng);
    mark = marker[a];


    google.maps.event.addListener(mark, 'click', function(a) {
        if (mark.infowindow) {
            mark.infowindow.close();
        }

        mark.infowindow = new google.maps.InfoWindow({ 
            content: contentString[marker.indexOf(this)]
        });

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

Please reduce the code in the jsfiddle example so we can pin the problem — Argiropoulos Stavros, May 19 '11 at 12:41

score 2 · Accepted Answer · edited May 23 '17 at 11:52

As I stated in my comment, you can use a closure to work around the problem. Here is the demo. I created a wrapper function that:

creates a marker
optionally attaches an onclick handler

Inside that handler:

it attaches a blank infoWindow to the map (if necessary)
it hides that window, changes its content and shows it again over the marker (logic borrowed from here)

function _newGoogleMapsMarker(param) {
    var r = new google.maps.Marker({
        map: param._map,
        position: new google.maps.LatLng(param._lat, param._lng),
        title: param._head
    });
    if (param._data) {
        google.maps.event.addListener(r, 'click', function() {
            // this -> the marker on which the onclick event is being attached
            if (!this.getMap()._infoWindow) {
                this.getMap()._infoWindow = new google.maps.InfoWindow();
            }
            this.getMap()._infoWindow.close();
            this.getMap()._infoWindow.setContent(param._data);
            this.getMap()._infoWindow.open(this.getMap(), this);
        });
    }
    return r;
}


for (var a = 0; a < dealer_markers.length; a++) {
    .
    .
    .
    var marker = _newGoogleMapsMarker({
        _map: map,
        _lat: tmpLat,
        _lng: tmpLng,
        _head: '|' + new google.maps.LatLng(tmpLat, tmpLng),
        _data: '...'
    });
}

David · Answer 2 · 2011-05-19T08:53:36.917

The problem is that you are creating a function in a loop and then using mark inside that function so it will always appear next to the last marker created as mark is reassigned on each loop iteration

It is also good practice not to create functions in loops, so I would rewrite like this:

var map = null // your map created here

var infowindow = null;

var itemClick = function(a) {
    if (this.infowindow) {
        this.infowindow.close();
    }

    this.infowindow = new google.maps.InfoWindow({
        content: contentString[marker.indexOf(this)]
    });

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

}

for (var a = 0; a < dealer_markers.length; a++) {

    ///  Other code.....

    google.maps.event.addListener(mark, 'click', itemClick);
}

Im sorry but I dont have time to read through your code right now. My answer was based on the snippet you provided but after quick glance at your code I can see that it wont work because of the scope you are creating the markers in. I will try and have another look later (if the question doesn't get answered before) — David, May 19 '11 at 09:20

Google Maps and Their Markers

2 Answers2

Linked