Daniels Lee

Session Goals
* Summarize V2
* Why V3
* Migration Planning
* MIgration Tips
* Questions

Google Geo API landscape

(Really need to get this diagram--difficult to summarize)

Summary of V2

* Browser support: IE6+, FF2+, Safari 3.1+, Chrome
* Over 350K active sites
* Versioning system: v=2.s, v=2, v=2.x
* Utility libraries: MarkerClusterer, DragZoom, etc.
* Strong developer community (~43K members)

V2: Strong feature set

* Street view
* Traffic overlays
* Google Earth plugin
* KML/KMZ/GeoRSS layers
* Tile overlays
* Custom map types
* Monetization: GGoogleBar, GAdsManger
* Aerial imagery
* Directions
* Geocoder

Demo: V2 and V3, side by side

1. Map on mobile:
V2 => http://goo.gl/j5Qq
V3 => http://goo.gl/DWEA

(Do some demos and benchmarks)

Nice marker demo. 750 markers take 2213 ms to load V2. Same demo with V3. 750 markers take 1320 ms.

Demo also uses the MarkerClusterer library, because we shouldn't be using 1000 markers. Much faster for both, but again, faster with V3.

What are some problems with V2?

* Not optimized for mobile
* Older design: GMap, GMarker, GControl, GLatLng
** GMap has gotten extremely large and bloated
** Globals
* Large JavaScript file sizes
* Requires a maps API key

V2

File, Size, Gzip
loader, 16.4K, 5.1K
main.js 184.4K, 66.0K
-tiles45.5.K, 15.1K-
etc.

V3

* Mobile browser support: Android, iPhone
* Performance
* New architecture: MVC
* Better namespacing: google.maps.*
* New features: biking directions, elevation service

3.3K, 0.7K
37.1K,13.8K
tiles 38.6K, 12.8K (reverse tile time)

Maps API v3 launched at Google I/O 2009
So it's a year-old and a lot of features have been added since then. The goal is full feature parity with version 2.

Announcements

They have shirts! But really,

* v3 graduating from Google Code Labs!
* v2 deprecation (3+ year support plan)

V3 Summary

* Browser support: IE7+, FF3+, Safari4+, Chrome, Android
* New versioning scheme: v=3, v=3.1
* Utility libraries: MarkerClusterer, InfoBox, KeyDragZoom
* Growing developer community (~15K members)

No explicit IE6 support. Should work in IE6, but …

V3 features

* Core objects: map, markers, info windows, polys
* Custom overlays, controls, tiles.
* Geocoder
* Directions service
* KML/KMZ/GeoRSS layers
* Traffic layers

New features:
* Bicycling layer
* Elevation service
* Rectangle/circle overlays

Porting challenges

* Feature parity
* Syntactical changes, e.g. namespace
* Overlays => Map, not the reverse
** Prevents map object from growing very large
* New Geocoder request/response specification
* New Directions service + renderer

In V2, gave direct access to tile layer. In V3, no direct access to tile layer. Not sure if this is scheduled or not planned.

Migration planning

* What API features does my V2 application use?
** Break down your existing application; list features and use cases.
* Which features are available in V3?
** If the feature isn't available in V3 yet, then file a feature request/bug
* Take baby steps; start small, build upon it.

http://code.google.com/p/gmaps-api-issues/

MIgration tips

Basics:

No more API key
src="http://maps.google.com/maps/api/js?sensor=true"

Sensor parameter is required

Code example (get)

* No GBrowserCompatible
* Required fields: mapTypeId, zoom, center
* Map options specification
* GMap2 => google.maps.Map

* Map knows nothing about what overlays it holds
* Overlays add/remove themselves to map, not the reverse

V2 Map.addOverlay(Marker)
V2 Mapp.removeOverlay(Marker)
V3 Marker.setMap(Map)
V3 Maker.setMap(null)

Avoids bloating the google.maps.Map object with add/remove functions
Initial download size stays small

V2 map.openInfoWindowHtml()
V3 infoWindow.open(map, marker);
v3 infoWindow.close();

Problem: how to remove all overlays from a map?
Maintain your own collection of overlays added to the map
On clear, unbind each overlay using setMap(null)

I prefer this anyway.
var overlays = [];
overlay.push(marker);

Info windows are now lightweight.
Can now add an infinite infowindows to map, v2 could only have one.
Same as overlays; can now have more than one.

Problem: I only want a single info window!

Create one global infowindow object. Just update its position, content and map.

Custom controls

* No GControl class
* Custom controls are just HTML elements: document.createElement('div')
* Familiar concept

Requesting directions

V2:
* Single map/HTML container per GDirections object
* Single request
* Event listener to know when request completes

V3:
* Modular interface consistent with overall API design
* Start/end point properties
* Separate data from rendering
* Renderer settable to any Map and HTML element

Appears to be more complicated (well, is somewhat more complicated) Need slide to see diagram

Can pass in options like avoidHighways, avoidTolls.

* Pass direction results to renderer
* Renderer uses a standard default UI

or

* Process DirectionsResult on your own.

Migration tips: MVC

* Isolates data from input and presentation
* Write more efficient code
* Use binds to keep MVC properties in sync

* Know what model properties are bindable
* Common properties: Map, LatLng, zIndex, color
* Extend MVCObject to create your own custom objects

Can bind a circle overlay to a marker. Why? A marker is draggable, bu the circle is not. Can use an MVC binding here.
Without MVC, could bind an event listener.
With MVC, circle.bindTo('center', marker' ...)

Can bind overlay to map, map to map.

BTW, demos can be viewed at http://gmaps-samples-v3.googlecode.com/svn/trunk/io-2010-migration/

Check out this one: http://gmaps-samples-v3.googlecode.com/svn/trunk/io-2010-migration/multi-map-binds.html

There's a Twitter search demo (not covered)

Topics not covered

Geocoder
Polygons/polylines
...

Street view is now available in V3. No Flash.

Get qualified: http://code.google.com/quality

Vic Gundotra, VP of Google

Google search volume for HTML5 has increased by a lot since last year's Google I/O.

There is supposed to be a surprise for tomorrow's 8:30 am keynote

Sundar Pichai, Google VP

From 2004-2009, +117% time spent on web vs every other information medium has remained the same or declined.

2004, web changed from documents to applications. Web applications started replacing desktop applications.
Computers ship with powerful GPUs, how can web app access? APIs to access workers, local filesystem.

24 months ago, no Chrome. 12 months later, a lot more APIs implemented by a lot more browsers. By end of year, all major APIs are going to be present in all modern browsers (except IE, which will have some)

More mobile searches hit Google with HTML5-enabled mobile browsers than non-HTML5 mobile browsers.

Charles Pritchard, MugTug

Application called Darkroom. HTML 4, app was bandwidth intensive. Using HTML5, moves to the client-side. Local storage. Quick to load, quick to close and quick to use. Previewing on latest build of Chrome.

Built using JavaScript and Canvas.

Jim Lanzone, Clicker

For TV. Clicker.tv. Canvas, web worker threads. Just start typing, no need to use the search box. Nice demo.

Google thinks video should be high quality and open. Spent a lot acquiring On2.

Announcing today, completely open sourcing VP8. Royalty-free. Project London well built; high-quality video built into platform with full-screen capability. Nightly builds available now.
http://nightly.mozilla.org/webm

Hakon, Opera

Tim didn't patent HTML, Hakon didn't patent CSS, Brendan didn't patent JavaScript

http://labs.opera.com/
Download Opera with webm support in it at above URL.

Hakon's demo, only img is from video. Rest is CSS, canvas. CSS transitions.

To web community, we need to start using this. To Google, thank you for getting webm off the ground and releasing it.

Kevin Lynch, Adobe CTO

Adobe is supporting HTML5.

1. Dreamweaver CS5 will include multi-screen preview to see how it displays across different devices. Same HTML5 markup, but with different stylesheets attached. Code completion for HTML5. Support for transitions and better preview mode.
2. Enabling better authoring tool support for HTML5, CSS3, SVG.
3. Going to embed VP8 codec in Flash player.

Problems that remain

Difficult for people to locate web applications. Since 2004, the main way that applications are getting written. No way to get ratings, reviews, etc. Unlike old physical stores or other site reviews. Easier to locate apps on mobile stores.

Developers need discovery, reach and monetization.

Chrome Web Store

Terry McDonell, Editor, Sports Illustrated

Omg. Sports Illustrated. Demoing an HTML5 version of SI via the Chrome App Store. Tightly edited, curated, free take on sports you can customize by re-arranging it. Looks good, but why free?

At the last moment, mentioned the ability to charge for it. Which makes sense.

Chrome has gone from 30 million to 70 million users since July 2009.

Chrome Web Store is coming soon. Chrome + Chrome OS. 40+ languages supported.

Lars Rasmussen

Google Wav is open today. Time to revisit. I remember not really liking wave when I played with it last year.

The in-browser editor is getting open-sourced today.

David Glazer, Engineering Director, Google

More web applications at work. Social software, transportation mgmt, supply chain planning, talent mgmt, travel booking system, warehouse mgmt, etc.

1. It takes too long to build apps
2. Employees work everywhere, on all devices.
3. Apps are trapped
4. Too many apps to manage

Fast and familiar development, bovile-ready, flexible deployment, powerful app management

Google <3 VMware