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!