Auto refresh the position of marker on google map
6,315 views
Skip to first unread message
vincent198471
Mar 8, 2011, 12:04:08 PM3/8/11
to Google Maps JavaScript API v3
Hello everyone. I am recently developping a web application based on
google map. My plan is to retrieve aircraft lat/lon from mysql
database via php and display on google map. I follow the article
http://code.google.com/apis/maps/articles/phpsqlajax_v3.html and it
works fine. My question is how to update the marker position without
reloading the all page. I try to setTimeout, but it doesnot work.
The following is my javascript:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
//<![CDATA[
// Creating a aircraftIcon
var aircraftIcon = new google.maps.MarkerImage('img/
Airport.png',null,null,null,new google.maps.Size(30,30));
function initialize() {
var latlng = new google.maps.LatLng(53.33, 9.59);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map_canvas"),
myOptions);
downloadUrl("phpsqlajax_genxml.php",function(data){
var xml = data.responseXML;
var aircraft =
xml.documentElement.getElementsByTagName("Aircraft");
for(var i=0;i<aircraft.length;i++)
{
var ICAO = aircraft[i].getAttribute("ICAO");
var point = new
google.maps.LatLng(parseFloat(aircraft[i].getAttribute("latitude")),parseFloat(aircraft[i].getAttribute("longtitude")));
var marker = new google.maps.Marker({
map:map,
position:point,
icon: aircraftIcon
});
}
});
}
// load the xml file into the page, XMLHttpRequest is used to
retrieve a file that reside on the same domain as the requesting
webpage
// url specifies the path to either your xml file or the PHP script
that generates the file
function downloadUrl(url,callback)
{
var request = window.ActiveXObject ? new
ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
request.onreadystatechange = function(){
if(request.readyState==4){
callback(request,request.status);
}
};
request.open('GET',url,true);
request.send(null);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
google map. My plan is to retrieve aircraft lat/lon from mysql
database via php and display on google map. I follow the article
http://code.google.com/apis/maps/articles/phpsqlajax_v3.html and it
works fine. My question is how to update the marker position without
reloading the all page. I try to setTimeout, but it doesnot work.
The following is my javascript:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
//<![CDATA[
// Creating a aircraftIcon
var aircraftIcon = new google.maps.MarkerImage('img/
Airport.png',null,null,null,new google.maps.Size(30,30));
function initialize() {
var latlng = new google.maps.LatLng(53.33, 9.59);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map_canvas"),
myOptions);
downloadUrl("phpsqlajax_genxml.php",function(data){
var xml = data.responseXML;
var aircraft =
xml.documentElement.getElementsByTagName("Aircraft");
for(var i=0;i<aircraft.length;i++)
{
var ICAO = aircraft[i].getAttribute("ICAO");
var point = new
google.maps.LatLng(parseFloat(aircraft[i].getAttribute("latitude")),parseFloat(aircraft[i].getAttribute("longtitude")));
var marker = new google.maps.Marker({
map:map,
position:point,
icon: aircraftIcon
});
}
});
}
// load the xml file into the page, XMLHttpRequest is used to
retrieve a file that reside on the same domain as the requesting
webpage
// url specifies the path to either your xml file or the PHP script
that generates the file
function downloadUrl(url,callback)
{
var request = window.ActiveXObject ? new
ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
request.onreadystatechange = function(){
if(request.readyState==4){
callback(request,request.status);
}
};
request.open('GET',url,true);
request.send(null);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Esa
Mar 8, 2011, 2:27:31 PM3/8/11
to Google Maps JavaScript API v3
> I try to setTimeout, but it doesnot work.
Sure setTimeout() works. However setInterval() is more suitable for
the purpose.
Without seeing your page, I quess that you have a browser cache
problem. You cannot see the updated file on map because the file comes
from browser cache. The common workaround is to change the filename
with a random parameter.
setInterval(function(){
var random = "?=" + (new Date()).getTime();
downloadUrl("phpsqlajax_genxml.php" + random, function(data){ ...
}, 10000);
vincent198471
Mar 8, 2011, 2:53:22 PM3/8/11
to Google Maps JavaScript API v3
Is that what you mean?
setInterval(function(){
var random ="?="+(new Date()).getTime();
downloadUrl("phpsqlajax_genxml.php"+random,function(data){
var random ="?="+(new Date()).getTime();
downloadUrl("phpsqlajax_genxml.php"+random,function(data){
var xml = data.responseXML;
var aircraft =
xml.documentElement.getElementsByTagName("Aircraft");
for(var i=0;i<aircraft.length;i++)
{
var ICAO = aircraft[i].getAttribute("ICAO");
var point = new
google.maps.LatLng(parseFloat(aircraft[i].getAttribute("latitude")),parseFloat(aircraft[i].getAttribute("longtitude")));
var marker = new google.maps.Marker({
map:map,
position:point,
icon: aircraftIcon
});
}
})},10000);
var aircraft =
xml.documentElement.getElementsByTagName("Aircraft");
for(var i=0;i<aircraft.length;i++)
{
var ICAO = aircraft[i].getAttribute("ICAO");
var point = new
google.maps.LatLng(parseFloat(aircraft[i].getAttribute("latitude")),parseFloat(aircraft[i].getAttribute("longtitude")));
var marker = new google.maps.Marker({
map:map,
position:point,
icon: aircraftIcon
});
}
vincent198471
Mar 9, 2011, 4:55:51 AM3/9/11
to Google Maps JavaScript API v3
I test this code. It works. However, the map also generates a lot of
redundant old markers, which cause the google map to suspend. My
question is how to remove the old marker position when the php file
is called
redundant old markers, which cause the google map to suspend. My
question is how to remove the old marker position when the php file
is called
Rossko
Mar 9, 2011, 6:16:15 AM3/9/11
to Google Maps JavaScript API v3
> I test this code. It works. However, the map also generates a lot of
> redundant old markers, which cause the google map to suspend. My
> question is how to remove the old marker position when the php file
> is called
Keep a reference to markers when you place them - usually that is done
> redundant old markers, which cause the google map to suspend. My
> question is how to remove the old marker position when the php file
> is called
by pushing them onto an array.
Before adding new markers, cycle through your array and remove old
ones from the map. Don't forget to clear the array so that it doesn't
keep growing.
You can be more efficient by re-using the markers in your array,
repositioning them, and only adding odd ones if the total number
changes.
Reply all
Reply to author
Forward
0 new messages