Hands on with the Google Maps Data API and the Google Maps API v3
Shawn ShenMay 18, 2010
Maps Data API - Agenda
Introduction (10 min)Maps Javascript API V3Maps Data API
Lab and Demo (40 min)
Ossama, Mano, Luke, Josh, Daniel
What is Google Maps API V3?
The Google Maps V3 API lets you create interactive maps using just JavaScript, HTML and CSS.
What is Maps Data API
Google data infrastructure to store and retrieve geospatial data for your applications
Geospatial data: Latitude/LongitudeCustom data
Maps Data API = Google Data + Geo Signature
Use Google Data ProtocolREST-like technology GET/POSTFeeds
http://maps.google.com/maps/feeds/maps/default/full
Create/Read/Update/Delete
Geospatial and attribute queries
Radius searchBounding box search
Maps Data API: Geospatial Data Structure
Map: a layer or container of features
Features: data with location signaturePoint: Lat/LongPolylinePolygon
Maps Data Front End: My Maps Example
Use Cases of Maps Data API: My Locator
Maps Data API: Client Libraries
JavascriptJavaPython
Maps Data API Javascript Client Library
Google Account: https://www.google.com/accounts
Javascript client using common loader
// Load the latest version of the Google Data JavaScript Client google.load('gdata', '2.x', {packages: ['maps']});
Map Data API: Authentication in Javascript
Authentication of Web Client using AuthSub var scope = 'http://maps.google.com/maps/feeds'; Login: var token = google.accounts.user.login(scope); Check login: google.accounts.user.checkLogin(scope);
Logout: google.accounts.user.logout();
Map Data API: Add Map Layer
var service = new google.gdata.maps.MapsService('app'); var mapFeed = 'http://maps.google.com/maps/feeds/maps/default/owned'; service.getMapFeed(mapFeed, function(feedRoot){ var newMap = new google.gdata.maps.MapEntry(); newMap.setTitle(new google.gdata.atom.Text.create(...)); newMap.setSummary(...); feedRoot.feed.insertEntry(newMap, success, error);}, callback);
Map Data API: Add Feature to Map Layer
var service = new google.gdata.maps.MapsService('app'); service.getFeatureFeed(featureFeed, function(feedRoot) { var feature = new google.gdata.maps.FeatureEntry(); ...... kmlContent.setText(kmlString); kmlContent.setType(...); newFeature.setContent(kmlContent); feedRoot.feed.insertEntry(newFeature, success, error);}, callback);
Maps Data API Lab
Maps Data API Lab - Agenda
1. Javascript V3 map2. Authentication using AuthSub3. Add a map layer4. Add features to map layer and retrieve maps 5. Geospatial and attribute query
Codelab: http://bit.ly/d9Vr50
Maps Data API Lab - Hosting on App Engine
http://onebox.appspot.com
If you don't have your own server...
App Engine Hosting Demo
Resources and Links
Maps Data API:http://code.google.com/apis/maps/documentation/mapsdata/
Maps Data API: Javascript
http://bit.ly/fTV1K Google Data API Home:
http://code.google.com/apis/gdata/docs/developers-guide.html Maps Javascript API V3
http://code.google.com/apis/maps/documentation/v3/
#mapsdata @sshen @googlemapsapi
Wrap-up
Maps Data APIMy Locator: Your Favorite Location AppEarth/KML 101 coming up
#mapsdata @sshen @googlemapsapi
Thank You!
Top Related