Converting Google Maps v2 to v3

Problem:

I was given a project where the client switched from using http to https.  Everything worked fine except for their Google Maps page.  The page  had a warning in IE about unsecure mixed content.  This was because Google Maps was pulling from an http (unsecured) address.  It turns out that the Map was using version 2 of Google Maps API which does not support https.  Only version 3 does.

Solution:

Don’t be fooled into thinking this is a straight forward, simple upgrade.  It is not.  This solution is just a log of what I did to get the site from v2 up to v3.  It is in no way  a complete guide.  The site used EWindow instead of the infoWindow because of its customized look.  So I guess the following could be a rough step-by-step guide to converting the Ewindow script to v3.

In general you’ll need to replace all “G” prefixes like “GSize” with “google.maps” like “google.maps.Size”.

Replace GSize with google.maps.Size
Replace GLatLng with google.maps.LatLng
Replace GPoint with google.maps.Point
Replace GOverlay with google.maps.Overlay

Replace “new google.maps.Overlay” with “new google.maps.OverlayView()”

Take out or replace GBrowserIsCompatible. There is no equivalent function in v3.

Replace

map = new GMap2(document.getElementById("map_canvas"))

with something like:

    var myOptions = {
      zoom: 4,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

Replace a custom icon marker using the icon-complex example:
http://code.google.com/apis/maps/documentation/javascript/examples/icon-complex.html

Before the change:

var tinyIcon = new GIcon();
tinyIcon.image = "images/gmap/marker.gif";
tinyIcon.iconSize = new google.maps.Size(22, 22);
tinyIcon.iconAnchor = new google.maps.Point(11, 11);
tinyIcon.infoWindowAnchor = new google.maps.Point(0, 0);
var myLatLng = new google.maps.LatLng(loc['lat'], loc['lng']);
var marker = new GMarker(myLatLng, { icon:tinyIcon });
GEvent.addListener(marker, showWindow, mouseover);
map.addOverlay(marker);

After:

var image = new google.maps.MarkerImage('images/gmap/marker.gif',
  // This marker is 20 pixels wide by 32 pixels tall.
  new google.maps.Size(22, 22),
  // The origin for this image is 0,0.
  new google.maps.Point(0,0),
  // The anchor for this image is the base of the flagpole at 0,32.
  new google.maps.Point(11, 11));
 
var myLatLng = new google.maps.LatLng(loc['lat'], loc['lng']);
var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    shadow: shadow,
    icon: image
});
google.maps.event.addDomListener(marker,'mouseover', showWindow);

Replace getPoint to getPosition

var vx = marker.getIcon().iconAnchor.x - marker.getIcon().infoWindowAnchor.x;
var vy = marker.getIcon().iconAnchor.y - marker.getIcon().infoWindowAnchor.y;
this.openOnMap(marker.getPoint(), html, new google.maps.Point(vx,vy));

For infoWindowAnchor I could not find an equivalent so I scratched the whole calculation and just put in a hard coded value.

var vx = 10;
var vy = 10;
this.openOnMap(marker.getPosition(), html, new google.maps.Point(vx,vy));

Replace initialize:

EWindow.prototype.initialize = function(map) {

With onAdd:

EWindow.prototype.onAdd = function() {

Replace map.addOverlay(object) by moving a similar call to within the object.

map.addOverlay(ewindow)

To this within the object:

this.setMap(map)

Replace map.getPane()

map.getPane(G_MAP_FLOAT_SHADOW_PANE)

With this:

this.getPanes().mapPane

Replace this.redraw

this.redraw

with this.draw

this.draw

Replace Overlay.getZindex

var z = google.maps.Overlay.getZIndex(this.point.lat());

I could not find an equivalent to getZIndex so, again, it’s somewhat hard coded.

// you may need to work on this "hack" to replace V2 getZindex
// GOverlay.getZIndex(this.point.lat());
var z = 1000*(90-this.point.lat());
this.div_.style.zIndex = parseInt(z);

Replace this.map.fromLatLngToDivPixel

var p = this.map.fromLatLngToDivPixel(this.point);

With this:

var proj = this.getProjection();
var p = proj.fromLatLngToDivPixel(this.point);

Replace map.panBy(Size) to map.panBy(x:number, y:number)

map.panBy(new google.maps.Size(pan_right, pan_up));

With this:

map.panBy(-pan_right, -pan_up);

A very helpful site was one that made google maps compatible for both versions:
http://notebook.kulchenko.com/maps/google-maps-using-multiple-api-versions

And of course the Google Maps v3 Examples and API docs helped a great deal.  It may also help to look at version 2 of the API so that you can try and find something equivalent.

I uploaded a converted EWindow.js for whoever needs a google maps v3 version of EWindow.