• Like
  • Save
Google maps
Upcoming SlideShare
Loading in...5
×
 

Google maps

on

  • 907 views

 

Statistics

Views

Total Views
907
Views on SlideShare
907
Embed Views
0

Actions

Likes
0
Downloads
15
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?