May 19, 2010 - Comments Off on Live blogging Google I/O: Stepping up: Porting v2 JavaScript Maps API applications to v3

Live blogging Google I/O: Stepping up: Porting v2 JavaScript Maps API applications to v3

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 =>
V3 =>

(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


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


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

3.3K, 0.7K
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.


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.

MIgration tips


No more API key

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, 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 = [];

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

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

* 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


* 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

Check out this one:

There's a Twitter search demo (not covered)

Topics not covered


Street view is now available in V3. No Flash.

Get qualified:

Published by: jeffreybarke in The Programming Mechanism

Comments are closed.