PhoneGap Android: Google map api v3 showing blank screen

Question

I am building an webapp using phonegap cordova 2.9.0. The app developed is working fine in the desktop browser but when i try to run app in android device (After getting build using build_tool it shows the first alert generated by my javascript. After that only a blank white screen appears nothing else.

The link to the app source at is link . In this app i am trying to get users current location using

navigator.geolocation

The app aims to show all available bitcoin trade places in google map withing given radius of user location.

App can be downloaded using this link .

Update:

I am able to get the geolocation points and show them in alert, but wehn i try to render them on map with marker, then map is not rendering on android device. (Working on desktop browser)

index.html

<!DOCTYPE html>
<html>
  <head>
   <title>tittle</title>
   <script>
     window.location='./main.html';
   </script>
  <body>
  </body>
</html>

main.html

    <!DOCTYPE html>
<html>
<head>
<title>CoinMap</title>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">


<script src="js/jquery.js"></script>    
<script src="http://maps.google.com/maps/api/js?key=AIzaSyA-zLxKvbiIbO8uR20Z5DemPXYh1F3bm1M&sensor=false"></script>
<script src="js/coinmap.js"></script><!--
<script src="js/coinmap-icons.js"></script>-->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="bitcoin.png" />
<meta name="keywords" content="coinmap,map,bitcoin,openstreetmap" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
    <!--<body onload="getCoinData()">-->
<div id="map"></div>
    <div id="count"></div>
    <script>
        alert("Getting your location....");
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            if (navigator.geolocation)
            {
                navigator.geolocation.getCurrentPosition(coinmap, onError, {maximumAge: 300000, timeout:10000, enableHighAccuracy : true});

            }
            else{
            alert("GeoLocation is not available.");}
        };
    </script>
</body>
</html>

coinmap.js

    function coinmap(position) {
    alert("Latitude: "  + position.coords.latitude   + "\n" +
         "Longitude:" + position.coords.longitude  + "\n");
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    loadMap(lat, lng);
}


function loadMap(latitude, longitude){

    var my_latLng = new google.maps.LatLng(latitude,longitude);
    var mapOptions = {
        zoom: 8,
        center: my_latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);
    var my_marker = new google.maps.Marker({
        position: my_latLng,
        map: map,
        title: 'My Position'
    });

    var markers = [];
    var user_radius = 1000000;
    $.getJSON("http://overpass.osm.rambler.ru/cgi/interpreter?data=[out:json];(node[%22payment:bitcoin%22=yes];way[%22payment:bitcoin%22=yes];%3E;);out;", function (data) {

        $.each(data.elements, function (key, value) {

            var latLng = new google.maps.LatLng(value.lat, value.lon);
            var marker = new google.maps.Marker({
                'position': latLng
            });
            markers.push(marker);
        });

        // Define the circle
        var circle = new google.maps.Circle({
            map: map,
            clickable: false,
            // metres
            radius: user_radius,
            fillColor: '#fff',
            fillOpacity: .6,
            strokeColor: '#313131',
            strokeOpacity: .4,
            strokeWeight: .8
        });
        // Attach circle to marker
        circle.bindTo('center', my_marker, 'position');
        // Get the bounds
        var bounds = circle.getBounds();
        for (var i = 0; i < markers.length; i++) {
            if (bounds.contains(markers[i].getPosition())) {
                markers[i].setMap(map);
            } else {
                markers[i].setMap(null);
            }
        }

    });
}


function onError(error) {
    alert('code: ' + error.code + '\n' +
        'message: ' + error.message + '\n');
}

This above code is working well in chrome and firefox and mobile browser also, but not working as a wepapp after build using phonegap. Any help will be appreciated.

Any geolocation example with rendering location on map can also be helpful.

Answer 1

I ran into this exact same problem and found the issue to be with the options passed in. If you look at the current example on phonegap.com for getCurrent location: http://docs.phonegap.com/en/edge/cordova_geolocation_geolocation.md.html#Geolocation

You'll notice no options are passed in, it's simply: navigator.geolocation.getCurrentPosition(onSuccess, onError);

I deleted my options and the map popped right up. I have not looked deeper into it since, so I cannot tell you the cause, but please try deleting your options and see if it works.

PhoneGap Android: Google map api v3 showing blank screen

Question

1 answers

solution1
1 2013-10-02 04:05:30

PhoneGap Android: Google map api v3 showing blank screen

Question

1 answers

solution1 1 2013-10-02 04:05:30

solution1
1 2013-10-02 04:05:30