Map Example

Map Example

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 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.

    // You'll need to enter your own Google Maps API key
    // Get one from here:
    $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'] );


<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
<html xmlns="">
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="">
    <link rel="stylesheet" type="text/css" href="">
    <style type="text/css" media="screen">
        p { text-align:left; }
        #map_canvas { width:960px; height:800px; border:1px solid #000; }
    <script src="<?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);
                  map.setCenter(newcenter, newzoom);

            function createMarker(point, msg) {
                var marker = new GMarker(point);
                GEvent.addListener(marker, "click", function() {
                    map.openInfoWindowHtml(point, msg);
                return marker;

            if (GBrowserIsCompatible()) {
                var bounds = new GLatLngBounds();

                var map = new GMap2(document.getElementById("map_canvas"),8);
  foreach ($users AS $user => $loc ) {
echo '                var point = new GLatLng('.$loc['latitude'].', '.$loc['longitude'].');
                map.addOverlay(createMarker(point, "'.$user.'"));';
<body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas"></div>
  foreach ($users AS $user => $loc ) {
echo '  ['.$loc['time'].'] @ '.$loc['latitude'].', '.$loc['longitude'].' '.$user.'<br/>';

So we have a display of the latest position on a map. Next part (3) will deal with getting data into google earth.