I want to refresh location in google maps in javascript automatically if variables latitude and longitude present in the database changes.
My code : It is working fine. But it shows a static map. I want to show current location in database and not a static location. I added a refresh button. But it is not an effective method. So help me to refresh location automatically. Thanks in advance.
//code starts here //javascript code is in last
locate_driver.php
$did = $_POST[did];
$cid = $_POST[cid];
$con=mysqli_connect("mysql4.000webhost.com","username","password","database_name");
if (mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
if($cid==null)
{
$sql = "SELECT busno, latitude, longitude, noofpassengers FROM schedule where did=$did";
$result = mysqli_query($con,$sql) or die(mysql_error());
while ($array = mysqli_fetch_array($result))
{
$busno=$array['busno'];
echo "
Bus No : ";
echo $busno; echo "
";
$lat = $array['latitude'];
echo "Latitude : ";
echo $lat; echo "
";
$long=$array['longitude'];
echo "Longitude : ";
echo $long; echo "
";
$nop=$array['noofpassengers'];
if($nop!=null)
{
echo " No of passengers : ";
echo $nop; echo "
";
}
else
{ echo "NA"; }
}
}
else
{
$sql = "SELECT busno, latitude, longitude, noofpassengers FROM schedule where cid=$cid";
$result = mysqli_query($con,$sql) or die(mysql_error());
while ($array = mysqli_fetch_array($result))
{
$busno=$array['busno'];
echo " Bus No : ";
echo $busno; echo "
";
$lat = $array['latitude'];
echo "Latitude : ";
echo $lat; echo "
";
$long=$array['longitude'];
echo "Longitude : ";
echo $long; echo "
";
$nop=$array['noofpassengers'];
echo " No of passengers : ";
echo $nop; echo "
";
}
}
?>
<html>
<body onload="sp()">
<form action="locate_driver.php" method="POST">
<input type="hidden" name="did" value="">
<input type="hidden" name="cid" value="">
<input type="submit" value="Refresh">
</form>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x = document.getElementById("demo");
function sp() {
lat = ;
lon = ;
latlon = new google.maps.LatLng(lat, lon)
mapholder = document.getElementById('mapholder')
mapholder.style.height = '320px';
mapholder.style.width = '270px';
var myOptions = {
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
}
var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
var marker = new google.maps.Marker({position:latlon,map:map,title:"Bus is here!"});
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
Submit an article or tip