Cordova-plugin-googlemaps: Map not showing up on Android

[albertleao]

I have the same piece of code working on iOS but on Android the map does not display. The map is initialized and I get the Google logo on the bottom, but nothing is displayed on the map itself

I am loading the map the standard way:

/**
 * Creates the map based on the Google sdk for android/iphone
 *
 */
var loadMap = function() {
  document.addEventListener("deviceready", function() {
    var div = document.getElementById("map_canvas");

    // Initialize the map view
    map = plugin.google.maps.Map.getMap(div);

    // Wait until the map is ready status.
    map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
  }, false);
}

[Kadajett]

I am having the same issue. I tried to initialize it in a bunch of different ways and still nothing.

[wf9a5m75]

Did you try with the master code ( not npm)?

[albertleao]

Just tried and I have the same result. The master branch also won't let me build in iOS either.

I'm also not using crosswalk. Is crosswalk something that might help?

[albertleao]

Tried with crosswalk installed. Same issue.

[Kadajett]

Same here. No errors, and the logo is showing. Just no panes. Tried with master and crosswalk as well. On Genymotion api 23, api 21, and two physical android devices running android 6.0.

[chillyprig]

I face the same problem too :(

[albertleao]

@wf9a5m75 Have you been able to reproduce this ?

[webprofusion-chrisc]

@albertleao can you confirm that you have setup you Android Google Maps SDK API Key in the google developer console, with your application identifier and SHA1 fingerprint? The map won't show until the key is authorised for the particular debug/production build of your app (tied to the keystone you're using).

[chillyprig]

I fix this by Enable Google Maps Android API in google developer console.

[roblav96]

I can also confirm displaying the map is a failure =[

Calling map.showDialog() seems to work fine though.

Installed via master branch.

[david-sykora]

Unfortunately, it's same here. I tried almost everything

• added SHA1 finegerprint to Google Console (although it's optional)
• regenerate api key
• tried bunch of different SDKs (ARM, Intel, 64)
• tried Stable branch without success (even if it doesn't help, becouse of iOS issues)
• tried allow everything in WhiteList plugin
• isAvailable(Function) says that Map is available

and nothing works.

[david-sykora]

after log dump from adb logcat it seems to be without exceptions.

Google Maps Android API: Google Play services client version: 9080000 05-30 18:50:58.350 26743 26743 I Google Maps Android API: Google Play services package version: 9080470 05-30 18:50:58.928 26743 26743 E Google Maps Android API: Google Maps Android API v2 only supports devices with OpenGL ES 2.0 and above 05-30 18:51:01.758 26743 26839 D GoogleCertificates: com.google.android.gms.googlecertificates module is loaded 05-30 18:51:02.178 26743 26743 I chromium: [INFO:CONSOLE(205)] "Map is ready.", source: file:///android_asset/www/js/index.js (205) 05-30 18:51:03.031 2423 3373 V GoogleSignatureVerifier: com.cordova.quester signature not valid. Found: 05-30 18:51:03.031 2423 3373 V GoogleSignatureVerifier: [HASH]

I'm pretty sure, that I have my keystore signarure ok. Is possible that GoogleSignatureVerifier: com.cordova.quester signature not valid. is reason of this issues?

Thanks.

[albertleao]

@webprofusion-chrisc

Yes. I am using the correct api keys given in the developer console.

[webprofusion-chrisc]

Good, and your sha1 fingerprint for your keyatore and application id matches that shown in the google api console? Google check the api key is being used by an authorised app.

[canadaka]

Today I was trying to setup a quick test app to debug something and I'm unable to get the map to display as the above users. I've added the appid and SHA1 to Google. I also created a new android key and new blank cordova app and can't get the map to display on anything.

I've tried with a new key not specifying the optional SHA step, I've tried both the github and npm versions of the plugin.

In logcat I see the following verbose logs

[roblav96]

After toying around with the plugin for a bit, I managed to get the map showing on Android and iOS. My logcat also displays the same message about invalid signature yet the map still shows perfectly fine.

[david-sykora]

can you post your testing project in ZIP? Or what did you change? Thanks!

[roblav96]

Config.xml

  <preference name="xwalkCommandLine" value="--disable-pull-to-refresh-effect --ignore-gpu-blacklist --enable-precise-memory-info"/>
  <preference name="xwalkMode" value="embedded"/>
  <preference name="xwalkMultipleApk" value="true"/>
  <preference name="xwalkVersion" value="xwalk_core_library:18+"/>

map.js

export const $map_events = new EventEmitter()
export let $map_map = null
export const $map = {
    ready: false,
}

export function $map_init() {

    $map_map = plugin.google.maps.Map.getMap( document.getElementById( 'gmap_div' ), {
        'backgroundColor': '#F9F2E7',
        'mapType': plugin.google.maps.MapTypeId.ROADMAP,
        'controls': {
            'compass': true,
            'myLocationButton': false,
            'indoorPicker': true,
            'zoom': true,
        },
        'gestures': {
            'scroll': true,
            'tilt': false,
            'rotate': true,
            'zoom': true,
        },
        'camera': {
            'latLng': new plugin.google.maps.LatLng( 39.7456066, -101.3861123 ),
            'zoom': 3,
        }
    } )

    $map_map.addEventListener( plugin.google.maps.event.MAP_READY, $map_ready )

}

function $map_ready( gmap ) {
    $map_hide()
    $map.ready = true
    console.info( '$map.init > READY' )
    $map_events.emit( 'map-ready', true )
}



export function $map_show() {
    console.warn( '$map_show' )
    $map_map.setVisible( true )
    $map_map.setClickable( true )
    document.body.classList.add( 'gmaps' )
}

export function $map_hide() {
    console.warn( '$map_hide' )
    document.body.classList.remove( 'gmaps' )
    $map_map.clear()
    $map_map.off()
    $map_map.setVisible( false )
    $map_map.setClickable( false )
}

map.css

#gmap_div {
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 5rem;
    border: 2px solid red;
    z-index: -1 !important;
}

[canadaka]

Yah actually now looking at my app that works it also has the invalid signature messages in logcat, but it works fine. It never used to have those!

But i re-built my blank test app this morning and it works now! WTF I changed nothing overnight.

[david-sykora]

@canadaka And do you use crosswalk?

[canadaka]

@david-sykora no Crosswalk. Testing with Cordova android platform 5.1.1 on an Xperia Android 6.0.1 device.

[wf9a5m75]

I have no problem with the master branch and cordova android platform 5.1.1(API 23) on Android 6.0.1 (Nexus 5x).

[schlaus]

I was running into this problem today as well, and decided to really, really read the instructions for any clues. Found the critical part here:

As of version 1.2.0, you can put any HTML element on top of the map. You need to understand how this works.

The map is a native view, not related to JavaScript. It means the map and the browser are different views, the map is not rendered inside the browser view, such as HTML.

The map was being rendered, but there were elements on top of it that had an opaque background. I started making elements transparent via dev tools, and voilà, the map appeared!

Hope this helps others running into the same problem.

[Mathijs003]

So what is the actual solution to this topic? I'm sure my html is clean on top...

[davorpeic]

Ok, so for everyone still searching solution for blank map with Google logo and buttons but no actual map and are sure that their sha1 and bundle id and api key is correct :) I found that creating api key for android will not activate actual api's.
@chillyprig comment was calling my attention, so I check again, and yes, several apis weren't enabled, so I enabled these ones, and after few minutes I could see the map generates in the app..

Hope it helps

[juanf9224]

@albertleao @Mathijs003
I had the same issue with this plugin, blank background with google logo on the bottom left corner, my solution was to open android studio, check android monitor for google logs and then i saw it, my api key authorization was invalid, but the API key itself was not the problem, the problem was because of the sha1 fingerprint, when i ran:

keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

i got a fingerprint, but it was different to the one shown in the authorization fail log.

i dont know why, but the command to get the sha1 fingerprint was giving me a different fingerprint.

To check if your fingerprint is correct you could check the Android Studio "android monitor" and wait for this Key authorization failure log.

Also, you can create a new google maps activity on android studio and check google_maps_api.xml, in the comments they give you the fingerprint you need and a link to create the credentials.

Hope this helps you!