CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
fseixas
fseixas

Reputation: 75

Google Maps API v3 - Adding Event Listeners inside 'for' loop only works in some iterations

I'm developing a website using Google Maps API v3. The basic funcionality that is important for this matter is the following:

JS array marker information example:

var photos = [
{
    file: "republica87",
    title: "Av. República, 87",
    yearA: "2013",
    yearB: "1909",
    desc: "Edifício típico ...",
    author: "Paulo Guedes",
    from: "Arquivo Municipal de Lisboa | Fotográfico",
    link: "...", 
    coords: "38.74266,-9.146851,-85",
},

/*...*/

];

For the markers, only the coords field is relevant, which is then split into latitude and longitude (the third value does not matter for this).

Then, inside a 'for' loop, the markers are created and a 'click' event listener is created as well, for each marker:

/*...*/

var markercam=new Array();

for (var i=1;i<photos.length;i++){
    coords=photos[i].coords;
    coords=coords.split(",");
    lat=coords[0];
    lon=coords[1];
    rot=coords[2];

    /*...*/

    markercam[i] = new google.maps.Marker({
        position: new google.maps.LatLng(lat,lon),
        map: map,
        icon: cameraicon,
        url: './galeria.html?id='+i,
        indice: i,
        shape: shapecirc,
    });

    google.maps.event.addListener(markercam[i], 'click', function() {
        window.location.href = this.url;    
    });

    /*...*/

}

/*...*/

However, it seems that the Listener is only added for some of the markers. I have not figured out anything about those markers that may be causing this. For reference, the values of i that do create the Listener are: 1, 7, 9, 11, 12, 13, 17, 19, 22. They are always the same.

It's also important to note that, besides the 'click' Listener, I have also added 'mouseover' and 'mouseout' events, that work for every marker with no issues.

The file that has all the marker information is here, and the map where the markers are placed is here. As you can see, when clicking on some markers, you are sent to a different page, whereas others don't do anything. Example: the southernmost marker works, the northernmost doesn't.

Any ideas?

Thanks!

PS: Please excuse any obvious programming problems, this is the first time I am dealing with JS.

Upvotes: 1

Views: 513

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117364

It's not documented(at least I couldn't find it), but setting the optimized-property of the markers to false fixes it for me.

As it seems the call of setZIndex() will update the ZIndex of the Marker-Image, but not the ZIndex of the MouseTarget(the clickable region, it's defined in a different layer) , when the optimized-property is set to true(the default-setting)

Upvotes: 1

Related Questions