Hi, am trying to update google map markers without refreshing the map page. I used an ajax to refresh the php part of the code, hoping it will couse the markers to move,but no,lol.
From what i found out online i need some kind of respond command for it to work. i will be glad if any one can help me out, thanks...
Here is my map script
<html>
<head>
<script type='text/javascript' src='jquery-1.6.2.min.js'></script>
<script type='text/javascript' src='jquery-ui-1.8.14.custom.min.js'></script>
<style>
BODY {font-family : Verdana,Arial,Helvetica,sans-serif; color: #000000; font-size : 13px ; }
#map_canvas { width:100%; height: 100%; z-index: 0; }
</style>
<script type="text/javascript">
// (function newjobs() {
// var inputjob = $.ajax({
// url: "sample.php"
// });
// inputjob.done(function(data) {
// alert('loading current locations !');
// setTimeout(newjobs, 10000); // recursion
// });
// inputjob.fail(function() {
// alert('current not location loaded');
// });
// })();
setInterval(function(){
$.get('ajax_gp.php', function(data){
$('#div').html(data);
//alert('loading current locations !');
});
},10000);
</script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false" /></script>
<script type='text/javascript'>
jQuery(document).ready( function($){
//Get data, and replace it on the form
var geocoder;
var map;
var markersArray = [];
var infos = [];
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var bounds = new google.maps.LatLngBounds();
var encodedString;
var stringArray = [];
encodedString = document.getElementById("encodedString").value;
stringArray = encodedString.split("****");
var x;
for (x = 0; x < stringArray.length; x = x + 1)
{
var addressDetails = [];
var marker;
addressDetails = stringArray[x].split("&&&");
var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]);
//alert(image + " " + addressDetails[1] );
marker = new google.maps.Marker({
map: map,
position: lat,
content: addressDetails[0]
});
markersArray.push(marker);
google.maps.event.addListener( marker, 'click', function () {
closeInfos();
var info = new google.maps.InfoWindow({content: this.content});
// where I have added .html to the marker object.
//infowindow.setContent( marker.html);
info.open(map,this);
infos[0]=info;
});
bounds.extend(lat);
}
map.fitBounds(bounds);
function closeInfos(){
if(infos.length > 0){
infos[0].set("marker",null);
infos[0].close();
infos.length = 0;
}
}
});
</script>
</head>
<body>
<div id='input'>
<?php
//Now we do a simple query to the database
function dec($dec)
{
$dir=substr($dec, -1);
$deg=substr($dec, 0, 2);
$mins=substr($dec, 2);
$min = $mins / 60;
$map=$deg+$min;
if ($dir == "S" || $dir == "W") {
$map = "-".$map;
} // Don't do anything for N or E
return round($map, 7);
}
include_once("ajax_gp.php");
?>
<div id="div">
<input type="hidden" id="encodedString" name="encodedString" value="<?php echo $encodedString; ?>" />
</div> </div>
<div id="map_canvas"></div>
</body>
</html>
and am using this ajax to refresh
setInterval(function(){
$.get('ajax_gp.php', function(data){
$('#div').html(data);
//alert('loading current locations !');
});
},10000);
this server side code
<?php
$server = "localhost";
$username = "root";
$database = "";
$password = "";
$conn = mysql_connect($server,$username,$password);
mysql_select_db($database) or die("Unable to select database");
//Connect to the MySQL database that is holding your data, replace the x's with your data
mysql_connect("localhost", "root", "") or
die("Could not connect: " . mysql_error());
mysql_select_db("msl");
//Initialize your first couple variables
$encodedString = ""; //This is the string that will hold all your location data
$x = 0; //This is a trigger to keep the string tidy
//Now we do a simple query to the database
$result = mysql_query("SELECT * FROM live_data");
//Multiple rows are returned
while ($row = mysql_fetch_array($result, MYSQL_NUM))
{
//This is to keep an empty first or last line from forming, when the string is split
if ( $x == 0 )
{
$separator = "";
}
else
{
//Each row in the database is separated in the string by four *'s
$separator = "****";
}
//Saving to the String, each variable is separated by three &'s
$encodedString = $encodedString.$separator.
"<p class='content'><b>Lat:</b> ".dec($row[2]).
"<br><b>Long:</b> ".dec($row[3]).
"<br><b>Name: </b>".$row[1].
"<br><b>Address: </b>"."ddd".
"<br><b>Division: </b>"."ddd".
"</p>&&&".dec($row[2])."&&&".dec($row[3]);
$x = $x + 1;
}
?>
thanks for helping...