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• Recapping – Data Sources• Google Developer Certified in Maps API• Google Maps Mashup Resources

About Me (My Journey)

• About Me

http://www.mibazaar.com/aboutme.html


History of Google Maps

• In February 2005 Google Maps goes Live.o Directionso See nearby locations by clicking and dragging the

map. o No wait for a new map image to loado No Satellite view.

• In April 2005 Satellite View was added• In June 2005 Maps API was released.

The Beginnings (When I started Mapping)

• It started during the Hurricane Season in 2005

• Hurricane Katrina• googlemapsmania.blogspot.com

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

http://en.wikipedia.org/wiki/Web_development

http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)

http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)

Google Maps Mashup – Prerequisites!

• HTML• JavaScript• Server Side Scripting

• php

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>

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)

Creating Google Maps Mashup(Adding Markers)

var marker = new google.maps.Marker({ position: latlng, map: map, title:"Hello World!" });

(link)

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)

Latitude/Longitude

• Where to place a marker?o You need to know Latitude/Longitude

• Latitude/Longitude Sources:o Wikipedia (link) (Detroit)o Google Maps (link) (eg: Campus Martius, det)

• Bulk Loading (100's of rows in MySql database)o example php script here (link)

http://en.wikipedia.org/wiki/Detroit

http://maps.google.com/

http://code.google.com/apis/maps/articles/phpsqlgeocode.html

Examples of Google Maps Mashup

• All Data in HTML fileo New 7 wonders of the world (link)o 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");

http://www.mibazaar.com/new7wonders

Examples of Google Maps Mashup (contd.)

• All Data in HTML fileo New 7 wonders of the world (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));


Examples of Google Maps Mashup (contd.)

• All Data in HTML fileo New 7 wonders of the world (link)o o var youtube = new

Array("ZblinvBE1VI","Hz8ErMx6QZU","VAXu4ODpqmk","TD6Dc--Cec8","6jJW7aSNCzU","wjOyi2IQKSI","1ycODdZkRpQ");


Examples of Google Maps Mashup (contd)

• Data in MySQL Databaseo Top High Schools in USA (link)o Journalists killed in line of duty (link)o Mapping World's Happiest Countries (link)

http://www.mibazaar.com/education/high_school.html

http://www.mibazaar.com/journalistskilled.html

http://www.mibazaar.com/happiestcountries.html


• 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');


• // 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 = "";


• 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();


• 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"; • }


• • • $queryoutput = $queryoutput."</markers>\n"; • echo $queryoutput;• }• • // Free resultset• mysql_free_result($result);• • // Closing connection• mysql_close($link);• ?>• }


• RSS Feedso 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. .

http://www.mibazaar.com/msdnevents.html

http://www.msdnevents.com/public/rss/msdnEvents.xml


• 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)


• RSS Feedso <?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 handleo curl_setopt($ch, CURLOPT_URL,$url); // set url to post too curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);// allow

redirectso curl_setopt($ch, CURLOPT_RETURNTRANSFER,1); // return into

a variableo curl_setopt($ch, CURLOPT_TIMEOUT, 30); // times out after 30so curl_setopt($ch, CURLOPT_POST, 0); // set POST methodo $result = curl_exec($ch); // run the whole processo curl_close($ch);o echo $result;o ?>

Example of Google Maps Mashups (contd)

• Local News Mashup (from Mibazaar.com)• Combines content from

o Google Mapso Yahoo Geocodingo Yahoo Traffico Yahoo Weathero Yahoo Localo Google News

• Demo (Link)

http://www.mibazaar.com/localnews


• Local News Mashup (from Mibazaar.com)• Yahoo Geocoding

o http://api.local.yahoo.com/MapsService/V1/geocode?appid=<app id>&zip=48226;

http://api.local.yahoo.com/MapsService/V1/geocode?appid=weshallrise&zip=48226;

http://api.local.yahoo.com/MapsService/V1/geocode?appid=weshallrise&zip=48226;


• Local News Mashup (from Mibazaar.com)• Yahoo Traffic

o http://api.local.yahoo.com/MapsService/V1/trafficData?appid=weshallrise&zip=48226&radius=5.0

http://api.local.yahoo.com/MapsService/V1/trafficData?appid=weshallrise&zip=48226&radius=5.0

http://api.local.yahoo.com/MapsService/V1/trafficData?appid=weshallrise&zip=48226&radius=5.0


• 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


• Local News Mashup (from Mibazaar.com)• Yahoo Local

o http://api.local.yahoo.com/LocalSearchService/V3/localSearch?appid=weshallrise&query=Indian+Restaurants&zip=48170&results=20&category=96926161

http://api.local.yahoo.com/LocalSearchService/V3/localSearch?appid=weshallrise&query=Indian+Restaurants&zip=48170&results=20&category=96926161




• Local News Mashup (from Mibazaar.com)• Google News

o http://news.google.com/news?hl=en&ned=us&q=detroit,mi&ie=UTF-8&output=rss

http://news.google.com/news?hl=en&ned=us&q=detroit,mi&ie=UTF-8&output=rss

http://news.google.com/news?hl=en&ned=us&q=detroit,mi&ie=UTF-8&output=rss


• Earthquakes from around the world in last 24 hourso link

• Datao http://earthquake.usgs.gov/earthquakes/catalogs/1day-M2.5.x

ml

http://www.mibazaar.com/earthquakes.html

http://earthquake.usgs.gov/earthquakes/catalogs/1day-M2.5.xml

http://earthquake.usgs.gov/earthquakes/catalogs/1day-M2.5.xml

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)


http://www.mibazaar.com/obama_igoogle.html

Google Mapping - Tweets

• Twitter exposes quite a bit of its data via API• Visit:

o http://dev.twitter.com/doc• Example - Gaza Tweets (link)

http://dev.twitter.com/doc

http://www.mibazaar.com/gazatweets.html

Google Mapping - Tweets (contd)

• Web Services call too http://search.twitter.com/search.atomo 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";


• Twitter sends location information related to the tweeto location however is not geocodedo 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 & 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>


-Tweets from within 1 mile radius of Microosft -Offices in Southfield, MI

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)

Google Mapping - YouTube (contd)

• Web Services call too 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>

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

Google Mapping - Your Loc with Google Lat.

• <entry> <id>http://www.google.com/latitude/apps/badge/api?user=-3664738570931846584&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>

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

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


• 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;•


• 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;• •


• /*** 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));• }• •

Recapping - Data Sources:

• Data embedded in HTML codeo Latitude/Longitude Datao 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 xmlo send it to client (JavaScript)

• XML file• RSS Feeds

o Data resides in other domainso Make a webservice call to retrieve datao All modern web browsers impose a security

restriction on network connections, which includes calls to XMLHttpRequest

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

Google Maps Mashup - Resources

• Google Maps API Documentation o http://code.google.com/apis/maps/documentation/

• Google Geo Developers Blogo http://googlegeodevelopers.blogspot.com/

• Google Maps Maniao http://googlemapsmania.blogspot.com

• Programmable Webo http://www.programmableweb.com

• Google Maps API Tutorialo http://econym.org.uk/gmap/

• MIBAZAAR (http://www.mibazaar.com)

Thank You

http://www.facebook.com/virenderhttp://www.twitter.com/mibazaar

http://www.mibazaar.comhttp://www.virenderajmani.com

Documents

Google Maps Mashups