CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-markers
user1430841
user1430841

Reputation: 47

How to reverse order of markers topping each other?

I am drawing markers that represent shops on a map.

There is a single global infoWindow which appears for each marker that is clicked, right after it closes for the previous clicked marker.

In some cases a few shops may have the same address so the markers appear on top of each other and one can only see the top marker.

To solve this I added pagination to the infoWindow.

The problem is that the top marker is the last one on the list, and so the infoWindow shows the latest shop's info and the pagination shows the "back" button, instead of showing the first shop first and the "next" button.

I tried reversing the order of the "for" loop like this for (i=limit; i>0; i--) but it doesn't work. The map gets stuck as if running some ajax request.

Here's the code:

function drawShopsMarkers(){
    var marker;
    markersArray = [];
    var i;
    var limit = globalShopsArr.length;

    for (i=0; i<limit; i++){
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(globalShopsArr[i].shopLat, globalShopsArr[i].shopLng), 
            map: map,
            title: globalShopsArr[i].shopTitle
        });

        markersArray.push(marker);
        marker.setMap(map);

        google.maps.event.addListener(markersArray[i], 'click', makeListener(i));
    }

    function makeListener(index) {
        return function() {
            globalInfowindow.disableAutoPan=true;
            globalInfowindow.open(map,markersArray[index]);

            CreateInfoWindowString(index);

            globalInfowindow.setOptions({
                content: globalContentString
            });
        }
    }       
}

The CreateInfoWindowString() function simply populates the globalContentString including the pagination.

Can you say what's causing the problem?

Upvotes: 2

Views: 167

Answers (1)

Cybercartel
Cybercartel

Reputation: 12592

Try 

for (i=limit-1;i>=0;i--)

like suggested in the comment. You need to change the line when you attach the function to the marker, too. When you push the marker to the array it's accumulate but you attach function to a non-existent element. Use another variable and increment it in the loop: 

c++

This line 

google.maps.event.addListener(markersArray[i],.. ... ...
When you change the loop to decrement i and try markersArray[i] it must give an error because element i isn't in the array yet. So create a c variable and use it instead like I wrote and change the line to use c instead of i.

Upvotes: 1

Related Questions