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.