Geolocation works in the browser but shows PositionError on device

Question

I'm trying to display the route, currentlocation from another location, in the browser, works but when I try in the phone it seems doesn't work. I mean the center map doest work and the routes don't display sorry for my bad English:(

    ngOnInit() {
        this.loadMap();
      }
    loadMap() {
        try {
          this.map = new google.maps.Map(document.getElementById("map"), {
            zoom: 7,
            center: { lat: 41.85, lng: -87.65 }
          });
        } catch (e) {
          window.alert("No CurrentLocation " + e);
        }
        this.directionsRenderer.setMap(this.map);
      }
    //button for currentlocation
      getPosition(): any {
        this.geolocation.getCurrentPosition().then(resp => {
          this.setCenter(resp);
        });
      }

      setCenter(position: Geoposition) {
        this.myLatLng = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        this.map.setCenter(this.myLatLng);
      }
      calculateAndDisplayRoute(destination): void {
        var t = this;
        this.directionsService.route(
          {
            origin: t.myLatLng,
            destination: t.destination.text,
            travelMode: "DRIVING"
          },
          (response, status) => {
            if (status === "OK") {
              this.directionsRenderer.setDirections(response);
            } else {
              window.alert("Directions request failed due to " + status);
            }
          }
        );
  }

In the browser it works correctly, i mean, no error, but in te cellphone it doesnt work — ElMariachiCraZy, Aug 16 '19 at 14:40
For future reference, it helps to say which mobile platform you're trying to develop on. It sounds like you don't know about the debugging tools while the app is running on your device. [Take a look at this](https://ionicframework.com/docs/building/android#using-chrome-devtools) and then see what the error code is. — rtpHarry, Aug 16 '19 at 14:53
Normally though this turns out to be API key issues, like you haven't whitelisted it for use in that way, or something like that. — rtpHarry, Aug 16 '19 at 14:54
@ElMariachiCraZy i mean what do you see in console when you run your app in a device. Take a look at that link from rtpHarry — distante, Aug 16 '19 at 15:58
Ok, in te console i get this error: ERROR Error: Uncaught (in promise): PositionError: {} — ElMariachiCraZy, Aug 16 '19 at 21:21

score 0 · Answer 1 · answered Aug 17 '19 at 06:51

Your issue is not to do with the map, it is to do with the Geolocation plugin.

PositionError is defined like this:

PositionError.prototype.PERMISSION_DENIED = PositionError.PERMISSION_DENIED = 1;
PositionError.prototype.POSITION_UNAVAILABLE = PositionError.POSITION_UNAVAILABLE = 2;
PositionError.prototype.TIMEOUT = PositionError.TIMEOUT = 3;

So you have one of these three problems.

You still haven't said what platform you are trying this on. For iOS you have to add this configuration to your configuration.xml file:

<edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
   <string>We use your location for full functionality of certain app features.</string>
</edit-config>

Also this code is not going to work:

  getPosition(): any {
    this.geolocation.getCurrentPosition().then(resp => {
      this.setCenter(resp);
    });
  }

There is an example in the documentation that shows what is returned. If you are not sure then you should log things to the console to investigate them.

let lat = resp.coords.latitude;
let lon = resp.coords.longitude;

And your setCenter() isn't right either, it expects a google maps LatLng or LatLngLiteral object like:

this.setCenter({lat: -34, lng: 151});

This should be something like:

  getPosition(): any {
    this.geolocation.getCurrentPosition().then(resp => {
      let lat = resp.coords.latitude;
      let lng = resp.coords.longitude;
      this.setCenter({lat, lng});
    }).catch((error) => {
      console.log('Error getting location', error);
    });
  }

Programming is a precision thing. You have to look up everything that you are doing and make sure it matches the spec otherwise you aren't going to get anywhere.

Thanks, now I get it, sorry for no specifying the platform, im trying this on android — ElMariachiCraZy, Aug 17 '19 at 18:20
ok well it seems you need to figure out what type of error you're getting. The last snippet I gave should make the error code show up in the console. If the answer has helped you so far then please consider giving it an upvote, and if it solves it, then please mark it as the answer. — rtpHarry, Aug 18 '19 at 05:57
I just realised that you did actually do some code for the latlng response. I didn't notice that `this.setCenter` was your own function, I just recognised it as a Google Maps API call and though you were passing the wrong data. My bad. — rtpHarry, Aug 18 '19 at 06:59

Geolocation works in the browser but shows PositionError on device

1 Answers1