Displaying a google map on iPhone simulator - Phonegap

Question

I am running Mac OSX Lion and Xcode 4.1.1. I created a new Phonegap project and in the index.html, I added the following code.

<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js">
    </script>

    <!-- Tried setting sensor=true, didn't work too -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
    </script>

    <script type="text/javascript" charset="utf-8" >

    function display(position){
        var initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
        var myOptions = {
                zoom: 12,
                center: initialLocation,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }

        function error()
        {
            alert('Not working');
        }

        function init()
        {
            navigator.geolocation.getCurrentPosition(display,error);
        }
        </script>
    </head>
    <body onload="init()">
        <div id="map_canvas"></div>
    </body>
</html>

The code however, refuses to work. I even enabled the key "EnableLocation" in my Phonegap.plist. I don't get any sort of warning saying "Testapp would like to know your location, Allow?". All I get is this error on the console

navigator.geolocation.setError({ 'code': 1, 'message': 'Location Services Not Enabled' });

Can someone please help me out?

score 6 · Accepted Answer · answered Sep 28 '11 at 04:37

I wish I knew what to tell you, but I hope this helps. I think your code is fine. I just ran it on the iOS 4.3 simulator from Dreamweaver on Snow Leopard and it worked fine. However, I had to make some adjustments because the DIV was completely collapsed. The map was in there, but it was not showing.

Just to prove it to yourself, try adding this to your map_canvas div

style="height: 400px"

When I did that, I could see the map fine.

I am not CSS expert, so I do not know how to make the stupid div expand to the size of the map. Maybe you'll have to do it with CSS. Height 100% didn't work. Sometimes CSS really blows.

Displaying a google map on iPhone simulator - Phonegap

1 Answers1