Ionic native google maps not displayed browser and app

Ionic Framework ionic-v3
1

Hello guys, I have this code :

import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker,
Environment
} from '@ionic-native/google-maps';

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

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

constructor(
    private platform: Platform
) {
    this.platform.ready().then(() => {
        console.log('Constructor');
        this.loadMap();
    });
}


loadMap() {
    // This code is necessary for browser
    Environment.setEnv({
        API_KEY_FOR_BROWSER_RELEASE: 'API_SECRET',
        API_KEY_FOR_BROWSER_DEBUG: 'API_SECRET'
    });

    const mapOptions: GoogleMapOptions = {
        camera: {
            target: {
                lat: 43.0741904,
                lng: -89.3809802
            },
            zoom: 18,
            tilt: 30
        }
    };

    this.map = GoogleMaps.create('map_canvas', mapOptions);
    console.log('load 4');
    const marker: Marker = this.map.addMarkerSync({
        title: 'Ionic',
        icon: 'blue',
        animation: 'DROP',
        position: {
            lat: 43.0741904,
            lng: -89.3809802
        }
    });
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
        alert('clicked');
    });
}

In html I have :

<ion-content>
    <div id="map_canvas"></div>
</ion-content>

I have the error :

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

I use this lib : https://github.com/ionic-team/ionic-native-google-maps/blob/d7898d7a58940a9eb478ee4a1ef5d3d431db9e25/documents/README.md

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

You can find all the content of component.

2

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

3 
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"
4

So you use ionic v3?

5

ionic v4…

6

For Ionic 4 you have to look at this: https://github.com/mapsplugin/ionic-googlemaps-quickdemo-v4

$> ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps

$> 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

7

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

Screenshot from 2020-02-18 15-24-18
Screenshot from 2020-02-18 15-24-18391×583 9.93 KB

Any ideas ?

8

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?

9

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

10

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

11

Ok, thank you…

12

Any ideas of what the screen is grey ?

13

Try this in your AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="org.apache.cordova" android:versionName="1.0" android:versionCode="1">
      <uses-permission android:name="android.permission.INTERNET" />
      <application >
        <meta-data
        android:name="com.google.android.geo.API_KEY"
        android:value="Your API Key"/>
      </application>
</manifest>
14

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.

15

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