Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Map won't show in Phonegap iOS App

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>
like image 429
user989557 Avatar asked Nov 16 '11 03:11

user989557


People also ask

Is Google Maps iOS SDK free?

The Maps SDK for iOS uses a pay-as-you-go pricing model.

Why Is Maps not working?

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.


1 Answers

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:

  • maps.google.com
  • code.jquery.com

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.

like image 108
Devgeeks Avatar answered Oct 02 '22 15:10

Devgeeks