phonegap cordova gelocation not showing out on phone
Question
var app = { // Application Constructor initialize: function() { this.bindEvents(); }, // Bind Event Listeners // // Bind any events that are required on startup. Common events are: // 'load', 'deviceready', 'offline', and 'online'. bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); }, // deviceready Event Handler // // The scope of 'this' is the event. In order to call the 'receivedEvent' // function, we must explicitly call 'app.receivedEvent(...);' onDeviceReady: function() { app.receivedEvent('deviceready'); }, // Update DOM on a Received Event receivedEvent: function(id) { var parentElement = document.getElementById(id); var listeningElement = parentElement.querySelector('.listening'); var receivedElement = parentElement.querySelector('.received'); listeningElement.setAttribute('style', 'display:none;'); receivedElement.setAttribute('style', 'display:block;'); console.log('Received Event: ' + id); } }; var myLatlng = new google.maps.LatLng(37.3000, -120.4833); var mapOptions = { center: myLatlng, zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), mapOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, draggable: true, animation: google.maps.Animation.DROP }); navigator.geolocation.getCurrentPosition(function(pos) { map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); var myLocation = new google.maps.Marker({ position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude), map: map, title: "My Location" }); });
<html lang="en"> <head> <meta charset="UTF-8"> <title>Geo Location</title> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map { height: 100% } </style> <script type="text/javascript" src="cordova.js"></script> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1oJGDZP2lM3c1dnPBmAbPBOb_Rh4u8n0&sensor=true"></script> <script type="text/javascript" src="js/index.js"></script> </head> <body> asd <div id="map"></div> </body> </html>
When I run this two file the google map is not appearing in my phone I dont know why but when run this in the web browser it work I had also install the cordova geolocation plugin and add permission but still unable to get it work can anyone of you help me out?
1 answers
solution1
0 2015-12-21 05:10:46
@user3711175, you have several issues. @Joerg is correct. You will need to use the whitelist system. You have two (2) issues.
UPDATE - 2015-12-23 : I misread the code. #1 does not apply
###1. You are using the this in the wrong context in your
document.addEventListener('deviceready', this.onDeviceReady, false);
You want to write app.onDeviceReady , like this:
document.addEventListener('deviceready', app.onDeviceReady, false);
When your EventListener finally fires, it is no longer in the context of you app Object.It is now global. For details, See this SO post
2. You need to apply the whitelist system
This whitelist worksheet should help.
HOW TO apply the Cordova/Phonegap the whitelist system
The following need to be added to the whitelist for Google map production .
The following domains are required for Google Maps.
- maps.googleapis.com
- mt0.googleapis.com mt1.googleapis.com
- fonts.googleapis.com
- csi.gstatic.com
- maps.gstatic.com
Wild cards ( * ) are available. Read the documentation.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.