Native Google Maps not loading

Ionic Framework ionic-v3
1

Hello again,

i’ve a problem getting the native google maps plugin working. If i use ionic serve i’m getting a “plugin is not defined” error.

As soon as i run it on android the “map is ready” is called as long as i don’t have setDebuggable to true.

The Map is not displayed and only the background is filled with the color. I don’t get any errors in the console.

onViewDidEnter() {

    GoogleMap.isAvailable().then(
        (resolved) => {
            console.log("maps available");
        },
        (error) => {
            console.error("maps not available", error);
        }
    );
    let map = new GoogleMap('map_canvas');
    map.setDebuggable(true);
    map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
        console.log("Map is ready!");
        map.setCenter(new GoogleMapsLatLng(LOCATION_DESTINATION_LAT, LOCATION_DESTINATION_LONG));
        map.addMarker({ icon: null, title: 'milchbar', snippet: null, position: new GoogleMapsLatLng(LOCATION_DESTINATION_LAT, LOCATION_DESTINATION_LONG) });
        
    });
}

and

   <ion-item>
        <div id="map_canvas" style="width: 400px; height:400px; background-color: #999"></div>
   </ion-item>

ionic plugin list

    cordova-plugin-actionsheet 2.2.2 "ActionSheet"
    cordova-plugin-app-version 0.1.8 "AppVersion"
    cordova-plugin-compat 1.0.0 "Compat"
    cordova-plugin-console 1.0.3 "Console"
    cordova-plugin-crosswalk-webview 1.7.0 "Crosswalk WebView Engine"
    cordova-plugin-device 1.1.2 "Device"
    cordova-plugin-facebook4 1.7.1 "Facebook Connect"
    cordova-plugin-file 4.2.0 "File"
    cordova-plugin-file-transfer 1.5.1 "File Transfer"
    cordova-plugin-geolocation 2.2.0 "Geolocation"
    cordova-plugin-inappbrowser 1.4.0 "InAppBrowser"
    cordova-plugin-network-information 1.2.1 "Network Information"
    cordova-plugin-splashscreen 3.2.2 "Splashscreen"
    cordova-plugin-statusbar 2.1.3 "StatusBar"
    cordova-plugin-whitelist 1.2.2 "Whitelist"
    cordova-plugin-x-socialsharing 5.0.12 "SocialSharing"
    cordova-sqlite-storage 1.4.1 "Cordova sqlite storage plugin"
    ionic-plugin-keyboard 2.0.1 "Keyboard"
    phonegap-plugin-barcodescanner 5.0.0 "BarcodeScanner"
    phonegap-plugin-push 1.7.0 "PushPlugin"
    plugin.google.maps 1.3.9 "phonegap-googlemaps-plugin"
    uk.co.workingedge.phonegap.plugin.launchnavigator 3.1.1 "Launch Navigator"

finally ionic info

    Cordova CLI: 6.1.1
    Gulp version:  CLI version 3.9.1
    Gulp local:   Local version 3.9.1
    Ionic Framework Version: 2.0.0-beta.8
    Ionic CLI Version: 2.0.0-beta.30
    Ionic App Lib Version: 2.0.0-beta.16
    OS:
    Node Version: v6.2.0
1 Like
2

Check out the following post (and the linked topic for more details):

You could also use the following repo as a reference:

3

Thank you.
I followed all your steps and it seems (maybe?) to work.

But as soon as i run new GoogleMap(‘my_canvas’) the page is transparent and nothing just text is visible.

I can see the page before through the current page which looks like that it isnt rendered.

This only happen as soon as i call let map = new GoogleMap(‘map_canvas’); in this.platform.ready().

Here’s my simple template which should work just fine

<ion-navbar *navbar>
    <ion-title>Karte</ion-title>
    <ion-buttons start>
        <button (click)="dismiss()">
            <span primary showWhen="ios">Schließen</span>
            <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
        </button>
    </ion-buttons>
</ion-navbar>
<ion-content padding class="location-maps">
    test1234

    <div style="height: 100%; width: 100%" id="map_canvas"></div>

</ion-content>

my scss contains only

#map_canvas {
    height: 500px;
    width: 320px;
}

As soon as i close the app it flicker very quick with the map which means its loaded. And yes, i used the Android key in the config.xml

4

I’m getting the same issue.

In my app, if I’m not logged, the map works properly. But when I make a Facebook login the page loads with a transparent background. Did you find a solution?