Delete old map markers and load new ones?
- by pufAmuf
I'm trying to delete the old markers and load new ones.
Here is the code I have that loads certain markers on page load - no issues here:
(function() {
var customIcons = {
1: {
icon: 'redmarker.png',
shadow: 'markershadow.png'
},
2: {
icon: 'purplemarker.png',
shadow: 'markershadow.png'
},
3: {
icon: 'silvermarker.png',
shadow: 'markershadow.png'
},
4: {
icon: 'goldmarker.png',
shadow: 'markershadow.png'
}
};
window.onload = function(){
var MY_MAPTYPE_ID = 'custom';
var stylez = [ { "stylers": [ { "hue": "#00ccff" }, { "saturation": -100 }, { "lightness": 5 } ] },{ } ];
var latlng = new google.maps.LatLng(10, 10);
var options = {
zoom: 16,
center: latlng,
panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeControlOptions: {
mapTypeIds: [MY_MAPTYPE_ID,google.maps.MapTypeId.SATELLITE]
},
mapTypeId: MY_MAPTYPE_ID
};
var map = new google.maps.Map(document.getElementById('map'), options);
var styledMapOptions = {
name: 'Map'
};
var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("getxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("id");
var address = markers[i].getAttribute("id");
var type = markers[i].getAttribute("venue_type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
//BUTTON SWITCHING ////////////////////////////////////////////////////////////
//BUTTON SWITCHING ////////////////////////////////////////////////////////////
//BUTTON SWITCHING ////////////////////////////////////////////////////////////
//BUTTON SWITCHING ////////////////////////////////////////////////////////////
//BUTTON SWITCHING ////////////////////////////////////////////////////////////
//BUTTON SWITCHING ////////////////////////////////////////////////////////////
//BUTTON SWITCHING ////////////////////////////////////////////////////////////
jQuery(document).delegate(".topCanBeActive", "click", function( e ) {
e.preventDefault();
jQuery(".topCanBeActive").removeClass("topActive");
jQuery(this).addClass("topActive");
switch( this.id ){
case 'all_activity_button':
alert("search");
break;
case 'events_button':
downloadUrl("getxml2.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("id");
var address = markers[i].getAttribute("id");
var type = markers[i].getAttribute("venue_type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
break;
case 'venues_button':
alert("venues");
break;
case 'search_button':
alert("search");
break;
}
});
//END ////////////////////////////////////////////////////////////
//END ////////////////////////////////////////////////////////////
//END ////////////////////////////////////////////////////////////
//END ////////////////////////////////////////////////////////////
//END ////////////////////////////////////////////////////////////
//END ////////////////////////////////////////////////////////////
//END ////////////////////////////////////////////////////////////
//END ////////////////////////////////////////////////////////////
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
})();
Now, I created a button section where if you press one button, a different xml file is loaded. Notice the section with the ////////////////////// However, upon clicking the button, nothing happens. The xml file itself is okay and loads the desired data. I also receive no errors in firebug.
Any ideas why this happens?
Thanks!
