1 / 49

Google Maps Mashups

Google Maps Mashups. By Virender Ajmani (Software Developer - Compuware). Outline. About Me History of Google Maps The Beginnings ( When I started Mapping ) Google Maps Mashups - What is it? How do you create a Google Maps Mashup Latitude/Longitude Examples of Different Kinds of Mashup

quon-hubbard
Download Presentation

Google Maps Mashups

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Google Maps Mashups By Virender Ajmani (Software Developer - Compuware)

  2. Outline • About Me • History of Google Maps • The Beginnings (When I started Mapping) • Google Maps Mashups - What is it? • How do you create a Google Maps Mashup • Latitude/Longitude • Examples of Different Kinds of Mashup • Recapping – Data Sources • Google Developer Certified in Maps API • Google Maps Mashup Resources

  3. About Me (My Journey) • About Me

  4. History of Google Maps • In February 2005 Google Maps goes Live. • Directions • See nearby locations by clicking and dragging the map.  • No wait for a new map image to load • No Satellite view. • In April 2005 Satellite View was added • In June 2005 Maps API was released.

  5. The Beginnings (When I started Mapping) • It started during the Hurricane Season in 2005 • Hurricane Katrina • googlemapsmania.blogspot.com

  6. Google Maps Mashup - What is it? • In web development, a mashup is a web page or application that combines data or functionality from two or more external sources to create a new service  • (source:http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)) • ------ • Mash Up” originally referred to the practice in pop music (notably hip-hop) of producing a new song by mixing two or more existing pieces. • (source: http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid))

  7. Google Maps Mashup – Prerequisites! • HTML • JavaScript • Server Side Scripting • php

  8. Creating Google Maps Mashup <!DOCTYPE html><html><head><style type="text/css">  html { height: 100% }  body { height: 100%; margin: 0px; padding: 0px }  #map_canvas { height: 100% }</style><script type="text/javascript"    src="http://maps.google.com/maps/api/js?sensor=false"></script>

  9. Creating Google Maps Mashup <script type="text/javascript">  function initialize() {    var latlng = new google.maps.LatLng(-34.397, 150.644);    var myOptions = {      zoom: 8,      center: latlng,      mapTypeId: google.maps.MapTypeId.ROADMAP};    var map = new google.maps.Map(document.getElementById("map_canvas"),        myOptions);  }</script></head><body onload="initialize()">  <div id="map_canvas" style="width:100%; height:100%"></div></body></html> (link)

  10. Creating Google Maps Mashup (Adding Markers) var marker = new google.maps.Marker({      position: latlng,       map: map,       title:"Hello World!"  });   (link)

  11. Creating Google Maps Mashup (Adding InfoWindow) var contentString = "<b>Hello World</b>";var infowindow = new google.maps.InfoWindow({content: contentString});google.maps.event.addListener(marker, 'click',function() {infowindow.open(map,marker);}); (link)

  12. Latitude/Longitude • Where to place a marker? • You need to know Latitude/Longitude • Latitude/Longitude Sources: • Wikipedia (link) (Detroit) • Google Maps (link) (eg: Campus Martius, det) • Bulk Loading (100's of rows in MySql database) • example php script here (link)

  13. Examples of Google Maps Mashup • All Data in HTML file • New 7 wonders of the world (link) • var name = new Array("India's Taj Mahal","Great Wall of China","Petra in Jordan","Brazil's statue of Christ the Redeemer","Peru's Machu Picchu","Mexico's Chichen Itza pyramid","The Colosseum in Rome");

  14. Examples of Google Maps Mashup (contd.) • All Data in HTML file • New 7 wonders of the world (link) • var points = new Array(new GLatLng(27.174961,78.042385),new GLatLng(40.334245,116.477652),new GLatLng(30.328611,35.441944),new GLatLng(-22.951389,-43.2108334),new GLatLng(-13.163056,-72.545556),new GLatLng(20.682778,-88.569167),new GLatLng(41.890169,12.492269));

  15. Examples of Google Maps Mashup (contd.) • All Data in HTML file • New 7 wonders of the world (link) • var youtube = new Array("ZblinvBE1VI","Hz8ErMx6QZU","VAXu4ODpqmk","TD6Dc--Cec8","6jJW7aSNCzU","wjOyi2IQKSI","1ycODdZkRpQ");

  16. Examples of Google Maps Mashup (contd) • Data in MySQL Database • Top High Schools in USA (link) • Journalists killed in line of duty (link) • Mapping World's Happiest Countries (link)

  17. Examples of Google Maps Mashup (contd) • How do you retrieve data from the database • <?php • header("Content-type: text/xml; charset=utf-8"); • // Connecting, selecting database • $link = mysql_connect("servername", "uid", "passwd") •    or die('Could not connect: ' . mysql_error()); • mysql_select_db('database_name') or die('Could not select database');

  18. Examples of Google Maps Mashup (contd) • // Performing SQL query •     $query = 'SELECT * FROM journalistskilled ORDER BY  `yrkilled` DESC,`mokilled` DESC,`daykilled` DESC'; • $result = mysql_query($query) or die('Query failed: ' . mysql_error()); • $queryoutput = "";

  19. Examples of Google Maps Mashup (contd) • if ($result)  • {  •   //output the xml  •  $queryoutput = "<?xml version='1.0' standalone='yes'?>\n";  •  $queryoutput = $queryoutput."<markers>\n"; •  $numRows = mysql_num_rows ($result);  •   print mysql_error();

  20. Examples of Google Maps Mashup (contd) •  for ($i = 0; $i< $numRows; $i++)  •  {  •    //Loops through the results of the query and outputs the xml  •    $row = mysql_fetch_row ($result);  •    $queryoutput = $queryoutput."<item>          <jname>$row[0]</jname> <mediaoutlet>$row[1]</mediaoutlet>                                 <dtkilled>$row[2]</dtkilled> • <lockilled>$row[6]</lockilled> • <lat>$row[8]</lat> • <lng>$row[9]</lng> • <link>$row[10]</link> • <desc>$row[11]</desc></item>\n";  •  }

  21. Examples of Google Maps Mashup (contd) • $queryoutput = $queryoutput."</markers>\n";  • echo $queryoutput; • } • // Free resultset • mysql_free_result($result); • // Closing connection • mysql_close($link); • ?> •  }

  22. Examples of Google Maps Mashup (contd) • RSS Feeds • Upcoming Microsoft Events (link) • Data Source: • Microsoft Link • What is RSS Feed • new format of XML that is intended to share information in a condensed format (such as a title, description and link to a new article). They are good for syndication. .

  23. Examples of Google Maps Mashup (contd) • XMLHttpRequest • (Dom API inside the Web Browser to access data from from Web Server) • Problem • Browsers have security in place which prevents data access from remote domains • Solution • Write a proxy (php)

  24. Examples of Google Maps Mashup (contd) • RSS Feeds •  <?php  • header("Content-type: text/xml; charset=utf-8"); • $yNewsServer = "http://www.msdnevents.com/public/rss/msdnEvents.xml"; • $url = $yNewsServer; • $ch = curl_init();    // initialize curl handle • curl_setopt($ch, CURLOPT_URL,$url); // set url to post to • curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);// allow redirects • curl_setopt($ch, CURLOPT_RETURNTRANSFER,1); // return into a variable • curl_setopt($ch, CURLOPT_TIMEOUT, 30); // times out after 30s • curl_setopt($ch, CURLOPT_POST, 0); // set POST method • $result = curl_exec($ch); // run the whole process • curl_close($ch); • echo $result; • ?>

  25. Example of Google Maps Mashups (contd) • Local News Mashup (from Mibazaar.com) • Combines content from  • Google Maps • Yahoo Geocoding • Yahoo Traffic • Yahoo Weather • Yahoo Local • Google News • Demo (Link)

  26. Example of Google Maps Mashups (contd) • Local News Mashup (from Mibazaar.com) • Yahoo Geocoding • http://api.local.yahoo.com/MapsService/V1/geocode?appid=<app id>&zip=48226;

  27. Example of Google Maps Mashups (contd) • Local News Mashup (from Mibazaar.com) • Yahoo Traffic • http://api.local.yahoo.com/MapsService/V1/trafficData?appid=weshallrise&zip=48226&radius=5.0

  28. Example of Google Maps Mashups (contd) • Local News Mashup (from Mibazaar.com) • Yahoo Weather • http://xml.weather.yahoo.com/forecastrss?p=48170

  29. Example of Google Maps Mashups (contd) • Local News Mashup (from Mibazaar.com) • Yahoo Local • http://api.local.yahoo.com/LocalSearchService/V3/localSearch?appid=weshallrise&query=Indian+Restaurants&zip=48170&results=20&category=96926161

  30. Example of Google Maps Mashups (contd) • Local News Mashup (from Mibazaar.com) • Google News • http://news.google.com/news?hl=en&ned=us&q=detroit,mi&ie=UTF-8&output=rss

  31. Example of Google Maps Mashups (contd) • Earthquakes from around the world in last 24 hours • link • Data • http://earthquake.usgs.gov/earthquakes/catalogs/1day-M2.5.xml

  32. About Me • About Me and About Us pages are for most part Text based • Wanted to do something different • Google Maps Based About Me Page (Link) • Created a similar looking Obama life journey map (Link)

  33. Google Mapping - Tweets • Twitter exposes quite a bit of its data via API • Visit: • http://dev.twitter.com/doc • Example - Gaza Tweets (link)

  34. Google Mapping - Tweets (contd) • Web Services call to • http://search.twitter.com/search.atom • Parameters passed: • geocode • 35,51,1500mi - urlencoded • q • gaza+protests • lang • en • rpp • 50 • http://search.twitter.com/search.atom?geocode=35%2C51%2C1500mi&lang=en&q=".urlencode($sq)."&rpp=50";

  35. Google Mapping - Tweets (contd) • Twitter sends location information related to the tweet • location however is not geocoded • Another Web Service call is made to • Google GeoCoding API to retrieve Latitude/Longitude • <item><updated>2 hours ago</updated><content>Free Elliot Madison! Allow twitter for <b>protests</b> in USA, not just <b>Iran</b>! Set your avatar red &amp; black: <a href="http://twitterrevolution.us/">http://twitterrevolution.us/</a> <a href="http://search.twitter.com/search?q=%23fbifail">#fbifail</a></content><link>http://twitter.com/feintunes/statuses/5001657748</link><img>http://a1.twimg.com/profile_images/468973086/stella_sworking4U_normal.jpg</img><author>feintunes</author><loc>Tehran</loc></item>

  36. Google Mapping - Tweets (contd) • Tweets from within 1 mile radius of Microosft • Offices in Southfield, MI

  37. Google Mapping - YouTube • YouTube exposes quite a bit of its data via API • Visit: • http://code.google.com/apis/youtube/2.0/reference.html • Example -  • Gaza Conflict (link)

  38. Google Mapping - YouTube (contd) • Web Services call to • http://gdata.youtube.com/feeds/api/videos/-/-sex/-porn/-tourfactory/-columbine/-pushtube/News?q=israel+hamas+gaza&orderby=published&start-index=1&max-results=50&format=5&location= •  <item><yt>r-KH-QtH40Y</yt><updated>8 hours ago</updated><desc>Question on 08/09 Gaza War to Tony Blair at UB</desc><author>http://gdata.youtube.com/feeds/api/users/thshbl</author><lat>43.000125885009766</lat><lng>-78.78124237060547</lng></item>

  39. Google Mapping - Your Loc with Google Lat. • http://www.google.com/latitude • Location can be • Public • city level • accurate • Private • KML Feed • http://www.google.com/latitude/apps/badge/api?user=-3664738570931846584&type=atom

  40. Google Mapping - Your Loc with Google Lat. • <entry> <id>http://www.google.com/latitude/apps/badge/api?user=-3664738570931846584&amp;type=atom;-3664738570931846584</id> <author> <name>-3664738570931846584</name> </author> <title>Current Location</title> <updated>2010-10-09T07:11:24Z</updated> <summary>Current Location</summary> <georss:point>42.3787795 -83.526519</georss:point> <georss:radius>10</georss:radius> <georss:featurename>Plymouth Township, MI, USA</georss:featurename> </entry>

  41. Google Mapping - Your Loc with Google Lat. http://www.mibazaar.com/googlemyloc.html

  42. Google Mapping your Loc - Google Latitude • Careful with broadcasting your location • Ring around your house • If within 5 mile radius from home • Give a fake location

  43. Google Mapping your Loc - Google Latitude • function getRiemannDistance($lat_from, $long_from, $lat_to, $long_to){ •  /*** distance unit ***/ • $unit = "m"; •  switch ($unit): •  /*** miles ***/ •  case 'm': •     $unit = 3963; •     break; •  /*** nautical miles ***/ •  case 'n': •     $unit = 3444; •     break; •  default: •     /*** kilometers ***/ •     $unit = 6371; •  endswitch;

  44. Google Mapping your Loc - Google Latitude • function getRiemannDistance($lat_from, $long_from, $lat_to, $long_to){ •  /*** distance unit ***/ • $unit = "m"; •  switch ($unit): •  /*** miles ***/ •  case 'm': •     $unit = 3963; •     break; •  /*** nautical miles ***/ •  case 'n': •     $unit = 3444; •     break; •  default: •     /*** kilometers ***/ •     $unit = 6371; •  endswitch;

  45. Google Mapping your Loc - Google Latitude • /*** 1 degree = 0.017453292519943 radius ***/ •  $degreeRadius = deg2rad(1); •  /*** convert longitude and latitude to radians ***/ •  $lat_from  *= $degreeRadius; •  $long_from *= $degreeRadius; •  $lat_to    *= $degreeRadius; •  $long_to   *= $degreeRadius; •  /*** apply the Great Circle Distance Formula ***/ •  $dist = sin($lat_from) * sin($lat_to) + cos($lat_from) •  * cos($lat_to) * cos($long_from - $long_to); •  /*** radius of earth * arc cosine ***/ •  return ($unit * acos($dist)); • }

  46. Recapping - Data Sources: • Data embedded in HTML code • Latitude/Longitude Data • Data in the Information Window • MySQL  (can be SQL Server or Oracle..) • Server Side Scripting (PHP or ASP.NET or ..) • convert the the data to xml • send it to client (JavaScript) • XML file • RSS Feeds • Data resides in other domains • Make a webservice call to retrieve data • All modern web browsers impose a security restriction on network connections, which includes calls to XMLHttpRequest

  47. Google Developer Certified in Maps API • Register at: http://code.google.com/qualify/ • It is Free • There is max score of 5000 pts • 1000 points – show proof of your work (mashups) • 1000 points - community participation • 1000 points - provide references (from folks who paid you for your work) • 2000 points - online exam on Maps API v3 • You need a score of 3000 points to be certified

  48. Google Maps Mashup - Resources • Google Maps API Documentation • http://code.google.com/apis/maps/documentation/ • Google Geo Developers Blog •  http://googlegeodevelopers.blogspot.com/ •  Google Maps Mania •   http://googlemapsmania.blogspot.com •  Programmable Web •   http://www.programmableweb.com •   Google Maps API Tutorial •    http://econym.org.uk/gmap/ •    MIBAZAAR (http://www.mibazaar.com)

  49. Thank You http://www.facebook.com/virender http://www.twitter.com/mibazaar http://www.mibazaar.com http://www.virenderajmani.com

More Related