Map not working using signed APK - Android

[antoine92190]

Hey!

I've been using your plugin for a year and I really appreciate your work :thumbsup: I'm working with Ionic 3 and I just released my app on the App Store featuring your map.

Now I started to work on Android but I have some issues. The map is perfectly working in my android dev environment (emulator and device), however the map is not working when generating a signed APK and opening it on my device.

I get an empty map with grey background and I can see the Google logo as well.

I am aware of the link you posted: https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md

I tripled checked everything without any success. I created a brand new ionic project only featuring your map just to make sure my project was not creating any conflict.

Do you have any ideas what could be the issue? Maybe I am missing some configuration steps but I have no clue at this point.

I can share a github repo with an empty ionic project only featuring your map, but I did exactly what you explained here, nothing more, nothing less: https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/For-ionic2-users/README.md

BTW, I tried without any success with both 1.4.1 and 2-beta versions.

[antoine92190]

That's always after asking that I figure it out. I had to also register my RELEASE SHA-1 fingerprint to Google APIs console.

I found my fingerprint by opening my terminal and entering: keytool -list -v -keystore "MY_KEYSTORE_PATH" -alias "MY_KEY_ALIAS"

Maybe you can add it in here: https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md

If you want, I can create a pull request for you.

[wf9a5m75]

Oh, sorry. I wrote an article the release step in the past, but I lost it somewhere. Yes, you need to register your fingerprint with your api key. I will create it again.

[antoine92190]

Great thanks!

[JoelKap]

Hi @antoine92190 , I know it has been over a year since you dealt with this issue but am facing the exam same issue and i can't get my google map to display on my android device after release an apk file but it works on the browser and if don't put in the apiKey am getting a , i follow all the steps.

my google-map.ts file looks like this:

import { Author } from "./../../models/author";
import { Component, ViewChild } from "@angular/core";
import { Storage } from "@ionic/storage";
import { Geolocation } from "@ionic-native/geolocation";
import { Platform } from 'ionic-angular';
import {
  LaunchNavigator,
  LaunchNavigatorOptions
} from "@ionic-native/launch-navigator";
import {} from "@types/googlemaps";

@Component({
  selector: "google-map",
  templateUrl: "google-map.html"
})
export class GoogleMapComponent {
  @ViewChild("map")
  mapElement;
  map: any;
  business: Author = new Author();
  latitude: number;
  longitude: number;
  constructor(
    private storage: Storage,
    public geolocation: Geolocation,
    private launchNavigator: LaunchNavigator,
    platform: Platform
  ) {
    platform.ready().then(() => {
      this.getCoords();
      this.getCurrentLocation();
    });
  }

  // ngOnInit() {
  //   this.getCoords();
  //   this.getCurrentLocation();
  // }

  getCoords() {
    this.storage.get("authorAddressDetails").then(val => {
      this.business = val;
      this.initMap();
    });
  }

  initMap() {
    let coords = new google.maps.LatLng(
      this.business.latitude,
      this.business.longitude
    );
    let mapOptions: google.maps.MapOptions = {
      center: coords,
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: coords,
      title: "Location"
    });

    let content = this.business.address;

    this.addInfoWindow(marker, content);
  }

  addInfoWindow(marker, content) {
    let infoWindow = new google.maps.InfoWindow({
      content: content
    });
    google.maps.event.addListener(marker, "click", () => {
      infoWindow.open(this.map, marker);
      this.navigateLocation();
    });
  }

  navigateLocation() {
    let options: LaunchNavigatorOptions = {
      start: [this.latitude, this.longitude],
      app: this.launchNavigator.APP.GOOGLE_MAPS
    };
    this.launchNavigator.navigate(this.business.address, options).then(
      success => {
        console.log(success);
      },
      error => {
        console.log(error);
      }
    );
  }

  getCurrentLocation() {
    this.geolocation.getCurrentPosition().then(
      position => {
        this.latitude = position.coords.latitude;
        this.longitude = position.coords.longitude;
      },
      error => {
        console.log("error", error);
      }
    );
  }
}

My index.html looks like this:

  <meta charset="UTF-8">
  <title>Alabaster App</title>
  <meta name="viewport" name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <meta http-equiv=“Content-Security-Policy” content=“default-src ‘self’ gap://ready file://* *; style-src ‘self’ ‘unsafe-inline’; script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’”/>
  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

 <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="https://maps.googleapis.com/maps/api/jskey=AIzaSyDdHaul0yJTpNlViBUwnjMutS"></script>
  <!-- cordova.js required for cordova apps (remove if not needed) -->
  <script src="cordova.js"></script>

I generated my SHA1 Fingder print added it on my google console as per instruction but am still not getting any maps to show but If I don't the API Key and create my release apk file the map shows on my android with a watermark saying for development only.

Any help would be appreciated

[wf9a5m75]

@JoelKap You don't use this plugin at all.

[JoelKap]

sorry i meant @wf9a5m75 which plugin do you recommend?

[wf9a5m75]

You just use Google Maps JavaScript v3 directly, because your code has new google.maps.Map is a statement of it.

This plugin (cordova-plugin-googlemaps) does not provide that statement.

[wf9a5m75]

generated my SHA1 Fingder print added it on my google console ...

Which is for Google Maps SDK for Android, not for Google Maps Javascript API v3.

[JoelKap]

@wf9a5m75 I see, thanks, i just came from deleting the SHA1 Fingder, am currently looking into some example on how it done, do you perhaps have a GitRepo about google map implementation on ionic V3 for Javascript

[JoelKap]

@wf9a5m75 i followed the couple tutorials on online but i can only get the map to work on the browser but once i have created an apk file and install it on the device the map showing a white blank screen.

[JoelKap]

Has anyone managed to solve this issue and please share codes i still didn't come right with it.

[wf9a5m75]

Throw away your Google Maps JavaScript v3 code, and follow this tutorial if you want to use this plugin. https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.3.0/hello-world/README.md

There is no solution to protect Google Maps API key in Android/iOS apps because there is no domain in applications. This is not best spot to Q&A. If you want to use Google Maps JavaScript v3, please go to StackOverflow.

[JoelKap]

@wf9a5m75 sorry for the delay, i have figured out my issue, very stupid really... my default setting on google api key was set to on HTTP application restriction, by removing the restriction actually fixed the issue,