Upgrading from Google Maps API v2 to v3

I was recently asked to upgrade the Google Maps api in one of our website from version 2 to version 3. I wasn’t involved on the initial development and had no previous exposure to this or any Mapping API. Being mostly a back-end developer, I am also not a JavaScript expert.

I found that the available documentation was very scattered and so I thought it would make sense for me to share my experience in hopes to help others going through the same process.

The new URL

This is the easiest part of the process. Replace your old script url:

<script src=”http://maps.google.com/maps?file=api&v=2&key=${map_key}&sensor=false&oe=utf8&hl=en”></script>

With the new one (adjust your sensor parameter accordingly):

<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script&gt;

No More Gs… the easy ones

This piece of knowledge can actually take you a long way. For many of the v2 classes, all you have to do is drop the G at the beginning of the name and add the now required namespace “google.maps”. In my experience this was the case with the following classes:

 

V2	V3
GMarker	google.maps.Marker
GLatLngBounds	google.maps.LatLngBounds
GLatLng	google.maps.LatLng
GEvent	google.maps.Event

 

The not so literal

V2	V3
GMap2	google.maps.Map
GIcon	google.maps.MarkerImage

 

The definitely not literal

InfoWindow

V2	V3
In v2, the infoWindow was a method of the GMarker.   var maker = new GMarker(…) maker.openInfoWindowHtml(“info”)	The new InfoWindow in v3 is an independent object and its ‘open’ method needs to know what map and what marker to be associated with:   var map1 = google.maps.Map(…) var marker1 = google.maps.Marker(…) var infoStr = ‘hello’; var infowindow = new google.maps.InfoWindow({     content: infoStr }); infowindow.open(map1, marker1);

 

Fitting bounds

If you are plotting different markers in one map, you will need to make sure that the map is displayed and zoomed appropriately to display all your markers.

The first part of the process remains the same for both versions. Each time you create a new marker you add it’s location to a bounds object by calling it’s extend method, the second part is where things change more drastically, the getBoundsZoomLevel method available in GMap2 is not there on the new google.maps.Map object. However a simpler fitBounds() method is available.

V2	V3
aMap2.setZoom(aMap2.getBoundsZoomLevel(bounds));	aMap.fitBounds(bounds);

 

The ones that didn’t make the cut

Some of the easier way of doing things have been eliminated probably in an effort to reduce memory leaks and cross-browser support.

	V2	V3
Clearing overlays	In version 2 we could clear all the infoWindows simply by calling clearOverlays() on the GMap2 object:   var aMap = new GMap2(…); aMap.clearOverlays();	In version 3 we need to keep track of our infoWindow objects and invoke the close method on each individually:   var infowindow = new google.maps.InfoWindow(…); infowindow.open(…) … infowindow.close();
Checking for browser support for the api	In version 2 we could simply say:   If (GBrowserIsCompatible()) { … }	Unfortunately version 3 does not provide a replacement for GBrowserIsCompatible(). Such functionality would need to be implemented by the user. They do document that the api is supported by the following browsers: * IE 7.0+ (Windows) * Firefox 3.0+ (Windows|Mac OS X|Linux) * Safari 4+ (Mac OS X|iOS) * Chrome (Windows|Mac OS X|Linux) * Android * BlackBerry 6 * Dolfin 2.0+ (Samsung Bada)

 

In general, it wasn’t a difficult experience. The new version of the API seems to work at least just as well as the previous one. Several new features are available. In our case, we are only taking advantage of the new map views (satellite, hybrid, terrain) which are showed by default.