Google maps data type throws Type Error: can't convert undefined to object

Question

In all our Umbraco websites Google maps data type is not working anymore. This worked perfect till yesterday but today there is only the input-field and the location-field and not the Google maps...

Firebug reports the following error

Error: TypeError: can't convert undefined to object Source File: http://mydomain.com/WebResource.axd?d=tKK1ZgJBCMotVXJtV8pR9xzMqTmklCMezxGDl1po1iuUqd9OAFswOEzHFzCaf_jVz-AUweHtY9QXIBqtRjeITKZJW8DsgNEfWr5d43rOLcGkPLOTDqcjla1Kf5Atxrk4V0fVru8i1i6pj_kgbZvebWAyHrkbCDipPWDziYWT-lCHW-WaHOcz5hS1DefZvkJSICxqjpdChghoCUZhju3cHg2&t=634759042640000000&cdv=1 Line: 212

Its in the line

context._maps[id] = new UmbracoGoogleMap.map(id, this);

in the following function

guiMap: function () {
    var context = this;
    this._apiLoaded = true;
    jQuery('div.gmapContainer').each(function () {
        var id = jQuery('div.map', this).attr('id');
        context._maps[id] = new UmbracoGoogleMap.map(id, this);
        context._maps[id].render();
    });
},

There is a lot of other people also reporting the same issue but couldn't find a solution yet! http://our.umbraco.org/projects/backoffice-extensions/google-maps-datatype/bug-reports/33390-No-map-in-Backend

Answer 1

Looks like the problem was to do with the context. It was being set to the window rather than the UmbracoGoogleMapMapDataType as "this" pointing to the wrong place. So I tried:

var context = UmbracoGoogleMapMapDataType;
this._apiLoaded = true;
jQuery('div.gmapContainer').each(function () {
    var id = jQuery('div.map', this).attr('id');
    context._maps[id] = new UmbracoGoogleMap.map(id, this);
    context._maps[id].render();
});

And that now seems to work as a temporary patch. If you want you can download the dll from https://www.dropbox.com/s/3aj91cuzxn3rcbu/Our.Umbraco.GoogleMaps.zip

Answer 2

We did some digging in to why the error came about and apparently it's due to an update of the Google Maps Javascript API. We found that the permanent fix was to request a specific version of the API, by adding a v: "3.8" to the ajax request:

UmbracoGoogleMap.loadMapsApi = function (cb) {
    jQuery.ajax({
        type: "get",
        dataType: "script",
        url: 'http://maps.google.com/maps/api/js',
        data: {
            v: "3.8",
            sensor: false,
            callback: cb
    },
    error: function () { alert('Could not load Google Maps API'); }
});

According to the documentation, if no version is specified, then Google returns the latest nightly version. In fact, they specifically state that:

Production applications should always specify a minor version (eg. 3.7, 3.8, etc.).

As we can see the latest version of 3.9 has broken compatibility with the Google Maps data type and thus the error.

Update: Version 2.0.5 of the Google Maps DataType is now available and contains the above fix. Thanks to Lee Kelleher!