Adding google maps to your college website
Download
1 / 32

Adding Google Maps to Your College Website - PowerPoint PPT Presentation


  • 446 Views
  • Updated On :

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

Related searches for Adding Google Maps to Your College Website

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Adding Google Maps to Your College Website' - jaden


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Adding google maps to your college website l.jpg

Adding Google Maps to YourCollege Website

Paul Dempsey

Director of Electronic Communication

Dickinson College


Introduction and overview l.jpg
Introductionand Overview

  • Session goals

  • College maps and directions

  • Maps on the web


Google maps l.jpg
Google Maps

  • Introduced February 2005

  • New type of web map

  • Innovative application of various web technologies


Google maps technology l.jpg
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>


Google maps technology5 l.jpg
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">


Google maps technology6 l.jpg
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!"); }

}


Google maps api l.jpg

API released June 2005

Embed maps in your web pages

Add overlays (markers) to maps

Google MapsAPI


Api terms of use l.jpg
APITerms of Use

  • Available to non-profit and commercial sites

  • No charging or internal use

  • No inappropriate use

  • Potential for advertising


Signing up l.jpg
Signing Up

  • Google account (Gmail, etc.)

  • Generate maps API key

  • Used on single directory


Getting started l.jpg
Getting Started

  • Google JavaScript source

  • Check browser compatibility

  • Strict XHTML


Getting started11 l.jpg
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>


Your first map l.jpg
Your First Map

  • Define map area

  • Initialize map object

  • Set center (longitude and latitude) and zoom size

  • Add controls


Your first map13 l.jpg
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());



Adding map features l.jpg
Adding Map Features

  • Map overlays

  • Event listeners

  • Info windows

  • Events and windows


Adding map features16 l.jpg
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


More map features l.jpg
More Map Features

  • Creating icons

  • Vector polylines

  • Additional JavaScript


More map features icons l.jpg
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";


More map features vector polylines l.jpg
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);


More map features additional javascript l.jpg
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


Server side programming l.jpg
Server-SideProgramming

  • Program languages and data

  • Generate JavaScript

  • Examples – campus map


Server side programming22 l.jpg
Server-SideProgramming

  • Any language (Perl, CFM)

  • Data files with map info


Server side programming23 l.jpg
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>


Server side programming24 l.jpg
Server-SideProgramming

  • 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 l.jpg
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


Zip code data campus information l.jpg
ZIP Code DataCampus Information

  • Address records for alumni, students and others

  • Create maps linked to data

  • Example: alumni homes


Zip code proximity alumni homes l.jpg
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


Zip code proximity alumni homes28 l.jpg
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");


Geocoding l.jpg
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 l.jpg
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>


Geocoding javascript l.jpg
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);

} } ); }}


Conclusion l.jpg
Conclusion

  • Potential uses for Google maps on college web sites

  • Questions?


ad