Hi, Has anyone tried the article ' google maps with php mysql' and tried to update the xml file and the map,
can any one tell me how to update the map marker postions reading the updated xml file.
this is my js file.
---------------------------------------------------------------------------------------------------------------------------
var customIcons = {
restaurant: {
icon:'
http://labs.google.com/ridefinder/images/mm_20_red.png',
//icon: '
http://localhost/test/tanker.jpg',
shadow: '
http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: '
http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: '
http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
//var intervalID = setInterval(load, 5000);
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(6.9413,79.82),
zoom: 14,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml3.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var mmsi = markers[i].getAttribute("mmsi");
var lat = markers[i].getAttribute("lat");
var lng = markers[i].getAttribute("lng");
var type = "bar";//markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b> MMSI: " + mmsi + "</b> <br/> Latitude: " + lat+"<br/> Longitude: "+lng+"<br/>";
//alert(html);
var icon = customIcons[type] || {};
//var icon = customIcons[bar] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
//load anothor function to update data repeatedly
setInterval(repeat,5000);
//load ends here
}
function repeat(){
/////////////////////////////////I added this function to update the map///////////////////////////////
//////////////////take from xml file/////////////
downloadUrl("phpsqlajax_genxml3.php?var=5", function(data) {
////////////////
//problem is above php file is the same on which were there when i first loaded the page it sticks in memory and wont change so the markers are not updated. this is my problem, var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var mmsi = markers[i].getAttribute("mmsi");
var lat = markers[i].getAttribute("lat");
var lng = markers[i].getAttribute("lng");
var type = "bar";//markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b> MMSI: " + mmsi + "</b> <br/> Latitude: " + lat+"<br/> Longitude: "+lng+"<br/>";
//alert(html);
var icon = customIcons[type] || {};
//var icon = customIcons[bar] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
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() {}
//another function to