CODEWITHSUNDEEP
javascriptphpgoogle-mapsgoogle-maps-markers
Md. G. Rabbany
Md. G. Rabbany

Reputation: 121

how to update google map marker with change in database

i am working on tracking a vehicle. I am trying to update my map marker when i do change in my database. I do the following code that show marker but i need it to update while change the location value in MYSQL database My code is here 

<?php 
include('connect.php');
if(!isset($_POST['bus_select'])){
header('Location: index.php');
exit;
}
?> 
<!DOCTYPE html>
<html>
<head>
<title>JU Bus Google Map</title>
<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCzr1ZAuglRaD5BQA2u03fWftMB7RkOzxE&sensor=false"></script>
<?php
//for important date page
    function value_return($query){

    $result= mysql_query($query);
    $value=mysql_result($result,0);
    return $value;

    }


    $lat= value_return('SELECT `lat` FROM `bus` WHERE `bus_id`='.$_POST['bus_select']);
        $long= value_return('SELECT `long` FROM `bus` WHERE `bus_id`='.$_POST['bus_select']);
        $detail= value_return('SELECT `bus_details` FROM `bus` WHERE `bus_id`='.$_POST['bus_select']);
        $last_updated= value_return('SELECT `last_update` FROM `bus` WHERE `bus_id`='.$_POST['bus_select']);
print '
<script>
var myCenter=new google.maps.LatLng('.$lat.','.$long.');
var marker;

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:15,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

marker=new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
  });

marker.setMap(map);

var infowindow = new google.maps.InfoWindow({
  content:"'.$detail.'<br>Last Updated: '.$last_updated.'"
  });

infowindow.open(map,marker);


}

google.maps.event.addDomListener(window, "load", initialize);
</script>';
?>
</head>

<body>
<div id="googleMap" ></div>
</body>
</html>

Upvotes: 1

Views: 748

Answers (1)

DanielJones
DanielJones

Reputation: 11

You need to requery the database - usually done with AJAX...here is a tutorial example. After that you simply call marker.setPosition(YOUR-NEW-LATLNG)

Upvotes: 1

Related Questions