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