Removing a Marker from an array in Google maps v3.0 problem

I've got this problem when removing a Marker from an array. I click on the map and place markers 开发者_Go百科where i have clicked, the markers are then saved in an array. When removing them it only works in the order i have placed them but backwards, that means i place 1 2 3 but have to remove them like 3 2 1.

If i try to remove the markers in random order, the first one is removed, but then the others just stop working, the listener still works, but it seems like the forloop doesnt find the other markers in the array.

Any ideas? I'm completely lost.

Here is the code:

 var map;
    var tempLatLng;
    var zoomLevel;
    var markers = [];
    var zoomLevels = [];
    var count = -1;
    var nullLatlng = new google.maps.LatLng(84.52,45.16);
    var nullMarker = new google.maps.Marker({
    position: nullLatLng, 
    });

    function initialize() {
    var myLatlng = new google.maps.LatLng(55.605629745598904,13.000441789627075);
    var myOptions = {
    zoom: 17,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel:false
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


    //Puts a listener on the map, when clicking on the map, it places a marker.
    google.maps.event.addListener(map, 'click', function(event) {
    zoomLevel = map.getZoom();
    document.getElementById("zoom").value = zoomLevel;
    tempLatLng = event.latLng;
    setTimeout("placeMarker(tempLatLng)", 800);     //placeMarker is called with a duration so that                                                         //doubleclicking doesn't bother the placement.
    });

    }
    //Function to place markers.
    function placeMarker(location) {
    if(zoomLevel == map.getZoom()){
        if(true){
            var marker1 = new google.maps.Marker({
                position: location, 
                map: map,
                draggable:true
            });
            count = count + 1;
            markers[count] = marker1;
            document.getElementById("count").value = count;

            google.maps.event.addListener(marker1,'rightclick', function(event){
                document.getElementById("test2").value = "funkar";
                for(var i = 0 ;i < markers.length ;i++){
                    if(markers[i].getTitle() == marker1.getTitle()){
                        marker1.setMap(null);
                        document.getElementById("markerpos").value = markers[i].getTitle();
                        document.getElementById("test1").value = markers[i].getTitle();
                        count = count - 1;
                        document.getElementById("count").value = count;
                        markers[i] = nullMarker;
                    }
                }

            });

            marker1.setTitle(location.toString());

        }
        map.setCenter(location);
    }
}

---

Here is the JSFiddle Demo:

Basically, you were using var count to keep track of the number of markers. You can do markers.length for that. Instead of using markers[count] you can use native array's push method to add element into the array. To remove use splice(i, 1); where i is the element's position and remove 1 element from that position. Also, to check if two markers are equal or the "same" instead using getTitle() use === which does:

is exactly equal to (value and type)

The problem is if you create two or more markers on the same position it would remove both markers but in reality you only remove one of the two "clones" and thus leaving a marker un-removable. This is caused by using getTitle which returns lat lng and if you have two markers w/ same lat lng you have an issue. Also, i changed, within your onclick function, marker1 to this which are referring to the same object for readability.

//Function to place markers.
function placeMarker(location) {
    if (zoomLevel == map.getZoom()) {
        if (true) {
            var marker1 = new google.maps.Marker({
                position: location,
                map: map,
                draggable: true
            });
            count = count + 1;
            markers.push(marker1);
            document.getElementById("count").value = markers.length;

            google.maps.event.addListener(marker1, 'rightclick', function(event) {
                document.getElementById("test2").value = "funkar";
                for (var i = 0; i < markers.length; i++) {
                    if (markers[i] === this) {
                        this.setMap(null);
                        document.getElementById("markerpos").value = markers[i].getTitle();
                        document.getElementById("test1").value = markers[i].getTitle();
                        markers.splice(i, 1);
                        document.getElementById("count").value = markers.length;
                    }
                }

            });

            marker1.setTitle(location.toString());

        }
        map.setCenter(location);
    }
}