Google map target DIV is blank

I’m submitting a … (check one with “x”)

• question
• any problem or bug report
• feature request

If you choose ‘problem or bug report’, please select OS: (check one with “x”)

• Android
• iOS

cordova information: (run $> cordova plugin list)

branch-cordova-sdk 2.6.23 "branch-cordova-sdk"
cordova-plugin-device 2.0.1 "Device"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-googlemaps 2.2.9 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-x-socialsharing 5.3.2 "SocialSharing"
es6-promise-plugin 4.2.2 "Promise"
onesignal-cordova-plugin 2.3.2 "OneSignal Push Notifications"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

"@ionic-native/core": "4.4.0",
"@ionic-native/google-maps": "^4.6.1"

Current behavior:

After the button is pressed or a location is searched, the target div of the map simply displays the text GOOGLE with neither map nor marker.

Expected behavior:

I just want the map div to load or display a map with the location parameters it is handed.

Screen capture or video record:

Related code, data or error log (please format your code or data): sometimes, it throws the following errors

[ignore]map_0_830091793909.setOptions, because it's not ready
Uncaught (in promise): TypeError: Cannot read property 'position' of undefined

But mostly says nothing and doesn’t display the map.

The component code can be found at this gist, while the markup is very basic

<ion-content padding>
<div #displayMap id="displayMap"></div>
</ion-content>

[wf9a5m75]

No contribution, no help.

[wf9a5m75]

And did you read my advice?

this.map.setOptions( mapOptions); has to execute after the MAP_READY event.