javascript - Googlemaps' map don't show on mobile -
i'm developping phonegap , i've got problems google api maps.
well, run correctly on web navigator, every time translate on emulator, page shown, not map... , don't have error message in console or logcat.
i've made autorization oneclipse , can't understand why not working.
here's code :
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>esprit citoyen</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <link href="css/jquery.mobile.css" rel="stylesheet" /> <link href="css/index.css" rel="stylesheet" /> <script type="text/javascript" src="js/perso.js"></script> <!-- affichage de la carte et gestion des pointeurs --> <script type="text/javascript" charset="utf-8" src="js/cordova-2.8.1.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.mobile.js"></script> <script type="text/javascript"> function devicereday(){ document.addeventlistener("deviceready", afunction, false); } function afunction(){ geolocalisation() } var contentmarker; var lattitude; //y var longitude; //x </script> </head> <body onload="devicereday()"> <!--<body onload="geolocalisation()">--> <div data-role="page" data-theme="b"> <div data-role="header" data-theme="b" class="center-wrapper"></div> <div data-role="content"> <div id="id1"> <div class="center-wrapper"> <div class="etape">title</div><br/><br/> <div id="carte" style="width:500px; height:300px;" data-theme="c"></div> </div> </div> </div> <div data-role="footer" data-theme="c"></div> </div> </body> </html> and js part :
function geolocalisation() { navigator.geolocation.getcurrentposition(initialiser, onerror, {timeout:10000, enablehighaccuracy: false}); } function onerror(error) { console.log(error); alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); } function initialiser(position) { lattitude = position.coords.latitude; longitude = position.coords.longitude; var latlng = new google.maps.latlng(lattitude, longitude); var geocoder= new google.maps.geocoder(); var options = { center: latlng, zoom: 15, maptypeid: google.maps.maptypeid.roadmap, streetviewcontrol: false, maptypecontrol: false }; var carte = new google.maps.map(document.getelementbyid("carte"), options); var marqueur = new google.maps.marker({ position: latlng, map: carte }); marqueur.setdraggable(true); google.maps.event.addlistener(marqueur, 'dragend', function(event) { lattitude = event.latlng.lat(); longitude = event.latlng.lng(); console.log("long : " + lattitude + " lat : "+ longitude); latlng = new google.maps.latlng(lattitude, longitude) geocoder.geocode({'latlng': latlng}, function(results, status) { if (status == google.maps.geocoderstatus.ok) { contentmarker = results[0].formatted_address; infowindow.setcontent(contentmarker); }else { alert("geocoder failed due to: " + status); } }); }); var infowindow = new google.maps.infowindow({ content : contentmarker, position : new google.maps.latlng(lattitude, longitude) }); google.maps.event.addlistener(marqueur, 'click', function() { geocoder.geocode({'latlng': latlng}, function(results, status) { if (status == google.maps.geocoderstatus.ok) { contentmarker = results[0].formatted_address; infowindow.setcontent(contentmarker); }else { alert("geocoder failed due to: " + status); } }); infowindow.open(carte,marqueur); }); } any welcome :)
Comments
Post a Comment