CODEWITHSUNDEEP
androidgoogle-mapsionic-frameworkgoogle-api
Ragesh Pikalmunde
Ragesh Pikalmunde

Reputation: 1403

Protect Google Maps API key with Restriction for Ionic app

Google API Key

I am working on ionic app and I want to redirect user from app to google map application for showing directions to user but when I am setting a Key restriction to NONE it works perfectly.

But when I set restriction to Android apps and provide a proper Package name & SHA-1 It give me error: Google Maps JavaScript API error: RefererNotAllowedMapError.

I think it is because:

ionic app is basically a webview. (which I am using)

and if this is the reason how can I protect my API key?

I use code to open Google map in android app is 

showDirection(currentLocation, destLocation) {
    let destination = destLocation.latitude + ',' + destLocation.longitude;
      var directionsService = new google.maps.DirectionsService;
      directionsService.route({
        origin: currentLocation,
        destination: destination,
        travelMode: 'DRIVING'
      }, function (response, status) {
        if (status === 'OK') {
          let mapUrl = 'http://maps.google.com/?';
          var route = response.routes[0];
          route.legs.forEach((value, index) => {
            if (index == 0) {
              mapUrl += 'saddr' + value.start_address + '&daddr=' + value.end_address;
            } else {
              mapUrl += '+to:' + value.end_address;
            }
          });
          window.location.href = mapUrl;
        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
  }

can someone help?

Upvotes: 1

Views: 1231

Answers (1)

xomena
xomena

Reputation: 32138

Android app restriction is only valid for Google Maps SDK for Android. In your case when you use Ionic with WebView and Google Maps JavaScript API the only supported restriction is HTTP referrer.

You can check yourself which type of restriction is supported by each API on this page

https://developers.google.com/maps/faq#keysystem

In order to set valid HTTP referrer restriction in your Ionic app you should check what value has window.location.href when you open a map in your WebView.

For example, if the window.location.href is something like file://some/path you should use this value as referrer.

Also note that URLs with a file:// protocol require special representation as explained in

https://developers.google.com/maps/documentation/javascript/get-api-key#restrict_key

Note: file:// referers need a special representation to be added to the key restriction. The "file://" part should be replaced with "_file_url_" before being added to the key restriction. For example, "file:///path/to/" should be formatted as "_file_url_//path/to/*". After enabling file:// referers, it is recommended you regularly check your usage, to make sure it matches your expectations.

UPDATE

I believe you can avoid using DirectionsService and open Google Maps directly with Google Maps URLs in directions mode

The code snippet might be

showDirection(currentLocation, destLocation) {
    const destination = destLocation.latitude + ',' + destLocation.longitude;
    let mapUrl = "https://www.google.com/maps/dir/?api=1";
    mapUrl += "&origin=" + currentLocation;
    mapUrl += "&destination=" + destination;
    mapUrl += "&travelmode=driving";
    mapUrl += "&dir_action=navigate";
    window.location.href = mapUrl;
}

In this scenario you don't need using Google Maps JavaScript API, you don't need an API key and you don't pay for using Maps JavaScript API service.

Upvotes: 1

Related Questions