Search code examples
javascriptactionscript-3apache-flexgoogle-maps-api-3flex4.5

Google Maps JS API v3 will not load inside Flex Mobile StageWebView

I am trying to load a StageWebView with the Google Maps Javascript API inside a Flex Mobile application as a workaround for the Google Maps API for Flash not working on iOS. I am using the stageWebView.loadString() method. Below is the relevent portion of HTML.Javascript being loaded.

My issue is that everything works perfectly when I view this in a browser (IE, Chrome and Safari) and in the Flash Builder iPhone/iPad simulators. On the actual device the map never loads, and through some try..catch statements I was able to identify that I am getting "TypeError: 'undefined' is not a constructor" errors, which are thrown by each of the lines I listed inside the initialize function below.

Any thoughts on what may be going wrong?

  <!DOCTYPE html>
  <html>
    <head>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map_canvas { height: 100% }
      </style>
      <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?v=3&key=MY_KEY&sensor=true">
      </script>
      <script type="text/javascript">
        /* a bunch of variables and functions */
        function initialize() {
          var myOptions = { center: new google.maps.LatLng(43.476302, -80.4816062), zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP };
          map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          geocoder = new google.maps.Geocoder();
          dirDisplay = new google.maps.DirectionsRenderer();
          /* some other stuff */
        }
        if(window.addEventListener) window.addEventListener("load", initialize, true); else window.onload = initialize;
      </script>
    </head>
    <body>
      <div id="map_canvas" style="width:100%; height:100%;" ></div>
      <div id="dirPanel" style="width:100%;" ></div>
    </body>
  </html>

Edit: I checked what the google.maps object contained and was surprised to find that unlike the object appearing on browsers, with Map, Polyline, Marker, Geocoder, and a host of other child objects, the version bpresented by the iOS device looks like this:

google.maps {
  modules:Object,
  Load:function (apiLoad) { delete google.maps.Load; apiLoad([/*lots of stuff I don't feel like copying out by hand*/], loadScriptTime); },
  _gjsload_:function (name, text) { modules[name] = text; }
}

Any thoughts as to why it is different? Or what I can do about it to get the Maps API to work?

Solution

  • Through Alexander Farber's suggestion on this post, I decided to use MapQuest's Flex/Flash Mobile API, which has proven to be very effective.