Google Maps API V3 usage in addon - google-maps

Question

I have learned to use the API V3 making use of HTML + JavaScript, as I did here: http://jsfiddle.net/hCymP/4/
HTML:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
JAVASCRIPT:
var mapContainer = document.createElement('div');
mapContainer.setAttribute('style',"width: 500px; height: 300px");
document.body.appendChild(mapContainer);
var mapOptions = {
center: new google.maps.LatLng(-35.000009, -58.197645),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapContainer,mapOptions);
but now I need to move it to a firefox addon (it's a "Firefox for Android" addon but I think this problem can be applied to desktop addon too and chrome addons).
The problem is you need to do everything via javascript in addons, so I can not include the following line:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
SO I try to resolve that with loadSubScript, but it returned an empty div:
Components.utils.import("resource://gre/modules/Services.jsm");
Services.scriptloader.loadSubScript("https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false", window, "utf8");
var mapContainer = window.content.document.createElement('div');
mapContainer.setAttribute('id', "map");
mapContainer.setAttribute('style',"width: 250px; height: 250px");
var mapOptions = {
center: new window.google.maps.LatLng(latitude, longitude),
zoom: 5,
mapTypeId: window.google.maps.MapTypeId.ROADMAP
}
var map = new window.google.maps.Map(mapContainer,mapOptions);
return mapContainer;
So I tryed looking inside https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false to "copy" that code and call it from my addon. And I downloaded the Google Maps Api file and I included into my project to be able to retrieve the catch errors... But returned me an empty div too:
Components.utils.import("resource://gre/modules/Services.jsm");
// Same as HTML <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
window.google = window.google || {};
window.google.maps = window.google.maps || {};
var modules = window.google.maps.modules = {};
window.google.maps.__gjsload__ = function(name, text) { modules[name] = text;};
window.google.maps.Load = function(apiLoad) {
delete window.google.maps.Load;
apiLoad([0.009999999776482582,[[["https://mts0.googleapis.com/vt?lyrs=m#227000000\u0026src=api\u0026hl=en-US\u0026","https://mts1.googleapis.com/vt?lyrs=m#227000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m#227000000"],[["https://khms0.googleapis.com/kh?v=134\u0026hl=en-US\u0026","https://khms1.googleapis.com/kh?v=134\u0026hl=en-US\u0026"],null,null,null,1,"134"],[["https://mts0.googleapis.com/vt?lyrs=h#227000000\u0026src=api\u0026hl=en-US\u0026","https://mts1.googleapis.com/vt?lyrs=h#227000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"h#227000000"],[["https://mts0.googleapis.com/vt?lyrs=t#131,r#227000000\u0026src=api\u0026hl=en-US\u0026","https://mts1.googleapis.com/vt?lyrs=t#131,r#227000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t#131,r#227000000"],null,null,[["https://cbks0.googleapis.com/cbk?","https://cbks1.googleapis.com/cbk?"]],[["https://khms0.googleapis.com/kh?v=80\u0026hl=en-US\u0026","https://khms1.googleapis.com/kh?v=80\u0026hl=en-US\u0026"],null,null,null,null,"80"],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["https://mts0.googleapis.com/vt?hl=en-US\u0026","https://mts1.googleapis.com/vt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/loom?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"https://maps.gstatic.com/mapfiles/","https://csi.gstatic.com","https://maps.googleapis.com","https://maps.googleapis.com"],["https://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/11","3.13.11"],[2256293068],1.0,null,null,null,null,0,"",null,null,1,"https://khms.googleapis.com/mz?v=134\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"https://mts.googleapis.com/vt/icon"], loadScriptTime);
};
var loadScriptTime = (new window.Date).getTime();
//I can't use document.write but use loadSubScript insthead
Services.scriptloader.loadSubScript("chrome://googleMaps/content/Google-Maps-V3.js", window, "utf8"); //chrome://MoWA/content/Google-Maps-V3.js", window, "utf8");
var mapContainer = window.content.document.createElement('div');
mapContainer.setAttribute('id', "map");
mapContainer.setAttribute('style',"width: 500px; height: 300px");
mapContainer.style.backgroundColor = "red";
var mapOptions = {
center: new window.google.maps.LatLng(latitude, longitude),
zoom: 5,
mapTypeId: window.google.maps.MapTypeId.ROADMAP
}
var map = new window.google.maps.Map(mapContainer,mapOptions);
return mapContainer;
Any idea?
Project source code: https://www.dropbox.com/sh/zhsyhebsygh74nw/RV4CxPiK8d

Answer 1

Using the Addon SDK, you can use a pagemod to modify the contents of a page (looks like you're injecting the maps on a page). There, you can specify contentScriptFiles, where one can be your local version of the google maps JS API, and the other your specific addon code that will run on the page. This will save you from having to deal with sandboxed/scope madness with loadSubScript.
let { url: getLocal } = require("sdk/self").data;
let { PageMod } = require("sdk/page-mod");
pageMod.PageMod({
include: "*.mozilla.org",
contentScriptFile: [
getLocal("googlemaps.js"),
getLocal("my-script.js")
]
});