Google maps


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Google maps

  1. 1. Adding Google Maps to Your College Website Paul Dempsey Director of Electronic Communication Dickinson College
  2. 2. Introduction and Overview <ul><li>Session goals </li></ul><ul><li>College maps and directions </li></ul><ul><li>Maps on the web </li></ul>
  3. 3. Google Maps <ul><li>Introduced February 2005 </li></ul><ul><li>New type of web map </li></ul><ul><li>Innovative application of various web technologies </li></ul>
  4. 4. Google Maps Technology <ul><li>HTML, XML, XHTML </li></ul><SUBSECTION>   <SECHEAD>Contributing Faculty</SECHEAD>   <FACULTY>     <NAME>Carl Sagan</NAME>     <RANK>Professor of Physics</RANK>   </FACULTY>   <FACULTY>     <NAME>Charles Darwin</NAME>     <RANK>Professor of Biology</RANK>   </FACULTY> </SUBSECTION> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;  &quot;;> <html xmlns=&quot;;> <body> <h1>Google Maps</h1> <p>Introduction</p> <ul> <li>New features</li> </ul><br /> </body> </html> <HTML> <BODY BGCOLOR=&quot;#FFFFFF&quot;> <CENTER><H1>Google Maps</H1></CENTER> <FONT SIZE=&quot;+1&quot;>Introduction</FONT><P> <UL> <LI>New features <LI>Web technologies</UL><BR> </BODY> </HTML>
  5. 5. Google Maps Technology <ul><li>CSS, JavaScript, DHTML </li></ul>H1 { font-family : Verdana, Helvetica, sans-serif; text-align : center; } P { font-family : &quot;Times New Roman&quot;, Times, serif; font-size : 13px; margin-bottom : 5px; margin-left : 15px; } <SCRIPT LANGUAGE=&quot;JavaScript&quot;> function addTax(amt) {   return parseFloat(amt) * 1.06; } </SCRIPT> <INPUT TYPE=&quot;text&quot; NAME=&quot;price&quot; SIZE=&quot;10&quot; ONCHANGE=&quot;document.TaxForm.withTax.value = addTax(document.TaxForm.price.value);&quot;> Price with tax: <INPUT TYPE=&quot;text&quot; NAME=&quot;withTax&quot; SIZE=&quot;10&quot;> DIV.exp {   position: absolute;   top: 150px;   left: 50px;   width: 700px;   height: 325px;   } <DIV CLASS=&quot;exp&quot; ID=&quot;ex3&quot;>Text for section</DIV> document.getElementById('ex3').style.visibility=&quot;visible&quot;
  6. 6. Google Maps Technology <ul><li>AJAX: Asynchronous JavaScript and XML </li></ul>function getXmlHttpRequestObject() { if (window.XMLHttpRequest) { return new XMLHttpRequest();} else if(window.ActiveXObject) { return new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);} else {alert(&quot;Error initializing XMLHttpRequest!&quot;); } }
  7. 7. Google Maps API <ul><li>API released June 2005 </li></ul><ul><li>Embed maps in your web pages </li></ul><ul><li>Add overlays (markers) to maps </li></ul>
  8. 8. API Terms of Use <ul><li>Available to non-profit and commercial sites </li></ul><ul><li>No charging or internal use </li></ul><ul><li>No inappropriate use </li></ul><ul><li>Potential for advertising </li></ul>
  9. 9. Signing Up <ul><li>Google account (Gmail, etc.) </li></ul><ul><li>Generate maps API key </li></ul><ul><li>Used on single directory </li></ul>
  10. 10. Getting Started <ul><li>Google JavaScript source </li></ul><ul><li>Check browser compatibility </li></ul><ul><li>Strict XHTML </li></ul>
  11. 11. Getting Started <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; </li></ul><ul><li>&quot;;> </li></ul><ul><li><html xmlns=&quot;;> </li></ul><ul><li><head> </li></ul><ul><li><script src=&quot; </li></ul><ul><li>key=ABAeKOi9qo8BGpObySsI&quot; type=&quot;text/javascript&quot;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>if (!GBrowserIsCompatible()) { </li></ul><ul><li>document.location.replace(&quot;maperror.html&quot;); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul>
  12. 12. Your First Map <ul><li>Define map area </li></ul><ul><li>Initialize map object </li></ul><ul><li>Set center (longitude and latitude) and zoom size </li></ul><ul><li>Add controls </li></ul>
  13. 13. Your First Map <ul><li><body> </li></ul><ul><li><div id=&quot;region&quot; style=&quot;width: 600px; height: 400px&quot;></div> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>var map = new GMap2(document.getElementById(&quot;region&quot;)); </li></ul><ul><li>map.setCenter(new GLatLng(40.0084, -76.8756), 9); </li></ul><ul><li>map.addControl(new GLargeMapControl()); </li></ul><ul><li>map.addControl(new GMapTypeControl()); </li></ul>
  14. 14. Your First Map
  15. 15. Adding Map Features <ul><li>Map overlays </li></ul><ul><li>Event listeners </li></ul><ul><li>Info windows </li></ul><ul><li>Events and windows </li></ul>
  16. 16. Adding Map Features <ul><li>var map = new GMap2(document.getElementById(&quot;region&quot;)); </li></ul><ul><li>map.setCenter(new GLatLng(40.0084, -76.8756), 9); </li></ul><ul><li>map.addControl(new GLargeMapControl()); </li></ul><ul><li>map.addControl(new GMapTypeControl()); </li></ul><ul><li>var btext = &quot;<b>Dickinson College</b><br />Carlisle, PA&quot;; </li></ul><ul><li>var point = new GLatLng(40.20292, -77.19830); </li></ul><ul><li>var marker = new GMarker(point) ,{title:&quot;Dickinson&quot;}; </li></ul><ul><li>GEvent.addListener(marker, &quot;click&quot;, function() { </li></ul><ul><li>marker.openInfoWindowHtml(btext);}); </li></ul><ul><li>map.addOverlay(marker); </li></ul>View
  17. 17. More Map Features <ul><li>Creating icons </li></ul><ul><li>Vector polylines </li></ul><ul><li>Additional JavaScript </li></ul>
  18. 18. More Map Features Icons <ul><li>var baseIcon = new GIcon(); </li></ul><ul><li>baseIcon.shadow = &quot;shadow.png&quot;; </li></ul><ul><li>baseIcon.iconSize = new GSize(20, 34); </li></ul><ul><li>baseIcon.shadowSize = new GSize(37, 34); </li></ul><ul><li>baseIcon.iconAnchor = new GPoint(9, 34); </li></ul><ul><li>baseIcon.infoWindowAnchor = new GPoint(9, 2); </li></ul><ul><li>baseIcon.infoShadowAnchor = new GPoint(18, 25); </li></ul><ul><li>var icon = new GIcon(baseIcon); </li></ul><ul><li>icon.image = &quot;markerA.png&quot;; </li></ul>
  19. 19. More Map Features Vector Polylines <ul><li>var lineC = []; </li></ul><ul><li>lineC.push(new GLatLng(40.1872503307, -77.1912717819)); </li></ul><ul><li>lineC.push(new GLatLng(40.2015921347, -77.1891260147)); </li></ul><ul><li>lineC.push(new GLatLng(40.2021493550, -77.1964645385)); </li></ul><ul><li>var maplineC = new GPolyline(lineC,&quot;#660000&quot;,2); </li></ul><ul><li>map.addOverlay(mapline); </li></ul>
  20. 20. More Map Features Additional JavaScript <ul><li>function getDir (mapmarker, dirtext, mapline) { </li></ul><ul><li>clearLines(); </li></ul><ul><li>map.addOverlay(mapline); </li></ul><ul><li>mapmarker.showMapBlowup(15); </li></ul><ul><li>} </li></ul><ul><li><a href=&quot;javascript:getDir(markerC, dirC, maplineC)&quot;> </li></ul><ul><li>Directions from the South (Washington, Baltimore)</a> </li></ul>View example
  21. 21. Server-Side Programming <ul><li>Program languages and data </li></ul><ul><li>Generate JavaScript </li></ul><ul><li>Examples – campus map </li></ul>
  22. 22. Server-Side Programming <ul><li>Any language (Perl, CFM) </li></ul><ul><li>Data files with map info </li></ul>
  23. 23. Server-Side Programming <ul><li><CFQUERY NAME=&quot;getbldg&quot; DATASOURCE=&quot;maps&quot;> </li></ul><ul><li>SELECT * FROM campus ORDER BY bldgname </li></ul><ul><li></CFQUERY> </li></ul><ul><li><CFOUTPUT QUERY=&quot;getbldg&quot;> </li></ul><ul><li><CFSET mapletter = Chr(CurrentRow + 64)> </li></ul><ul><li>var point = new GPoint(-#long#, #lat#); </li></ul><ul><li>var marker#mapletter# = createMarker(point, &quot;#mapletter#&quot;, &quot;<img src='bldgs/#pic#' />&quot;); </li></ul><ul><li>map.addOverlay(marker#mapletter#); </li></ul><ul><li></CFOUTPUT> </li></ul>
  24. 24. Server-Side Programming <ul><li>Examples using tabbed windows, additional DHTML, overlay of buildings (with TPhoto) </li></ul><ul><li>Interactive campus map ( view ) </li></ul><ul><li>Downtown shopping map ( view ) </li></ul>
  25. 25. ZIP Code Data US Census Bureau <ul><li>Census 2000 U.S. Gazetteer Files </li></ul><ul><li>Census Tracts (66,304 records) </li></ul><ul><li>Places (25,375 records) </li></ul><ul><li>Counties (3,219 records) </li></ul><ul><li>County Subdivisions (36,351 records) </li></ul><ul><li>ZCTAs (ZIP Code Tabulation Areas) (33,233 records) </li></ul><ul><li>ZCTA </li></ul><ul><li>State abbreviation, zip code, population, area, latitude, longitude </li></ul>
  26. 26. ZIP Code Data Campus Information <ul><li>Address records for alumni, students and others </li></ul><ul><li>Create maps linked to data </li></ul><ul><li>Example: alumni homes </li></ul>
  27. 27. ZIP Code Proximity Alumni Homes <ul><li>Use map to get latitude & longitude of visible area - getBoundsLatLng() </li></ul><ul><li>Pass to server program via AJAX </li></ul><ul><li>Query for ZIP codes on map </li></ul><ul><li>Find info in alumni database </li></ul><ul><li>Return to map </li></ul>
  28. 28. ZIP Code Proximity Alumni Homes <ul><li>mborder = map.getBoundsLatLng(); </li></ul><ul><li>var request = GXmlHttp.create(); </li></ul><ul><li>var getURL = &quot;;+ &quot;minx=&quot; + mborder.minX + &quot;&miny=&quot; + mborder.minY+ &quot;&maxx=&quot; + mborder.maxX + &quot;&maxy=&quot; + mborder.maxY; </li></ul><ul><li>'GET', getURL, true); </li></ul><ul><li>. . . </li></ul><ul><li>var xmlDoc = request.responseXML; </li></ul><ul><li>markers = xmlDoc.documentElement.getElementsByTagName(&quot;marker&quot;); </li></ul>
  29. 29. Geocoding <ul><li>Locate addresses on map (convert to geographic coordinates) </li></ul><ul><li>Google Maps API now provides a geocoding service </li></ul><ul><li>Available via HTTP or JavaScript </li></ul>
  30. 30. Geocoding HTTP Request q=50+Mooreland+Ave+Carlisle+PA&output=xml&key=ABQI <address>50 Mooreland Ave, Carlisle, PA 17013, USA</address> <Locality> <LocalityName>Carlisle</LocalityName> <Thoroughfare><ThoroughfareName>50 Mooreland Ave</ThoroughfareName></Thoroughfare> <PostalCodeNumber>17013</PostalCodeNumber> </Locality> <Point><coordinates>-77.198845,40.201498,0</coordinates></Point>
  31. 31. Geocoding JavaScript var geocoder = new GClientGeocoder(); function showAddress(address) { if (geocoder) { geocoder.getLatLng(address, function(point) { if (!point) {alert(address + &quot; not found&quot;); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); }}
  32. 32. Conclusion <ul><li>Potential uses for Google maps on college web sites </li></ul><ul><li>Questions? </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.