Your SlideShare is downloading. ×
0
Adding Google Maps to Your College Website Paul Dempsey Director of Electronic Communication Dickinson College
Introduction and Overview <ul><li>Session goals </li></ul><ul><li>College maps and directions </li></ul><ul><li>Maps on th...
Google Maps <ul><li>Introduced February 2005 </li></ul><ul><li>New type of  web map </li></ul><ul><li>Innovative applicati...
Google Maps Technology <ul><li>HTML, XML, XHTML </li></ul><SUBSECTION>   <SECHEAD>Contributing Faculty</SECHEAD>   <FACULT...
Google Maps Technology <ul><li>CSS, JavaScript, DHTML </li></ul>H1 { font-family : Verdana, Helvetica, sans-serif; text-al...
Google Maps Technology <ul><li>AJAX:  Asynchronous JavaScript and XML  </li></ul>function getXmlHttpRequestObject() { if (...
Google Maps API <ul><li>API released  June 2005 </li></ul><ul><li>Embed maps in your web pages </li></ul><ul><li>Add overl...
API Terms of Use <ul><li>Available to non-profit and commercial sites </li></ul><ul><li>No charging or internal use </li><...
Signing Up <ul><li>Google account (Gmail, etc.) </li></ul><ul><li>Generate maps API key </li></ul><ul><li>Used on single d...
Getting Started <ul><li>Google JavaScript source </li></ul><ul><li>Check browser compatibility </li></ul><ul><li>Strict XH...
Getting Started <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;  </li></ul><ul><li>&quot;http:/...
Your First Map <ul><li>Define map area </li></ul><ul><li>Initialize map object </li></ul><ul><li>Set center (longitude and...
Your First Map <ul><li><body> </li></ul><ul><li><div id=&quot;region&quot; style=&quot;width: 600px; height: 400px&quot;><...
Your First Map
Adding Map Features <ul><li>Map overlays  </li></ul><ul><li>Event listeners  </li></ul><ul><li>Info windows  </li></ul><ul...
Adding Map Features  <ul><li>var map = new GMap2(document.getElementById(&quot;region&quot;)); </li></ul><ul><li>map.setCe...
More Map Features <ul><li>Creating icons </li></ul><ul><li>Vector polylines </li></ul><ul><li>Additional JavaScript </li><...
More Map Features Icons <ul><li>var baseIcon = new GIcon(); </li></ul><ul><li>baseIcon.shadow = &quot;shadow.png&quot;; </...
More Map Features Vector Polylines <ul><li>var lineC = []; </li></ul><ul><li>lineC.push(new GLatLng(40.1872503307, -77.191...
More Map Features Additional JavaScript <ul><li>function getDir (mapmarker, dirtext, mapline) { </li></ul><ul><li>clearLin...
Server-Side Programming <ul><li>Program languages and data </li></ul><ul><li>Generate JavaScript </li></ul><ul><li>Example...
Server-Side Programming <ul><li>Any language (Perl, CFM) </li></ul><ul><li>Data files with map info </li></ul>
Server-Side Programming <ul><li><CFQUERY NAME=&quot;getbldg&quot; DATASOURCE=&quot;maps&quot;> </li></ul><ul><li>SELECT * ...
Server-Side Programming <ul><li>Examples using tabbed windows, additional DHTML, overlay of buildings (with TPhoto) </li><...
ZIP Code Data US Census Bureau <ul><li>Census 2000 U.S. Gazetteer Files </li></ul><ul><li>Census Tracts (66,304 records) <...
ZIP Code Data Campus Information <ul><li>Address records for alumni, students and others </li></ul><ul><li>Create maps lin...
ZIP Code Proximity Alumni Homes <ul><li>Use map to get latitude & longitude of visible area - getBoundsLatLng() </li></ul>...
ZIP Code Proximity Alumni Homes <ul><li>mborder = map.getBoundsLatLng(); </li></ul><ul><li>var request = GXmlHttp.create()...
Geocoding <ul><li>Locate addresses on map (convert to geographic coordinates) </li></ul><ul><li>Google Maps API now provid...
Geocoding HTTP Request http://maps.google.com/maps/geo? q=50+Mooreland+Ave+Carlisle+PA&output=xml&key=ABQI <address>50 Moo...
Geocoding JavaScript var geocoder = new GClientGeocoder(); function showAddress(address) { if (geocoder) { geocoder.getLat...
Conclusion <ul><li>Potential uses for Google maps on college web sites </li></ul><ul><li>Questions? </li></ul>
Upcoming SlideShare
Loading in...5
×

Google maps

629

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
629
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&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;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> </li></ul><ul><li><head> </li></ul><ul><li><script src=&quot;http://maps.google.com/maps?file=api&v=2& </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;http://www.dickinson.edu/about/maps/getzips.cfm?&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>request.open('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 http://maps.google.com/maps/geo? 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.

×