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?
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.
It's definitely suspect whether or not the external script is being loaded. My guess is that either due to connectivity or perhaps permissions, you are not able to download the external script causing an error.
Try testing to see if the google variable is defined before using it
If you think you have everything setup correctly, try putting your script on an external location and loading the page from that extenal location i.e. instead of using
stageWebView.loadString()
trystageWebView.loadURL()
just for testing. If it doesn't load you may have denied your application internet access. I'm not sure exactly how this works on iOS but the suggestion is that you are asked about this as and when you try to access the resource - indicated by:http://help.adobe.com/en_US/flex/mobileapps/WSa8161994b114d624-33657d5912b7ab2d73b-7fe2.html
This may or may not solve your problem but I hope this answer will be helpful for people who have been caught out when using .loadString(). It's easy to forget to check if you actually have internet access when you are already seeing web content, which was actually loaded from a string.