Databases
StackOverflow2013
Postsdbo
POPhoneGap Android: Google map api v3 showing blank screen
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPhoneGap Android: Google map api v3 showing blank screen
    primarykey
    data
    text
    <p>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 <a href="https://build.phonegap.com" rel="nofollow">build_tool</a> it shows the first alert generated by my javascript. After that only a blank white screen appears nothing else.</p> <p>The link to the app source at is <a href="https://github.com/aksswami/aks-bitmap.git" rel="nofollow">link</a>. In this app i am trying to get users current location using </p> <pre><code>navigator.geolocation </code></pre> <p>The app aims to show all available bitcoin trade places in google map withing given radius of user location.</p> <p>App can be downloaded using this <a href="https://build.phonegap.com/apps/535538/share" rel="nofollow">link</a>.</p> <p>Update:</p> <p>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)</p> <p><strong>index.html</strong></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;tittle&lt;/title&gt; &lt;script&gt; window.location='./main.html'; &lt;/script&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>main.html</strong></p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;CoinMap&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt; &lt;script src="js/jquery.js"&gt;&lt;/script&gt; &lt;script src="http://maps.google.com/maps/api/js?key=AIzaSyA-zLxKvbiIbO8uR20Z5DemPXYh1F3bm1M&amp;sensor=false"&gt;&lt;/script&gt; &lt;script src="js/coinmap.js"&gt;&lt;/script&gt;&lt;!-- &lt;script src="js/coinmap-icons.js"&gt;&lt;/script&gt;--&gt; &lt;link href="css/style.css" rel="stylesheet" type="text/css" /&gt; &lt;link rel="icon" type="image/png" href="bitcoin.png" /&gt; &lt;meta name="keywords" content="coinmap,map,bitcoin,openstreetmap" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt; &lt;/head&gt; &lt;body&gt; &lt;!--&lt;body onload="getCoinData()"&gt;--&gt; &lt;div id="map"&gt;&lt;/div&gt; &lt;div id="count"&gt;&lt;/div&gt; &lt;script&gt; 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.");} }; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>coinmap.js</strong></p> <pre><code> 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 &lt; 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'); } </code></pre> <p>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.</p> <p>Any geolocation example with rendering location on map can also be helpful.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAks
    1. USAks
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POPhoneGap Android: Google map api v3 showing blank screen
      1. This table or related slice is empty.
      1. VTUpMod
    1. CODid you use phonegap´s own API to get the geo locations? I dident look in your code, but it could be an interesting thing for you to look at :-)
      singulars
      1. POPhoneGap Android: Google map api v3 showing blank screen
      1. USDaniel
    2. COyes i used phonegap's own api to get geo locations. It is described here [Phonegap Geolocaton](http://docs.phonegap.com/en/2.9.0/cordova_geolocation_geolocation.md.html#Geolocation)
      singulars
      1. POPhoneGap Android: Google map api v3 showing blank screen
      1. USAks
    3. CO@Aks did you solve your problem yet or not? i also stuck on this problem and i am getting error on this line usually `marker.setMap(map);` when i tried to put marker or polygons on map through `try-catch` i checked the error and error is `Object is not a Function`
      singulars
      1. POPhoneGap Android: Google map api v3 showing blank screen
      1. USBlu
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload