Upgrading from Google Maps API v2 to v3

Standard

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.

Advertisements

4 thoughts on “Upgrading from Google Maps API v2 to v3

  1. Howdy very cool blog!! Man .. Excellent .. Superb .. I’ll bookmark your
    website and take the feeds also? I’m happy to search out so
    many helpful information here within the put up, we need work out extra
    strategies in this regard, thanks for sharing. . . . .
    .

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s