CODEWITHSUNDEEP
google-maps-api-3ionic-framework
Naveenam K
Naveenam K

Reputation: 37

Ionic Serve: Accessing google geolocation api via localhost is working, but when the serve address changes its not working

I am a newbie exploring about Ionic Apps.I am running my ionic server on http://localhost:8100. My App need the users current location. I have added this 

<script src="http://maps.google.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es"></script>

in index.html

And my app.js has

  var options = {
              enableHighAccuracy: true
          };

  navigator.geolocation.getCurrentPosition(function(pos) {
              $scope.position = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
              console.log(JSON.stringify($scope.position));
          },
          function(error) {
              alert('Unable to get location: ' + error.message);
          }, options);

And added the following in config.xml

<allow-navigation href="*://*.googleapis.com/*"/>

I got the current location in $scope.position. But the problem comes when I tried running my app in mobile.So,I have connected my ubuntu to my mobile hotspot with IP-192.168.43.86. I tried running my ionic serve on http://192.168.43.86:8100 using

ionic serve --address 192.168.43.86

Now the above getCurrentPosition function is returning error stating only secured origins are allowed. So,I'm not sure whats happening there. Both localhost and 192.168.43.86 are http server only. But running the server in localhost has no issue. But changing the address is returning error. Am I missing something? Can someone help?

Upvotes: 0

Views: 600

Answers (1)

Ethan May
Ethan May

Reputation: 1292

First, make sure you have whitelisted the IP address you are using to access the maps API in the Google Developer Console. When you are running on a native device, especially iOS, you will also need to include the cordova-plugin-whitelist in order to explicitly whitelist unsecured origins. Here is an example of the meta tag I use for development, it goes in the <head> tag of your index.html:

<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline' 'unsafe-eval' 'self' data: gap: *;">

You can learn more about the cordova whitelist plugin here.

Upvotes: 1

Related Questions