I have an PhoneGap iOS app and have this HTML that won't show the map in the app. I see the map perfectly in Safari or FF but not in the app. How can I get this to work?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var initialLocation = new google.maps.LatLng(37.654,-77.980);
var myOptions = {
zoom: 12,
center: initialLocation,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});
</script>
</head>
<body>
<div data-role="content">
<!--images go here -->
<div class="img_shadow" style="padding:4px;">
<div id="map_canvas" style="height:130px;"></div>
</div>
</div>
</div><!-- /page -->
</body>
The Maps SDK for iOS uses a pay-as-you-go pricing model.
Clear the app's cache & data On your Android phone or tablet, open the Settings app . Tap Apps & notifications. Follow the steps on your device to find the Maps app. After you select the app, storage & cache options should be available.
PhoneGap has a whitelist system for external URLs/Hosts.
From the wiki:
Also, the latest code has the new white-list feature. If you are referencing external hosts, you will have to add the host in PhoneGap.plist under the "ExternalHosts" key. Wildcards are ok. So if you are connecting to "http://phonegap.com", you have to add "phonegap.com" to the list (or use the wildcard "*.phonegap.com" which will match subdomains as well).
Your code snippet above has a few external hosts in it:
Perhaps try adding "*" to ExternalHosts to start with to make sure that isn't the problem, then add more specific hosts once it's working.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With