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. o Directions o See nearby locations by clicking and dragging the map. o No wait for a new map image to load o 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 web development (source: http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)) 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))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 html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% }

9. Creating Google Maps Mashup 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); } (link)link

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

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

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

13. Examples of Google Maps Mashup All Data in HTML file o New 7 wonders of the world (link)link o o 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 o New 7 wonders of the world (link)link o o 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 o New 7 wonders of the world (link)link o o var youtube = new Array("ZblinvBE1VI","Hz8ErMx6QZU","VAXu4ODp qmk","TD6Dc-- Cec8","6jJW7aSNCzU","wjOyi2IQKSI","1ycODdZk RpQ");

16. Examples of Google Maps Mashup (contd) Data in MySQL Database o Top High Schools in USA (link)link o Journalists killed in line of duty (link)link o Mapping World's Happiest Countries (link)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 = " \n"; $queryoutput = $queryoutput." \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." $row[0] $row[1] $row[2] $row[6] $row[8] $row[9] $row[10] $row[11] \n"; }

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

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

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

26. Example of Google Maps Mashups ( contd ) Local News Mashup (from Mibazaar.com) Yahoo Geocoding o http://api.local.yahoo.com/MapsService/V1/geocode?appid= &zip=48226; 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 o http://api.local.yahoo.com/MapsService/V1/trafficData?appid=wes hallrise&zip=48226&radius=5.0 http://api.local.yahoo.com/MapsService/V1/trafficData?appid=wes hallrise&zip=48226&radius=5.0

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

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

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

31. Example of Google Maps Mashups ( contd ) Earthquakes from around the world in last 24 hours o link link Data o http://earthquake.usgs.gov/earthquakes/catalogs/1day- M2.5.xml 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)Link Created a similar looking Obama life journey map (Link)Link

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

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

35. Google Mapping - Tweets ( contd ) Twitter sends location information related to the tweet o location however is not geocoded o Another Web Service call is made to  Google GeoCoding API to retrieve Latitude/Longitude 2 hours ago Free Elliot Madison! Allow twitter for protests in USA, not just Iran ! Set your avatar red & black: http://twitterrevolution.us/ #fbifail http://twitter.com/feintunes/statuses/5001657748 http://a1.twimg.com/profile_images/468973086/stella_sworking4U_ normal.jpg feintunes Tehran

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: o http://code.google.com/apis/youtube/2.0/reference.html Example - o Gaza Conflict (link)link

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

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

40. Google Mapping - Your Loc with Google Lat. http://www.google.com/latitude/apps/badge/api?user=- 3664738570931846584&type=atom;-3664738570931846584 -3664738570931846584 Current Location 2010-10- 09T07:11:24Z Current Location 42.3787795 -83.526519 10 Plymouth Township, MI, USA

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 o 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 o Latitude/Longitude Data o Data in the Information Window MySQL (can be SQL Server or Oracle..) o Server Side Scripting (PHP or ASP.NET or..) o convert the the data to xml o send it to client (JavaScript) XML file RSS Feeds o Data resides in other domains o Make a webservice call to retrieve data o 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/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 o http://code.google.com/apis/maps/documentation/ Google Geo Developers Blog o http://googlegeodevelopers.blogspot.com/ Google Maps Mania o http://googlemapsmania.blogspot.com Programmable Web o http://www.programmableweb.com Google Maps API Tutorial o 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