After the data collection part 1 we now want to display the collected data on a map. We use the google maps API to do so.
You need to have an API key for it, which you get at http://code.google.com/apis/maps/signup.html.Quick reminder what we have done in part 1. We scraped the data from MobileMe Find My iPhone and saved it into a MySQL database every five minutes. Now we will query this database to get the latest location and display it on a google map.
<?PHP // You'll need to enter your own Google Maps API key // Get one from here: http://code.google.com/apis/maps/signup.html $google_maps_key = 'YOUR_GOOGLE_MAPS_API_KEY'; // Enter your MySQL username and password $db = mysql_connect('MYSQL_HOST', 'MYSQL_USER', 'MYSQL_PASS'); mysql_select_db('MYSQL_DBNAME', $db) or die(mysql_error()); // Get all different users $users = array(); $query = "SELECT DISTINCT user FROM history WHERE user = 'MY_USERNAME'"; $result = mysql_query($query, $db) or die(mysql_error()); while ($row = mysql_fetch_assoc($result)) { $query = "SELECT * FROM history WHERE user = '".$row['user']."' ORDER BY `dt` DESC LIMIT 1"; $result2 = mysql_query($query, $db) or die(mysql_error()); $row2 = mysql_fetch_assoc($result2) or die(mysql_error()); $users[$row['user']] = array ('latitude' => $row2['lat'], 'longitude' => $row2['lng'], 'time' => $row2['dt'] ); mysql_free_result($result2); } mysql_free_result($result); mysql_close($db); ?> <!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Users</title> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css"> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/base/base-min.css"> <style type="text/css" media="screen"> p { text-align:left; } #map_canvas { width:960px; height:800px; border:1px solid #000; } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=<?PHP echo $google_maps_key; ?>&sensor=false" type="text/javascript"></script> <script type="text/javascript"> function initialize() { function zoomFit() { newzoom = map.getBoundsZoomLevel(bounds); newcenter = bounds.getCenter(); if ( newzoom > 17 ) map.setCenter(newcenter, 17); else map.setCenter(newcenter, newzoom); } function createMarker(point, msg) { bounds.extend(point); var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { map.openInfoWindowHtml(point, msg); }); zoomFit(); return marker; } if (GBrowserIsCompatible()) { var bounds = new GLatLngBounds(); var map = new GMap2(document.getElementById("map_canvas"),8); map.setUIToDefault(); //map.setMapType(G_HYBRID_MAP); <?PHP foreach ($users AS $user => $loc ) { echo ' var point = new GLatLng('.$loc['latitude'].', '.$loc['longitude'].'); map.addOverlay(createMarker(point, "'.$user.'"));'; } ?> } } </script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="map_canvas"></div> </form> <p> <?PHP foreach ($users AS $user => $loc ) { echo ' ['.$loc['time'].'] @ '.$loc['latitude'].', '.$loc['longitude'].' '.$user.'<br/>'; } ?> </p> </body> </html>
So we have a display of the latest position on a map. Next part (3) will deal with getting data into google earth.
Great piece of work. Am trying to implement this, but notice that Google no longer provide API keys, and seem to have an open service for this. Will this code still work?
You can basically use the code and look up the mapping data with openstreetmap too.
Thanks Brandy, I managed to get this working without needing to provide an API, but now I get the map to load, and it immediately refreshes, and instead displays the lat/long etc data only, as text. Am I missing something?
Also, is there a third part for this? in terms of plotting the history?
thanks and keep up the great work!