Map not been loaded on Android

[chrisbenseler]

I'm trying to use the plugin in an Ionic 2 app but the map won't load on Android. This print shows how the view is, the map should be loaded inside the div with the red border:

I'm using the same implementation from several examples, as this:

let element: HTMLElement = document.getElementById('map');

let location = new GoogleMapsLatLng(-34.9290,138.6010);
let map = new GoogleMap('map', {
        'backgroundColor': 'white',
        'controls': {
        'compass': true,
        'myLocationButton': true,
        'indoorPicker': true,
        'zoom': true
    },
        'gestures': {
        'scroll': true,
        'tilt': true,
        'rotate': true,
        'zoom': true
    }
});
map.one(GoogleMapsEvent.MAP_READY).then(() => {
    console.log('Map is ready to show');
    let myPosition = new GoogleMapsLatLng(38.9072, -77.0369);
        map.animateCamera({ target: myPosition, zoom: 10 });
        map.refreshLayout();
})
.catch( error => {
    console.error('Error is ', error)
})

the console.log with the 'map is readu to show' is printed, but nothing else seems to happen. I have generated the Google API Key, following the instructions. Anyone knows what could be happening?

Ionic info:

Cordova CLI: 6.3.1 
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.0
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.4.0
Xcode version: Not installed

The version of the plugin is 1.3.9

[wf9a5m75]

https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/TroubleShooting:-Blank-Map

[chrisbenseler]

@wf9a5m75 I have already seen this page. The problem in my code, I think, is other. As seen on the print, the map "shell" does not even load (there is no Google logo, zoom in/out handlers, etc...).

[wf9a5m75]

No Google logo has two case: 1) your app sets background cokor. 2) your api key is mistake or you forgot enabling the google maps apis

[Gataquadrada]

Try delaying the load. I had this problem today. Solved by doing this:

setTimeout(function(){
    mymapinit(); // map init
}, 100);

EDIT: Assuming you have a working API key, of course.

[necrower]

I had the same problemn and fixed doing some steps:

First, the page show a empty page, so I used chrome inspect and discovered the map container with 0 height (noob error)

After that, my map show the controllers, but no map title and after remove and reinstalling the plugin the map did work, so I went do google console and create a GOOGLE_ANDROID_MAP_API_KEY and work perfectly cause I was tryng to use a MAP_JS_API_KEY

[davidwwu]

@FineRapha Thank you! I have the same issue where everything else works fine (browser, ionic-lab, ionic-view) besides my iPhone. It had something to do with requesting the location service (cause it works after I turn off location service for the app and then turn back on).

Anyways, delaying the map init works for me!

[terrill021]

@FineRapha where did you put that code?

[Gataquadrada]

@terrill021 Just use a setTimeout() to wrap your map init function. So it goes where your map configs are.