html5-img
1 / 32

Adding Google Maps to Your College Website

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

jaden
Télécharger la présentation

Adding Google Maps to Your College Website

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Adding Google Maps to YourCollege Website Paul Dempsey Director of Electronic Communication Dickinson College

  2. Introductionand Overview • Session goals • College maps and directions • Maps on the web

  3. Google Maps • Introduced February 2005 • New type of web map • Innovative application of various web technologies

  4. Google MapsTechnology • HTML, XML, XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><body><h1>Google Maps</h1><p>Introduction</p><ul><li>New features</li></ul><br /></body></html> <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> <HTML><BODY BGCOLOR="#FFFFFF"><CENTER><H1>Google Maps</H1></CENTER><FONT SIZE="+1">Introduction</FONT><P><UL><LI>New features<LI>Web technologies</UL><BR></BODY></HTML>

  5. Google MapsTechnology • CSS, JavaScript, DHTML DIV.exp {  position: absolute;  top: 150px;  left: 50px;  width: 700px;  height: 325px;  }<DIV CLASS="exp" ID="ex3">Text for section</DIV>document.getElementById('ex3').style.visibility="visible" H1 { font-family : Verdana, Helvetica, sans-serif; text-align : center; } P { font-family : "Times New Roman", Times, serif; font-size : 13px; margin-bottom : 5px; margin-left : 15px; } <SCRIPT LANGUAGE="JavaScript">function addTax(amt) {  return parseFloat(amt) * 1.06; }</SCRIPT><INPUT TYPE="text" NAME="price" SIZE="10"ONCHANGE="document.TaxForm.withTax.value = addTax(document.TaxForm.price.value);"> Price with tax: <INPUT TYPE="text" NAME="withTax" SIZE="10">

  6. Google MapsTechnology • AJAX: Asynchronous JavaScript and XML function getXmlHttpRequestObject() { if (window.XMLHttpRequest) { return new XMLHttpRequest();} else if(window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP");} else {alert("Error initializing XMLHttpRequest!"); } }

  7. API released June 2005 Embed maps in your web pages Add overlays (markers) to maps Google MapsAPI

  8. APITerms of Use • Available to non-profit and commercial sites • No charging or internal use • No inappropriate use • Potential for advertising

  9. Signing Up • Google account (Gmail, etc.) • Generate maps API key • Used on single directory

  10. Getting Started • Google JavaScript source • Check browser compatibility • Strict XHTML

  11. Getting Started <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://maps.google.com/maps?file=api&v=2& key=ABAeKOi9qo8BGpObySsI" type="text/javascript"></script> <script type="text/javascript"> if (!GBrowserIsCompatible()) { document.location.replace("maperror.html"); } </script>

  12. Your First Map • Define map area • Initialize map object • Set center (longitude and latitude) and zoom size • Add controls

  13. Your First Map <body> <div id="region" style="width: 600px; height: 400px"></div> <script type="text/javascript"> var map = new GMap2(document.getElementById("region")); map.setCenter(new GLatLng(40.0084, -76.8756), 9); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl());

  14. Your First Map

  15. Adding Map Features • Map overlays • Event listeners • Info windows • Events and windows

  16. Adding Map Features var map = new GMap2(document.getElementById("region")); map.setCenter(new GLatLng(40.0084, -76.8756), 9); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); var btext = "<b>Dickinson College</b><br />Carlisle, PA"; var point = new GLatLng(40.20292, -77.19830); var marker = new GMarker(point) ,{title:"Dickinson"}; GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(btext);}); map.addOverlay(marker); View

  17. More Map Features • Creating icons • Vector polylines • Additional JavaScript

  18. More Map FeaturesIcons var baseIcon = new GIcon(); baseIcon.shadow = "shadow.png"; 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 = "markerA.png";

  19. More Map FeaturesVector 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,"#660000",2); map.addOverlay(mapline);

  20. More Map FeaturesAdditional JavaScript function getDir (mapmarker, dirtext, mapline) { clearLines(); map.addOverlay(mapline); mapmarker.showMapBlowup(15); } <a href="javascript:getDir(markerC, dirC, maplineC)"> Directions from the South (Washington, Baltimore)</a> View example

  21. Server-SideProgramming • Program languages and data • Generate JavaScript • Examples – campus map

  22. Server-SideProgramming • Any language (Perl, CFM) • Data files with map info

  23. Server-SideProgramming <CFQUERY NAME="getbldg" DATASOURCE="maps"> SELECT * FROM campus ORDER BY bldgname </CFQUERY> <CFOUTPUT QUERY="getbldg"> <CFSET mapletter = Chr(CurrentRow + 64)> var point = new GPoint(-#long#, #lat#); var marker#mapletter# = createMarker(point, "#mapletter#", "<img src='bldgs/#pic#' />"); map.addOverlay(marker#mapletter#); </CFOUTPUT>

  24. Server-SideProgramming • Examples using tabbed windows, additional DHTML, overlay of buildings (with TPhoto) • Interactive campus map (view) • Downtown shopping map (view)

  25. ZIP Code DataUS 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

  26. ZIP Code DataCampus Information • Address records for alumni, students and others • Create maps linked to data • Example: alumni homes

  27. ZIP Code ProximityAlumni 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

  28. ZIP Code ProximityAlumni Homes mborder = map.getBoundsLatLng(); var request = GXmlHttp.create(); var getURL = "http://www.dickinson.edu/about/maps/getzips.cfm?"+ "minx=" + mborder.minX + "&miny=" + mborder.minY+ "&maxx=" + mborder.maxX + "&maxy=" + mborder.maxY; request.open('GET', getURL, true); . . . var xmlDoc = request.responseXML; markers = xmlDoc.documentElement.getElementsByTagName("marker");

  29. Geocoding • Locate addresses on map (convert to geographic coordinates) • Google Maps API now provides a geocoding service • Available via HTTP or JavaScript

  30. GeocodingHTTP 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. GeocodingJavaScript var geocoder = new GClientGeocoder(); function showAddress(address) { if (geocoder) { geocoder.getLatLng(address, function(point) { if (!point) {alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); }}

  32. Conclusion • Potential uses for Google maps on college web sites • Questions?

More Related