Removing google mail markers with jquery after getting them from xml

Question

Hi there,

I'm trying to create a page that contains a google map. The map is filled with markers from an xml file. I just can't figure out how to remove "old" markers, that don't match the latest user input. At the moment my js stops after the very first xml item.

The clearList.push(marker); is supposed to put the generated marker away for later usage. When the user hits the search button I want all markers to be gone and use clearMarkers();.

Maybe someone here can help Sebastian

Here is my JavaScript:

$(document).ready(function() {
  $("#map").css({height: 650});
    var clearList = [];
    var myLatLng = new google.maps.LatLng(52.518143, 13.372879);
    MYMAP.init('#map', myLatLng, 11);

  $("#showmarkers").click(function(e){
            clearMarkers();
        MYMAP.placeMarkers('markers.xml');

  });

});

function clearMarkers() {
    $(clearList).each(function () {
         this.setmap(null);
    });
    clearList = [];
}



var MYMAP = {
    map: null,
    bounds: null
    }

MYMAP.init = function(selector, latLng, zoom) {
    var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.HYBRID
    }
    this.map    =   new google.maps.Map($(selector)[0], myOptions);
    this.bounds =   new google.maps.LatLngBounds();
    }

MYMAP.placeMarkers = function(filename) {
    $.get(filename, function(xml){  
        $(xml).find("marker").each(function(){
            // read values from xml for searching

            var platzart =  $(this).find('platzart').text();
            var ort      =  $(this).find('ort').text();
            var open     =  $(this).find('open').text();

            if (platzart    =="Kunstrasen"  && $('#kunstrasen').attr('checked')
                || platzart =="Rasen"       && $('#rasen').attr('checked') 
                || platzart =="Tartan"      && $('#tartan').attr('checked')
                || platzart =="Boltzplatz"  && $('#boltzplatz').attr('checked')
                ){

            // read values from xml for additional info
            var name    =   $(this).find('name').text();
            var plz     =   $(this).find('plz').text();
            var note    =   $(this).find('note').text();
            var adress  =   $(this).find('adress').text();

            // create a new LatLng point for the marker
            var lat     =   $(this).find('lat').text();
            var lng     =   $(this).find('lng').text();
            var point   =   new google.maps.LatLng(parseFloat(lat),parseFloat(lng));

            // extend the bounds to include the new point
            MYMAP.bounds.extend(point);

            // create new marker
            var marker = new google.maps.Marker({
                position: point,
                map: MYMAP.map
            });
            clearList.push(marker);

            // add onclick overlay
            var infoWindow = new google.maps.InfoWindow();
            var html='<strong>'+name+'</strong.><br />'+platzart;
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(html);
                infoWindow.open(MYMAP.map, marker);
            });
            }
            MYMAP.map.fitBounds(MYMAP.bounds);
        });
    });
}

Thanks in advance

Answer 1

Looks like you have a typo:

function clearMarkers() {
    $(clearList).each(function () {
         this.setmap(null);
    });
    clearList = [];
}

should be:

function clearMarkers() {
    $(clearList).each(function () {
         this.setMap(null);
    });
    clearList = [];
}

this.setmap should be this.setMap.