javascript - PhoneGap Android: Google map api v3 showing blank screen -
i building webapp using phonegap cordova 2.9.0. app developed working fine in desktop browser when try run app in android device (after getting build using build_tool shows first alert generated javascript. after blank white screen appears nothing else.
the link app source @ link. in app trying users current location using
navigator.geolocation the app aims show available bitcoin trade places in google map withing given radius of user location.
app can downloaded using link.
update:
i able geolocation points , show them in alert, wehn try render them on map marker, map 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 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 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 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 marker circle.bindto('center', my_marker, 'position'); // bounds var bounds = circle.getbounds(); (var = 0; < 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 working in chrome , firefox , mobile browser also, not working wepapp after build using phonegap. appreciated.
any geolocation example rendering location on map can helpful.
i ran exact same problem , found issue options passed in. if @ current example on phonegap.com getcurrent location: http://docs.phonegap.com/en/edge/cordova_geolocation_geolocation.md.html#geolocation
you'll notice no options passed in, it's simply: navigator.geolocation.getcurrentposition(onsuccess, onerror);
i deleted options , map popped right up. have not looked deeper since, cannot tell cause, please try deleting options , see if works.
Comments
Post a Comment