Removing google mail markers with jquery after getting them from xml
- by sebastian
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
