Google maps
Upcoming SlideShare
Loading in...5
×
 

Google maps

on

  • 809 views

 

Statistics

Views

Total Views
809
Views on SlideShare
809
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Google maps Google maps Presentation Transcript

  • Adding Google Maps to Your College Website Paul Dempsey Director of Electronic Communication Dickinson College
  • Introduction and Overview
    • Session goals
    • College maps and directions
    • Maps on the web
  • Google Maps
    • Introduced February 2005
    • New type of web map
    • Innovative application of various web technologies
  • Google Maps Technology
    • HTML, XML, XHTML
    <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>
  • Google Maps Technology
    • CSS, JavaScript, DHTML
    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;
  • Google Maps Technology
    • AJAX: Asynchronous JavaScript and XML
    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;); } }
  • Google Maps API
    • API released June 2005
    • Embed maps in your web pages
    • Add overlays (markers) to maps
  • API Terms of Use
    • Available to non-profit and commercial sites
    • No charging or internal use
    • No inappropriate use
    • Potential for advertising
  • Signing Up
    • Google account (Gmail, etc.)
    • Generate maps API key
    • Used on single directory
  • Getting Started
    • Google JavaScript source
    • Check browser compatibility
    • Strict XHTML
  • Getting Started
    • <!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;>
    • <head>
    • <script src=&quot;http://maps.google.com/maps?file=api&v=2&
    • key=ABAeKOi9qo8BGpObySsI&quot; type=&quot;text/javascript&quot;></script>
    • <script type=&quot;text/javascript&quot;>
    • if (!GBrowserIsCompatible()) {
    • document.location.replace(&quot;maperror.html&quot;);
    • }
    • </script>
  • Your First Map
    • Define map area
    • Initialize map object
    • Set center (longitude and latitude) and zoom size
    • Add controls
  • Your First Map
    • <body>
    • <div id=&quot;region&quot; style=&quot;width: 600px; height: 400px&quot;></div>
    • <script type=&quot;text/javascript&quot;>
    • var map = new GMap2(document.getElementById(&quot;region&quot;));
    • map.setCenter(new GLatLng(40.0084, -76.8756), 9);
    • map.addControl(new GLargeMapControl());
    • map.addControl(new GMapTypeControl());
  • Your First Map
  • Adding Map Features
    • Map overlays
    • Event listeners
    • Info windows
    • Events and windows
  • Adding Map Features
    • var map = new GMap2(document.getElementById(&quot;region&quot;));
    • map.setCenter(new GLatLng(40.0084, -76.8756), 9);
    • map.addControl(new GLargeMapControl());
    • map.addControl(new GMapTypeControl());
    • var btext = &quot;<b>Dickinson College</b><br />Carlisle, PA&quot;;
    • var point = new GLatLng(40.20292, -77.19830);
    • var marker = new GMarker(point) ,{title:&quot;Dickinson&quot;};
    • GEvent.addListener(marker, &quot;click&quot;, function() {
    • marker.openInfoWindowHtml(btext);});
    • map.addOverlay(marker);
    View
  • More Map Features
    • Creating icons
    • Vector polylines
    • Additional JavaScript
  • More Map Features Icons
    • var baseIcon = new GIcon();
    • baseIcon.shadow = &quot;shadow.png&quot;;
    • baseIcon.iconSize = new GSize(20, 34);
    • baseIcon.shadowSize = new GSize(37, 34);
    • baseIcon.iconAnchor = new GPoint(9, 34);
    • baseIcon.infoWindowAnchor = new GPoint(9, 2);
    • baseIcon.infoShadowAnchor = new GPoint(18, 25);
    • var icon = new GIcon(baseIcon);
    • icon.image = &quot;markerA.png&quot;;
  • More Map Features Vector Polylines
    • var lineC = [];
    • lineC.push(new GLatLng(40.1872503307, -77.1912717819));
    • lineC.push(new GLatLng(40.2015921347, -77.1891260147));
    • lineC.push(new GLatLng(40.2021493550, -77.1964645385));
    • var maplineC = new GPolyline(lineC,&quot;#660000&quot;,2);
    • map.addOverlay(mapline);
  • More Map Features Additional JavaScript
    • function getDir (mapmarker, dirtext, mapline) {
    • clearLines();
    • map.addOverlay(mapline);
    • mapmarker.showMapBlowup(15);
    • }
    • <a href=&quot;javascript:getDir(markerC, dirC, maplineC)&quot;>
    • Directions from the South (Washington, Baltimore)</a>
    View example
  • Server-Side Programming
    • Program languages and data
    • Generate JavaScript
    • Examples – campus map
  • Server-Side Programming
    • Any language (Perl, CFM)
    • Data files with map info
  • Server-Side Programming
    • <CFQUERY NAME=&quot;getbldg&quot; DATASOURCE=&quot;maps&quot;>
    • SELECT * FROM campus ORDER BY bldgname
    • </CFQUERY>
    • <CFOUTPUT QUERY=&quot;getbldg&quot;>
    • <CFSET mapletter = Chr(CurrentRow + 64)>
    • var point = new GPoint(-#long#, #lat#);
    • var marker#mapletter# = createMarker(point, &quot;#mapletter#&quot;, &quot;<img src='bldgs/#pic#' />&quot;);
    • map.addOverlay(marker#mapletter#);
    • </CFOUTPUT>
  • Server-Side Programming
    • Examples using tabbed windows, additional DHTML, overlay of buildings (with TPhoto)
    • Interactive campus map ( view )
    • Downtown shopping map ( view )
  • ZIP Code Data US Census Bureau
    • Census 2000 U.S. Gazetteer Files
    • Census Tracts (66,304 records)
    • Places (25,375 records)
    • Counties (3,219 records)
    • County Subdivisions (36,351 records)
    • ZCTAs (ZIP Code Tabulation Areas) (33,233 records)
    • ZCTA
    • State abbreviation, zip code, population, area, latitude, longitude
  • ZIP Code Data Campus Information
    • Address records for alumni, students and others
    • Create maps linked to data
    • Example: alumni homes
  • ZIP Code Proximity Alumni Homes
    • Use map to get latitude & longitude of visible area - getBoundsLatLng()
    • Pass to server program via AJAX
    • Query for ZIP codes on map
    • Find info in alumni database
    • Return to map
  • ZIP Code Proximity Alumni Homes
    • mborder = map.getBoundsLatLng();
    • var request = GXmlHttp.create();
    • 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;
    • request.open('GET', getURL, true);
    • . . .
    • var xmlDoc = request.responseXML;
    • markers = xmlDoc.documentElement.getElementsByTagName(&quot;marker&quot;);
  • Geocoding
    • Locate addresses on map (convert to geographic coordinates)
    • Google Maps API now provides a geocoding service
    • Available via HTTP or JavaScript
  • 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>
  • 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); } } ); }}
  • Conclusion
    • Potential uses for Google maps on college web sites
    • Questions?