I am writing a web application that makes use of the google maps API and a MySQL database to store coordinates for different positions on the map. These coordinates are constantly being updated by a different application for the map to make use of.
The map page cannot be refreshed, so I have a php script running in the background to fetch new coordinates and write them into a javascript function that runs on a loop. However, the php script seems to fetch the exact same data from the database, even after it's been removed or edited!
Are databases cached in some way automatically so that changes are only noticed when a page is refreshed?
My code is below, for the index page (map page) and the php script.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mapper</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var firstLoop = true;
var map;
var beachMarker;
function initialize()
{
mapLoop();
}
function reloadMap()
{
<?php
require("mapper.php");
$mapperClass = new Mapper();
$latLonArray = $mapperClass->reMap();
?>
// Set the latitude and longitude
lat = <?php echo $latLonArray[1]; ?>;
lon = <?php echo $latLonArray[2]; ?>;
if(firstLoop)
{
// Set the map options
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(lat, lon),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Add the map to the page
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Create the maker
var image = "aircraft.png";
var myLatLng = new google.maps.LatLng(lat, lon);
beachMarker = new google.maps.Marker({position: myLatLng, map: map, icon: image});
// Stop the entire map from reloading
firstLoop = false;
}
// Update the pin and map center
var newLatLng = new google.maps.LatLng(lat, lon);
beachMarker.setPosition(newLatLng);
map.setCenter(newLatLng);
}
function mapLoop()
{
// Reload the map
reloadMap();
// Recall the method
setTimeout("mapLoop()", 5000);
}
</script>
</head>
<body onload = "javascript:initialize();">
<div id="map_canvas"></div>
</body>
</html>
<?php
class Mapper
{
public function reMap()
{
$id; // The data id
$lat; // Current latitude
$lon; // Current longitude
$selectQuery = "SELECT * FROM `movingmap`.`data` LIMIT 0,1;"; // Selectes the first data item in the database
$deleteQuery = "DELETE FROM `movingmap`.`data` WHERE `data`.`ID` = "; // Removes the first data item in the database
// Connect to the mysql database
$link = mysql_connect('localhost', 'root', '');
// Execute the query
$result = mysql_query($selectQuery);
// Fetch the data from the row
$row = mysql_fetch_row($result);
$id = $row[0];
$lat = $row[1];
$lon = $row[2];
// Add the ID to the query and execute it
$deleteQuery = "$deleteQuery$id;";
mysql_query($deleteQuery);
// Clean up
mysql_close($link);
return array($id, $lat, $lon);
}
}
?>
Many thanks,
Steve