Mashlet using Google Maps API version 3

I've been banging my head against this for a while.  It seems so simple, but I can't figure out what is going wrong. 

The Google Maps API Version 3 no longer requires an API key.  I don't really care if I have to register for a key, but v3 is now the officail release and v2 has been deprecated by Google:  http://code.google.com/apis/maps/documentation/javascript/basics.html#Welcome

I have created an insanely simple mashlet to test the Google Maps API.  I just copied their 'hello world' ( http://code.google.com/apis/maps/documentation/javascript/introduction.html#HelloWorld ) sample code into the mashlet structure and attempted to use mashlet.json to load the js resource.  I first loaded the sample code into a simple html page to verify that it works outside or the mashlet.  The maps API loads and works as expected in the html test.

When I use mashlet maker, "Create from Type" to create a mashlet from my type, I get a blank screen instead of the normal Preview.  Using Firebug or Inspect Element in Safari/Chrome, I see 2 javascript errors:

 

If I edit mashlet.json to exclude the Maps API, the mashlet renders correctly - obviously after removing any calls to maps.  It seems like there is some sort of collision between the version 3 maps API and the Presto libraries.  Anyone have any ideas about how to resolve this?

 

Thanks,

Glenn

Here's my entry in mashlet.json:

<mashletEntry>

 

"MyNamespace.Demo.GoogleMap": {

            "type": "MyNamespace.Demo.GoogleMap",

            "title": "Google Map Mashlet",

            "description": "Mashup Output containing Lat-Long plotted on a Google Map",

            "properties": {

                "sid": "DefaultMashupName",

                "oid": "runMashup",

                "mapWidth": "640",

                "mapHeight": "480"

            },

  

            "properties-meta": {

             "sid": {

             "type": "STRING",

             "description": "Service Name"

             },

             "oid": {

             "type": "STRING",

             "description": "Operation Name"

             },

             "mapWidth": {

             "type": "STRING",

             "description": "Width of Map Panel"

             },

             "mapHeight": {

             "type": "STRING",

             "description": "Height of Map Panel"

             }

            },

 

</mashletEntry>

And here's the code to my custom Mashlet Type - I've left a bunch of commented code where I was attempting to dynamically load the Google Maps API rather than using mashlet.json.  That method still results in one of the 2 errors noted above, although I think it is probably triggered on a different object.

<mashletCode>

 

//declare your namespace 

Ema.namespace("MyNamespace.Demo"); 

 

MyNamespace.Demo.GoogleMap = Class.create(Ema.BoxMashlet, { 

 

render: function(){ 

var sid = this.getPreference('sid');

var oid = this.getPreference('oid');

var mapWidth = this.getPreference('mapWidth');

var mapHeight = this.getPreference('mapHeight');

var scope = this;

 

this.bodyEl.innerHTML = '<div id="debugPane"></div><hr/><div id="mapPane" style="width:' + mapWidth + 'px;height:' + mapHeight + 'px;"/>'

 

//var mapScript = document.createElement('script');

//mapScript.type = 'text/javascript';

// mapScript.onreadystatechange= function(scr){

// return function(){

// if (scr.readyState == 'complete') this.mapReady();

// };

// }(mapScript);

//mapScript.onload = this.mapReady(scope);

//Ext.get(mapScript).on("readystatechange",function(){if (this.readyState == 'complete') this.mapReady(scope);});

//mapScript.src = 'http://maps.google.com/maps/api/js?sensor=false';

//document.getElementsByTagName("head")[0].appendChild(mapScript);

//var dh = Ext.DomHelper;

//var tpl = dh.createTemplate({tag: '{0}', type:'{1}', src:'{2}'});

//tpl.append(document.getElementsByTagName("head")[0], ['script', 'text/javascript', 'http://maps.google.com/maps/api/js?sensor=false' ]);

//tpl.append(this.bodyEl, ['script', 'text/javascript', 'http://maps.google.com/maps/api/js?sensor=false' ]);

},

afterRender: function(){

var sid = this.getPreference('sid');

var oid = this.getPreference('oid');

var mapWidth = this.getPreference('mapWidth');

var mapHeight = this.getPreference('mapHeight');

 

var dh = Ext.DomHelper;

var tpl = dh.createTemplate({tag: 'div', id:'debugDiv{0}', html:'<b>{1}: </b> {2}'});

tpl.append($('debugPane'), ['1', 'sid', sid ]);

tpl.append($('debugPane'), ['2', 'oid', oid ]);

tpl.append($('debugPane'), ['3', 'mapWidth', mapWidth ]);

tpl.append($('debugPane'), ['4', 'mapHeight', mapHeight ]);

this.execute();

},

execute: function(){

var sid = this.getPreference('sid');

var oid = this.getPreference('oid');

var mapWidth = this.getPreference('mapWidth');

var mapHeight = this.getPreference('mapHeight');

 

$('debugPane').innerHTML += '<div>Mashlet.execute run...</div>';

 

// var latlng = new google.maps.LatLng(-34.397, 150.644);

//

// var myOptions = {

//      zoom: 8,

//      center: latlng,

//      mapTypeId: google.maps.MapTypeId.ROADMAP

//    };

//    

// var map = new google.maps.Map($("mapPane"), myOptions);

 

},

mapReady: function(scope){

$('debugPane').innerHTML += '<div>Mashlet.mapReady run...</div>';

 

scope.execute();

},

onRefresh: function(){

this.execute();

}

});

 

</mashletCode>