I'm trying to display a Google map from within a WebWorks app. Here is the complete HTML of that page in the app (note that it works fine in the browser):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" id="viewport" content="height=device-height,width=device-width,user-scalable=no" />
<title>Waste Management Service Request</title>
<style type="text/css">
body {
min-height: 500px;
}
.center {
text-align: center;
}
#page {
font-family: Arial, sans-serif;
font-size: 85%;
width: 408px;
margin: 0 auto;
padding: 0 30px;
}
h3 {
color: #006A3C;
}
#map-canvas {
height: 300px;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
if (typeof(blackberry) != "undefined") {
blackberry.system.event.onHardwareKey(blackberry.system.event.KEY_BACK, function() {
history.back();
});
}
$(document).ready(function(){
var geocoder, map;
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
address = '100 1st St., New York City, NY'; // Hardcoded for testing.
geocoder.geocode( {'address': address}, 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
});
} else {
alert("The map failed because: " + status);
}
});
})
</script>
</head>
<body>
<div id="page">
<h3>Local Map</h3>
<div id="map-canvas"></div>
</div>
</body>
</html>
From within the application, it just shows a gray box where the app should appear.
Note that the code is mostly yanked from the source of this example page, which is linked to from here.
Any ideas? Is my best bet here to resort to having Google deliver static images rendered dynamically (i.e., this technique) or is there something I'm missing to get the real thing?
By the way, I tried to crawl through the JS call stack for gmaps and add each domain to the list of the app's permissions. I have permission entries (both http and https) for gmaptiles.co.kr, google.com, googleapis.com, and gstatic.com.
What version of the Simulator are you using? There was a known issue in versions prior to 0.9.4 which caused problems when parameters were passed on the URL, and when accessing local files. You could try linking to an external JQuery library to rule out the last point (don't forget to add
<access>elements for it)?Can you post the
<access>elements you have defined in your config.xml? I was wondering if you neededsubdomains="true"or something like that?Other than that I suggest you keep stripping out content from the page until something appears, e.g. remove the
meta name="viewport"line and go from there...