Google Maps API

GOOGLE MAPS API
USGS GIS Workshop 2008
Introduction To the Google Maps API By Gregory L. Gunther
Importance of Google Maps API

Gateway to the Geoweb 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 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 directoriesusually a host usually 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 Continued
Trick
V=2 Current 2.77 V=2.xLatest 2.88 V=2.77Fixed to specific version Fixed
http://groups.google.com/group/Google-Mapshttp://groups.google.com/group/Google API/web/api-version-changes?version=10 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

Terms of Use (Back in 2007)
No limit on page views
Request notification if over 500,000
Limit of 50,000 geocode requests per day Does not include advertising YET!!! Must be available to the public
Google Maps for Enterprise Internally
Cant 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).
Google Maps Hello World

<scriptsrc="http://maps.google.com/maps?file=api&v=2&key=..... ="http://maps.google.com/maps?file=api&v=2&key=..... type="text/javascript"></script> functionload(){ if(GBrowserIsCompatible()){ varmap=newGMap2(document.getElementById("map")) map.setCenter(newGLatLng(37.4419, map.setCenter(newGLatLng(37.4419,122.1419),13) } } <body onload=load()></body> <div id="map" style="width: 500px; height: 300px"></div>
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 ( 13) (): (ie. Call function which loads map using onLoad event in body Critical body
Quick Demo and Exercise 2
Overlays Adding Your Own Data
Points, lines, Polygons, InfoWindow
XML, JSON, REST API Not AJAX 3rd Party Some other work arounds>>Not Native >>Not Really just XML Parsing
KML, GeoRSS (GGeoXML Google Server Upload)
WMS

GML (Open Layers)
ArcGIS (9.3 JS API Preview) Others???

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); 79.90138); var marker = new GMarker(point); map.addOverlay(marker);
Custom Marker Icons

var icon = new GIcon(); icon.image = "http://.../ridefinder/images/mm_20_red.png"; /images/mm_20_red.png"; icon.shadow = "http://.../ridefinder/images/mm_20_shadow.png"; /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); (5, . map.addOverlay(new GMarker(point, icon)); (point,
Polylines and Polygons
GPolygon(points, strokeColor strokeWeight?, strokeColor?, strokeOpacity?, fillColor?, fillOpacity fillOpacity?) GPolyline(points, color?, weight?, opacity?) (points, IE Requires VML Namespace
<html xmlns="http://www.w3.org/1999/xhtml" ="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml com:vml"> var pl = new GPolyline([new GPoint(-107.395492, 42.893307 107.395492, 42.893307), new GPoint(-107.398249, 42.891117)], 107.398249, "#EC4F18", 4, 1); map.addOverlay(pl);
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)
marker.openInfoWindow(document.createTextNode document.createTextNode("Hello, world"));
#2 openInfoWindowHTML(HTML content)
marker.openInfoWindowHtml("Marker #<b>" + number + "</b>"); ("Marker
#3 openInfoWindowHTMLTab (Tab Title, Content)
var infoTabs = new GInfoWindowTab("Tab #1", "This is tab #1 content"); ("Tab marker.openInfoWindowTabsHtml(infoTabs 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 document.getElementById("map")); GEvent.addListener(map, "click", function() { (map, alert("You clicked the map."); }); OR GEvent.addListener(marker, "click", function() { (marker, marker.openInfoWindowHtml(<b>Hello World</b>); (<b>Hello });
Gmap Events
Gmap Events
Adding XML Overlays AJAX
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). , 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
Source:Crane,etal.2006
AJAX is based on JavaScript and HTTP

Adding XML Overlays AJAX
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). , 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
Source:Crane,etal.2006
AJAX is based on JavaScript and HTTP

AJAX vs. Traditional Website Analog

Traditional Web Application Analog
AJAX Rich Web Application Analog
Source:Crane,etal.2006 USGS GIS Workshop 2008
Gmaps Implementation of AJAX
GDownloadURL
Easiest and simplest

n
Function(data,responseCode)
n
Where response code is HTTP response code from server Usually 200 if successful
GDownloadUrl("example.xml", function(data, responseCode) { ("example.xml", if (responseCode == 0){ var xml = GXml.parse GXml.parse(data); . Parse Data using DOM. map.addOverlay(marker)); (marker)); } });
Can also GXmlHttp

More like XMLHttpRequest Object Able to check the state of the request little better
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
Parsing XML using DOM.
getElementsByTagName () returns all DOM nodes as array getAttribute() returns value of specified attribute for a particular DOM node parseFloat(string)parse a string into float parse
var markers = xml.documentElement.getElementsByTagName xml.documentElement.getElementsByTagName("marker") for (var i = 0; i < markers.length; i++) { var point = new GLatLng(parseFloat parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); parseFloat map.addOverlay(new Gmarker(point)); (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
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 up complementary elements from two or more sources. Mash Mash-ups are often created by using a development approach called Ajax.
Mashup Resources
Typically Web Services
Services are reusable units providing business functionality that are:

n n n n
Clearly defined using standard policies, practices, and frameworks Clearly described (xml) Autonomous 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 REST, SOAP, WMS, WFS, ArcXML Images, Generic XML, KML, GeoRSS GML, etc GeoRSS,
Source: ArcIMSWMSConnectorHelp
Protocols
Encodings
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 like simultaneously from multiple remote and heterogeneous sources Geospatial data response encoded as image Version 1.3 Developed as part of the Web Mapping Testbed project (WMT)
Source:King2006
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
Source: ArcIMSWMSConnectorHelp
Implementing WMS Mashups

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

Custom Layers via GTileLayer Interface ( (GmapType) Constants
wms236.js Library Implementation

wms236.js var myDOQQLayer= new GTileLayer(new GCopyrightCollection GCopyrightCollection(""),1,17); myDOQQLayer.myBaseURL='http://terraservice.net/ogcmap.ashx?' ='http://terraservice.net/ogcmap.ashx?' Constructs tiles, handles projections myDOQQLayer.myLayers='doq'; myDOQQLayer.myFormat='image/gif; Input myDOQQLayer.getTileUrl=CustomGetTileUrl CustomGetTileUrl;
WMS getMap URL n Service Name var layer1=[G_HYBRID_MAP.getTileLayers()[0], myDOQQLayer]; ()[0], n Format
n
var custommap1 = new GMapType(layer1, G_SATELLITE_MAP.getProjection(), DOQQ"); (layer1, map.addMapType(custommap1);
Source:WMSJavascriptLibrary USGS GIS Workshop 2008
KML Keyhole Markup Language
New OGC standard V 2.2 (HTML for the Geoweb)

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
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
W3C Geo
Using the GeoXML Object

var kmlLayer = new GGeoXml("http://certmapper.cr.usgs.gov/googlemaps/demo4.2.kml"); ("http://certmapper.cr.usgs.gov/googlemaps/demo4.2.kml"); map.addOverlay(kmlLayer);
Built in feature for mashing-up resources up

KML 2.0 and GeoRSS but more in the future Easy and quick Creates new GOverlay Object KML 2.0 Only GeoRSS Simple, W3C, GML Cant be local (this means not exercise) Caching on Google Server
n
Pitfalls

Unknown refreshhard to force refresh Only interface with GOverLay as a whole

n
Minimal Control
n
Cant manage individual objects such as markers
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. Rocky Mountain Oracle Users Group. Denver, 2006. Gibson, R., and Erle, Schuyler. (2006). Google Maps Hacks: Tips and Tools , for Geographic Searching and Remixing. OReily.
Web Resources

API Homehttp://www.google.com/apis/maps/documentation http://www.google.com/apis/maps/documentation API Bloghttp://googlemapsapi.blogspot.com/ http://googlemapsapi.blogspot.com/ API Discussion Forumhttp://groups.google.com/group/Google http://groups.google.com/group/Google-Maps-API Google Maps API Change Log http://groups.google.com/group/Google-Maps-API/web/api-versionhttp://groups.google.com/group/Google changes?version=10 Google Maps Tutorial -- http://econym.googlepages.com/ Gmaps Sample -- http://gmapssamples.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/

Google Maps API

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Google Maps API

Hochgeladen von

Copyright:

Verfügbare Formate

GOOGLE MAPS API

USGS GIS Workshop 2008

Introduction To the Google Maps API By Gregory L. Gunther

Importance of Google Maps API

Version 1 required Mashup with other geocoding service

USGS GIS Workshop 2008

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

Google Maps Key

Requires Google Account and is free

Generic for local file system (no server, I think???)

USGS GIS Workshop 2008

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

Google Maps Key Continued

http://groups.google.com/group/Google-Mapshttp://groups.google.com/group/Google API/web/api-version-changes?version=10 changes?version=10 Reserves the right to upgrade at any time

Will implement bug fixes transparently

Refer to discussion forum for help

USGS GIS Workshop 2008

Terms of Use (Back in 2007)

No limit on page views

Request notification if over 500,000

Google Maps for Enterprise Internally

USGS GIS Workshop 2008

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

USGS GIS Workshop 2008

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

Google Maps Hello World

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

Quick Demo and Exercise 2

USGS GIS Workshop 2008

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

Overlays Adding Your Own Data

Points, lines, Polygons, InfoWindow

KML, GeoRSS (GGeoXML Google Server Upload)

GML (Open Layers)

ArcGIS (9.3 JS API Preview) Others???

USGS GIS Workshop 2008

Point on a map Added Using GMarker Object

Uses default G_DEFAULT_ICON

create custom icons

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

Custom Marker Icons

USGS GIS Workshop 2008

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

Polylines and Polygons

USGS GIS Workshop 2008

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

USGS GIS Workshop 2008

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

InfoWindows with Markers

#1 openInfoWindow (DOM Node)

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

#3 openInfoWindowHTMLTab (Tab Title, Content)

USGS GIS Workshop 2008

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

Events and Event Listeners

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

USGS GIS Workshop 2008

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

USGS GIS Workshop 2008

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

Adding XML Overlays AJAX

AJAX stands for Asynchronous JavaScript And XML.

AJAX is based on JavaScript and HTTP

USGS GIS Workshop 2008