Why won't a Google Maps map rendered using the Javascript API display on iOS when using a StageWebView? It works perfectly fine on Android and in the AIR simulator, but for some reason, it just won't render on iOS devices. Interestingly, I can view the generated HTML in Safari which adds to the confusion.
Here is an example of the HTML that I am generating dynamically within the app:
<!DOCTYPE HTML>
<html style="width:100%; height:100%; margin: 0; padding: 0;">
<head>
<title></title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
var myLatlng = new google.maps.LatLng( 0,0);
var mapOptions = {
zoom: 18,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT
}
}
var map = new google.maps.Map(document.getElementById("maps") , mapOptions);
geocoder = new google.maps.Geocoder();
geocoder.geocode( { "address": "90 South Kyrene, Chandler, AZ 85226" }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
});
});
</script>
</head>
<body style="width:100%; height:100%; margin: 0; padding: 0;">
<div id="maps" style="width:100%; height:100%; margin: 0; padding: 0;"></div>
</body>
</html>
I'm attempting to load this HTML using
StageWebView.loadString( html, "text/html" );loadString.
This has been tested on both iOS 6 and iOS 7, as well as with AIR 3.8 and 3.9.
EDIT:
After saving the HTML file to disk and then loading it via StageWebView.loadURL(), the map displays correctly. However, I am still left wondering why using loadString() does not work as expected.