Google Maps API

USGS GIS Workshop 2008

GOOGLE MAPS

Introduction To the Google Maps API

By Gregory L. Gunther

GOOGLE MAPS API

Introduction To the Google Maps API

Gunther


Importance of Google Maps API

¨ “Gateway to the Geoweb ¨ Attack of the NeoGeos ¨ Interface To Google Maps for Application

Developers ¨ JavaScript Library ¨ Simple, quick deployment ¨ Provides Geocoder (Version 2)

¤ Version 1 required Mashup with other

¨ Implementation of AJAX/DHTML

Introduction to the Google Maps API: By Gregory L.

Importance of Google Maps API

Geoweb”

Interface To Google Maps for Application

Simple, quick deployment (Version 2)

with other geocoding service

Implementation of AJAX/DHTML

Introduction to the Google Maps API: By Gregory L. Gunther


Google Maps Key

¨ Requires Google Account and is free ¤ http://code.google.com/apis/maps/signup.html

¨ Key good for a single directory on server and all sub directories—usually a host

¨ Typically looks like ¤ http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAS

hF...

¨ Generic for local file system (no server, I think???) ¤ http://maps.google.com/maps?file=js&v=2.x


Google Maps Key

Requires Google Account and is free http://code.google.com/apis/maps/signup.html

Key good for a single directory on server and all usually a host

http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAS

Generic for local file system (no server, I think???) http://maps.google.com/maps?file=js&v=2.x


http://code.google.com/apis/maps/signup.html

http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAShF

http://maps.google.com/maps?file=js&v=2.x


Google Maps Key Continued

¨ Trick ¤ V=2 àCurrent 2.77 ¤ V=2.xàLatest 2.88 ¤ V=2.77àFixed to specific version

¨ http://groups.google.com/group/Google API/web/api-version-changes?version=10

¨ Reserves the right to upgrade at any time ¤ Will run both for “about a month” ¤ Then old one will be turned off

¨ Will implement bug fixes “transparently” ¤ Refer to discussion forum for help


Google Maps Key Continued

Fixed to specific version http://groups.google.com/group/Google-Maps-

changes?version=10 Reserves the right to upgrade at any time

Will run both for “about a month” Then old one will be turned off

Will implement bug fixes “transparently” Refer to discussion forum for help


http://groups.google.com/group/Google-Maps-API/web/api-version-changes?version=10


Terms of Use (Back in 2007)

¨ No limit on page views ¤ Request notification if over 500,000

¨ Limit of 50,000 geocode ¨ Does not include advertising ¨ Must be available to the public ¤ Google Maps for Enterprise Internally

¨ Can’t alter “Google” Logos on images ¨ They can upgrade of change library at anytime


Terms of Use (Back in 2007)

Request notification if over 500,000

requests per day Does not include advertising – YET!!! Must be available to the public

Google Maps for Enterprise Internally

Can’t alter “Google” Logos on images They can upgrade of change library at anytime



GMap2 class


¨ An instance of GMap2 represents a single map on the page.

¨ You can create as many instances of this class as you want (one for each map on the page).


USGS GIS Workshop 2008 Introduction to the Google Maps API: By Gregory L.

Google Maps “Hello World”

<script src="http://maps.google.com/maps?file=api&v=2&key=.....“ type="text/javascript"></script>

function load() if (GBrowserIsCompatible()) var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419,

•GBrowserIsCompatible(): Checks to see if browser in compatible •GMap2 (): Main map object constructor •setCenter(): sets the starting center location of the map, must be called, also sets zoom ( •Call function which loads map using onLoad event in body

<body onload=“load()”></body> <div id="map" style="width: 500px; height: 300px"></div>


Google Maps “Hello World”

="http://maps.google.com/maps?file=api&v=2&key=.....“

var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, 122.1419), 13);

(): Checks to see if browser in compatible

(): sets the starting center location of the map, must be called, also sets zoom (ie. 13) event in body à Critical

<div id="map" style="width: 500px; height: 300px"></div>


Quick Demo and Exercise 2


Quick Demo and Exercise 2



Overlaysà Adding Your Own Data

¨ Points, lines, Polygons, InfoWindow ¤ XML, JSON, REST API

¨ KML, GeoRSS (GGeoXMLà ¤ Not AJAX

¨ WMS ¤ 3 rd Party ¤ Some other work arounds>>Not Native

¨ GML (Open Layers) ¤ Really just XML Parsing

¨ ArcGIS (9.3 JS API Preview) ¨ Others???


Adding Your Own Data

InfoWindow

àGoogle Server Upload)

>>Not Native

(9.3 JS API Preview)



Markers

¨ Point on a map ¨ Added Using GMarker

Object ¤ Takes GLatLng argument

¨ Uses default G_DEFAULT_ICON ¤ Can create custom icons


var point = new GLatLng(43.65654,-79.90138); var marker = new GMarker(point); map.addOverlay(marker);

argument


79.90138);


Custom Marker Icons


var icon = new GIcon(); icon.image = "http://.../ridefinder/images/mm_20_red.png"; icon.shadow = "http://.../ridefinder/images/mm_20_shadow.png"; icon.iconSize = new GSize(12, 20); icon.shadowSize = new GSize(22, 20); icon.iconAnchor = new GPoint(6, 20); icon.infoWindowAnchor = new GPoint(5, 1);

……….

map.addOverlay(new GMarker(point, icon));

Custom Marker Icons


/images/mm_20_red.png"; /images/mm_20_shadow.png";

(5, 1);

(point, icon));


Polylines and Polygons

¨ GPolygon(points, strokeColor strokeOpacity?, fillColor?, fillOpacity

¨ GPolyline(points, color?, weight?, opacity?) ¨ IE Requires VML Namespace


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml

………………… var pl = new GPolyline([new GPoint(-107.395492, 42.893307

new GPoint(-107.398249, 42.891117)], "#EC4F18", 4, 1);

map.addOverlay(pl);

and Polygons

strokeColor?, strokeWeight?, fillOpacity?)

(points, color?, weight?, opacity?) IE Requires VML Namespace


="http://www.w3.org/1999/xhtml" com:vml">

107.395492, 42.893307), 107.398249, 42.891117)],


InfoWindows


•Regular or Tabbed •HTML or DOM •Stand Alone of Event Driven •Bind to any feature (map, marker)



InfoWindows with Markers


¨ #1 openInfoWindow (DOM Node)

¨ #2 openInfoWindowHTML(HTML content)

¨ #3 openInfoWindowHTMLTab (Tab Title, Content)

marker.openInfoWindow(document.createTextNode

marker.openInfoWindowHtml("Marker #<b>" + number + "</b>");

var infoTabs = new GInfoWindowTab("Tab #1", "This is tab #1 content"); …… marker.openInfoWindowTabsHtml(infoTabs

with Markers


#1 openInfoWindow (DOM Node)

#2 openInfoWindowHTML(HTML content)

#3 openInfoWindowHTMLTab (Tab Title, Content)

document.createTextNode("Hello, world"));

("Marker #<b>" + number + "</b>");

("Tab #1", "This is tab #1 content");

infoTabs);


Events and Event Listeners

¨ Adds behaviors based on user interactions ¨ Application “listens” for things to happen ¨ GEvent.addListerner (“map object”, “event”, “the

Function to perform”)


var map = new GMap2(document.getElementById GEvent.addListener(map, "click", function()

alert("You clicked the map."); );

OR

GEvent.addListener(marker, "click", function() marker.openInfoWindowHtml(“<b>Hello World</b>”);

);

Events and Event Listeners

Adds behaviors based on user interactions Application “listens” for things to happen

(“map object”, “event”, “the


document.getElementById("map")); (map, "click", function()

(marker, "click", function() (“<b>Hello World</b>”);


Gmap Events

Introduction to the Google Maps API: By Gregory L. Introduction to the Google Maps API: By Gregory L. Gunther


Adding XML Overlays

¨ AJAX stands for Asynchronous JavaScript And XML. ¤ AJAX has been around, made popular by Google

(maps.google.com) ¤ AJAX no a language, technique using a variety of technologies

(DOM, DHTML, Javascript, XML). ¨ AJAX is based on JavaScript and HTTP ¤ XMLHTTPRequest Javascript Object ¤ Allows data to be requested from server without page reloads

Client Side ¤ Browser Independent (with a little help) ¤ Better user experience ¤ More desktop like ¤ Asynchronous


Adding XML Overlays à AJAX

AJAX stands for Asynchronous JavaScript And XML. AJAX has been around, made popular by Google

AJAX no a language, technique using a variety of technologies , XML).

AJAX is based on JavaScript and HTTP Object

Allows data to be requested from server without page reloads

Browser Independent (with a little help)


Source: Crane, et al. 2006


Adding XML Overlays

¨ AJAX stands for Asynchronous JavaScript And XML. ¤ AJAX has been around, made popular by Google

(maps.google.com) ¤ AJAX no a language, technique using a variety of technologies

(DOM, DHTML, Javascript, XML). ¨ AJAX is based on JavaScript and HTTP ¤ XMLHTTPRequest Javascript Object ¤ Allows data to be requested from server without page reloads Client

Side ¤ Browser Independent (with a little help) ¤ Better user experience ¤ More desktop like ¤ Asynchronous


Adding XML Overlays à AJAX

AJAX stands for Asynchronous JavaScript And XML. AJAX has been around, made popular by Google

AJAX no a language, technique using a variety of technologies , XML).

AJAX is based on JavaScript and HTTP Object

Allows data to be requested from server without page reloads Client

Browser Independent (with a little help)




AJAX vs. Traditional Website Analog


Traditional Web Application Analog

AJAX Rich Web Application Analog


AJAX vs. Traditional Website Analog



Gmaps Implementation of AJAX

¨ GDownloadURL ¤ Easiest and simplest

n Function(data,responseCode) n Where response code is HTTP response code from server

¨ Can also GXmlHttp ¤ More like XMLHttpRequest Object ¤ Able to check the state of the request little better


GDownloadUrl("example.xml", function(data, if (responseCode == 0)

var xml = GXml.parse ……. Parse Data using DOM……. map.addOverlay(marker));

);

Implementation of AJAX

Where response code is HTTP response code from server à Usually 200 if successful

Able to check the state of the request little better


("example.xml", function(data, responseCode)

GXml.parse(data); ……. Parse Data using DOM…….

(marker));


AJAX and Browser Security

¨ IE cannot overlay when rendered locally ¨ Firefox will ¨ Browser security requires data resources and the

resulting webpage be resolved to same hostname ¤ Kind of


AJAX and Browser Security

IE cannot overlay when rendered locally

Browser security requires data resources and the resulting webpage be resolved to same hostname



Parsing XML using DOM.

¨ getElementsByTagName ()– array

¨ getAttribute() – returns value of specified attribute for a particular DOM node

¨ parseFloat(string)—parse a string into float


var markers = xml.documentElement.getElementsByTagName for (var i = 0; i < markers.length; i++)

var point = new GLatLng(parseFloat parseFloat

map.addOverlay(new Gmarker(point));

Parsing XML using DOM.

–returns all DOM nodes as

returns value of specified attribute for

parse a string into float


xml.documentElement.getElementsByTagName("marker")

parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));

(point));


File Based XML vs. REST

¨ REST: More of a philosophy than a technology ¨ Simply and Elegant Web Service Architecture ¨ URI based web service access ¨ Javascript Security

http://certmapper.cr.usgs.gov/XMLGenerator/GetX MLServlet?tableName=sdebase.core_intervals&col umnName=formname


File Based XML vs. REST

REST: More of a philosophy than a technology Simply and Elegant Web Service Architecture URI based web service access

http://certmapper.cr.usgs.gov/XMLGenerator/GetX MLServlet?tableName=sdebase.core_intervals&col


http://certmapper.cr.usgs.gov/XMLGenerator/GetXMLServlet?tableName=sdebase.core_intervals&columnName=formname


Demo and Exercise 3


Demo and Exercise 3



Mashup

¨ Buzzword of the decade ¨ Definitions ¨ “Bastard pop is a musical genre which, in its purest form, consists of the

combination (usually by digital means) of the music from one song with the acapella from another. Typically, the music and vocals belong to completely different genres. At their best, bastard pop songs strive for musical epiphanies that add up to considerably more than the sum of their parts.”

¨ Web application combining multiple services and resources from desperate locations

¨ “A mash-up is a Web page or application that integrates complementary elements from two or more sources. Mash created by using a development approach called


Buzzword of the decade

“Bastard pop is a musical genre which, in its purest form, consists of the combination (usually by digital means) of the music from one song with

from another. Typically, the music and vocals belong to completely different genres. At their best, bastard pop songs strive for musical epiphanies that add up to considerably more than the sum of

Web application combining multiple services and resources from

up is a Web page or application that integrates complementary elements from two or more sources. Mash-ups are often created by using a development approach called Ajax. “


http://searchvb.techtarget.com/sDefinition/0,,sid8_gci1107521,00.html


Mashup Resources

¨ Typically Web Services ¤ Services are reusable units providing business functionality that

are: n Clearly defined using standard policies, practices, and frameworks n Clearly described (xml) n Autonomous n Abstractions of the underlying business logic and functionality

n Actual overlay process not necessary

¤ Easy to understand: one party delivers a service according to a contract with the other party

¨ Protocols ¤ REST, SOAP, WMS, WFS, ArcXML

¨ Encodings ¤ Images, Generic XML, KML, GeoRSS


Resources

Services are reusable units providing business functionality that

Clearly defined using standard policies, practices, and frameworks

Abstractions of the underlying business logic and functionality Actual overlay process not necessary

Easy to understand: one party delivers a service according to a

ArcXML

GeoRSS, GML, etc…


Source: ArcIMS WMS Connector Help


WMS

¨ Web Map Service ¨ Most widely adopted OGC standard

¤ Simple and elegant ¤ Easy to implement ¤ Easy to use by clients

¨ support of the creation and display of registered and superimposed map-like views of information that come simultaneously from multiple remote and heterogeneous sources

¨ Geospatial data response encoded as image ¨ Version 1.3 ¨ Developed as part of the Web Mapping

(WMT)


Most widely adopted OGC standard

support of the creation and display of registered and like views of information that come

simultaneously from multiple remote and heterogeneous

Geospatial data response encoded as image

Developed as part of the Web Mapping Testbed project


Source: King 2006


WMS

¨ Any WMS client can access maps from 1 or many servers

¨ Any client can combine maps (overlay as acetate layers)

¨ Any client can query information from any server ¨ Implements 3 functions ¤ getCapabilities – What does the service support ¤ getMap – get me the map ¤ getFeatureInfo – query and identify


Any WMS client can access maps from 1 or many

Any client can combine maps (overlay as acetate

Any client can query information from any server

What does the service support

query and identify


Source: ArcIMS WMS Connector Help


Implementing WMS

¨ Varied mean so doing so ¨ Primary Google Maps Functions and Interfaces and Constants

¤ Custom Layers via GTileLayer Interface ( ¤ Constants


Implementing WMS Mashups

Primary Google Maps Functions and Interfaces and Constants Interface (GmapType)



wms236.js Library Implementation

¨ wms236.js ¤ Constructs tiles, handles projections ¤ Input n WMS getMap URL n Service Name n Format


var myDOQQLayer= new GTileLayer(new GCopyrightCollection myDOQQLayer.myBaseURL='http://terraservice.net/ogcmap.ashx?' myDOQQLayer.myLayers='doq'; myDOQQLayer.myFormat='image/gif’; myDOQQLayer.getTileUrl=CustomGetTileUrl

var layer1=[G_HYBRID_MAP.getTileLayers()[0],

var custommap1 = new GMapType(layer1,

map.addMapType(custommap1);

Library Implementation

Constructs tiles, handles projections

Introduction to the Google Maps API: By Gregory L. Gunther Source: WMS Javascript Library

GCopyrightCollection(""),1,17); ='http://terraservice.net/ogcmap.ashx?'

CustomGetTileUrl;

()[0], myDOQQLayer];

(layer1, G_SATELLITE_MAP.getProjection(), “DOQQ");


KML – Keyhole Markup Language

¨ New OGC standard V 2.2 (HTML for the ¤ Originated For Google Earth ¤ “HTML of the Geoweb”

¨ Not good use of xml because includes a lot of formatting issues, not just data structure (My Opinion)

¨ Default xml specification for “Globe” Services ¨ Huge specification ¨ Tools and authoring KML

¤ ArcMap Script -- http://arcscripts.esri.com/details.asp?dbid=14273 ¤ Arc2Earth -- http://www.arc2earth.com/ ¤ Xtools ¤ ArcToolbox ¤ Renders (ArcGIS Server, Geoserver, POSTGIS)

¨ KMZ format – Compressed ¨ Object Oriented – Very Important


Keyhole Markup Language

New OGC standard V 2.2 (HTML for the Geoweb)

Not good use of xml because includes a lot of formatting issues, not just data

Default xml specification for “Globe” Services

http://arcscripts.esri.com/details.asp?dbid=14273 http://www.arc2earth.com/

, POSTGIS)


http://arcscripts.esri.com/details.asp?dbid=14273

http://www.arc2earth.com/


GeoRSS

¨ RSS = Real Simple Syndication (for 2.0 at least) ¤ Essential RSS 2.0 and ATOM 1.0 ¤ Other terms: Podcast, News Feed, etc… ¤ Integrated into new browsers but can also use

aggregators

¨ Geospatial Component (3 Flavors) ¤ W3C ¤ Simple ¤ GML


RSS = Real Simple Syndication (for 2.0 at least) Essential RSS 2.0 and ATOM 1.0 Other terms: Podcast, News Feed, etc… Integrated into new browsers but can also use

Geospatial Component (3 Flavors)


W3C Geo


Using the GeoXML

¨ Built in feature for “mashing-up” resources ¤ KML 2.0 and GeoRSS but more in the future ¤ Easy and quick ¤ Creates new GOverlay Object

¨ Pitfalls ¤ KML 2.0 Only ¤ GeoRSS Simple, W3C, GML ¤ Can’t be local (this means not exercise) ¤ Caching on Google Server

n Unknown refresh—hard to force refresh

¤ Minimal Control n Only interface with GOverLay as a whole

n Can’t manage individual objects such as markers


var kmlLayer = new GGeoXml("http://certmapper.cr.usgs.gov/googlemaps/demo4.2.kml"); …… map.addOverlay(kmlLayer);

GeoXML Object

up” resources but more in the future

as a whole Can’t manage individual objects such as markers


("http://certmapper.cr.usgs.gov/googlemaps/demo4.2.kml");


Demo and Exercise 4


Demo and Exercise 4



References

¨ Crane, D., Pacarello, E. (2006). Ajax in Action. Manning Publications Company.

¨ King, JJ. SOA What? Introduction to Service Oriented Architecture. Mountain Oracle Users Group. Denver, 2006.

¨ Gibson, R., and Erle, Schuyler. (2006). Google Maps Hacks: Tips and Tools for Geographic Searching and Remixing.


, E. (2006). Ajax in Action. Manning Publications

SOA What? Introduction to Service Oriented Architecture. Rocky Mountain Oracle Users Group. Denver, 2006.

, Schuyler. (2006). Google Maps Hacks: Tips and Tools for Geographic Searching and Remixing. O’Reily.



Web Resources

¨ API Home—http://www.google.com/apis/maps/documentation

¨ API Blog—http://googlemapsapi.blogspot.com/

¨ API Discussion Forum—http://groups.google.com/group/Google

¨ Google Maps API Change Log— http://groups.google.com/group/Google changes?version=10

¨ Google Maps Tutorial -- http://econym.googlepages.com/

¨ Gmaps Sample -- http://gmaps- samples.googlecode.com/svn/trunk/gdownloadurl_new/async_explain.htm

¨ ArcIMS WMS Connector Help -- http://webhelp.esri.com/arcims/9.2/general/

¨ WMS Javascript Library -- http://johndeck.blogspot.com/


http://www.google.com/apis/maps/documentation

http://googlemapsapi.blogspot.com/

http://groups.google.com/group/Google-Maps-API

http://groups.google.com/group/Google-Maps-API/web/api-version-

http://econym.googlepages.com/

samples.googlecode.com/svn/trunk/gdownloadurl_new/async_explain.htm

http://webhelp.esri.com/arcims/9.2/general/

http://johndeck.blogspot.com/


http://www.google.com/apis/maps/documentation

http://googlemapsapi.blogspot.com/

http://groups.google.com/group/Google-Maps-API

http://groups.google.com/group/Google-Maps-API/web/api-version-changes?version=10

http://econym.googlepages.com/

http://gmaps-samples.googlecode.com/svn/trunk/gdownloadurl_new/async_explain.htm

http://webhelp.esri.com/arcims/9.2/general/

http://johndeck.blogspot.com/

Google Maps API

Documents

Transcript of Google Maps API