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
