FireFox-OS / Google Maps V3 : Test on real phone "google is not defined"

Question

I'm writing an application for Firefox OS and i want to integrate a Google Maps V3

The problem is that If want to try my code with a real device, the map is not show due to "google is not defined".

I search and find this anwser : Firefox OS CSP restrictions on privileged apps And the awnser leads me to think that If i don't submit my application to the marketplace, I could not try my code with a real device... I have to use a simulator for testing that.... Am I right ?

Is there any workaround for testing the code ? Because i find that it is realy strange to valid a code that you are developping for testing a map ... ?

A thing that is pretty weird to is that this project https://github.com/abhishekvp/Anchor-n-Explore seems to work very well on my phone...

Here is the code I write :

index.html :

<script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=true"></script>

And after I'm using the simple code for the hello world tutorial.

Regards

Answer 1

MDN says ["As of Gecko 15.0, Content Security Policy no longer has any default restrictions"]. If your app works on a simulator, you can [push it to device] and it should work. The CSP policy of FirefoxOS doesn't allow privileged apps to load external Javascript files. This tutorial uses iframe.

1. create a separate html file which loads google map libs, and put it on a server.
2. place iframe in a html file of FirefoxOS privileged app.

3. It's possible to draw something on the map with postMessage.

   var mapIframe = document.getElementById('mapIframe'); mapIframe.contentWindow.postMessage("CommandToDrawSomething", '*');

Answer 2

I don't see any map, even with the simulator, in your application, but I'm sure it's a loading problem (you try to use the map before it's loaded) as the script is a loader, not the script itself. You should load it asynchronously like

function initialize() {
   //Do your map stuff
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 
      'https://maps.googleapis.com/maps/api/js?v=3&sensor=true&callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

You should also use https, instead of http, and add the version of the script you want to use, so no surprise in the future.