Ionic native google maps not displayed browser and app

Hello guys, I have this code :

import {
} from '@ionic-native/google-maps';

import { Platform } from '@ionic/angular';

export class MapComponent implements OnInit, AfterViewInit {
map: GoogleMap;

    private platform: Platform
) {
    this.platform.ready().then(() => {

loadMap() {
    // This code is necessary for browser

    const mapOptions: GoogleMapOptions = {
        camera: {
            target: {
                lat: 43.0741904,
                lng: -89.3809802
            zoom: 18,
            tilt: 30
    }; = GoogleMaps.create('map_canvas', mapOptions);
    console.log('load 4');
    const marker: Marker ={
        title: 'Ionic',
        icon: 'blue',
        animation: 'DROP',
        position: {
            lat: 43.0741904,
            lng: -89.3809802
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {

In html I have :

    <div id="map_canvas"></div>

I have the error :

ncaught (in promise): TypeError: GoogleMaps.getPlugin(…) is null
./node_modules/@ionic-native/google-maps/index.js/Environment.setEnv@ /vendor.js:100276:20

I use this lib :

I found some answers on stackoverflow but didn’t help me. Thx in advance.

You can find all the content of component.

Seems like the Google Maps Plugin isn’t installed correctly. Can you please post the Result of:
ionic cordova plugin list

call-number 0.0.2 "Cordova Call Number Plugin"
cordova-plugin-advanced-http 2.4.0 "Advanced HTTP plugin"
cordova-plugin-androidx 1.0.2 "cordova-plugin-androidx"
cordova-plugin-androidx-adapter 1.1.0 "cordova-plugin-androidx-adapter"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-brightness 0.1.5 "Brightness"
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-fingerprint-aio 2.0.0 "FingerprintAllInOne"
cordova-plugin-firebase-analytics 4.0.1 "FirebaseAnalyticsPlugin"
cordova-plugin-firebase-crashlytics 1.0.0 "Cordova Firebase Crashlytics Plugin"
cordova-plugin-googlemaps 2.6.2 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.3 "cordova-plugin-ionic-webview"
cordova-plugin-nativestorage 2.3.2 "NativeStorage"
cordova-plugin-splashscreen 5.0.3 "Splashscreen"
cordova-plugin-statusbar 2.4.3 "StatusBar"
cordova-plugin-whitelist 1.3.4 "Whitelist"
cordova-plugin-x-socialsharing 5.0.12 "SocialSharing"
cordova-support-android-plugin 1.0.1 "cordova-support-android-plugin"
cordova-support-google-services 1.3.2 "cordova-support-google-services"

So you use ionic v3?

ionic v4…

For Ionic 4 you have to look at this:

$> ionic cordova plugin add

$> npm install @ionic-native/core@beta @ionic-native/google-maps@beta --save

You have to import the GoogleMaps stuff from @ionic-native/google-maps/ngx then

Btw browser mode didn’t works
But on mobile I have a blank screen

Any ideas ?

How did you test it in Browser? Ionic serve?

I can remeber that a grey screen appears when the Key is invalid but i’m not sure. Can you check my above answer?

I test browser : ng serve --watch
I don’t want to use beta, is a unstable version :frowning:

with ng serve “cordova” is not available. Try ionic cordova build browser

Ok, thank you…

Any ideas of what the screen is grey ?

Try this in your AndroidManifest.xml

<manifest xmlns:android=""
      package="org.apache.cordova" android:versionName="1.0" android:versionCode="1">
      <uses-permission android:name="android.permission.INTERNET" />
      <application >
        android:value="Your API Key"/>

Yeah the Map is maybe grey if the Key is missing. But you should not do what @gentlyawesome said when you use Cordova. With the Google Maps Plugin you can provide the Keys like this.

Did you check the CSS? This is something I have noticed with some of my colleagues, they focus on typescript and template but forget the CSS