cordova-plugin-googlemaps, map showing a blank screen. Ionic Cordova Angular

[skelvin]

I'm submitting a ... (check one with "x")

• [ ] question
• [x] any problem or bug report

OS: (check one with "x")

• [x] Android
• [ ] iOS
• [ ] Browser

cordova information: (run $> cordova plugin list)

com.lampa.startapp 6.1.6 "startApp"
cordova-base64-to-gallery 4.1.3 "base64ToGallery"
cordova-plugin-add-swift-support 2.0.2 "AddSwiftSupport"
cordova-plugin-advanced-http 3.1.0 "Advanced HTTP plugin"
cordova-plugin-androidx-adapter 1.1.3 "cordova-plugin-androidx-adapter"
cordova-plugin-androidx 3.0.0 "cordova-plugin-androidx"
cordova-plugin-app-launcher 0.4.0 "Launcher"
cordova-plugin-camera 5.0.0 "Camera"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-file 7.0.0 "File"
cordova-plugin-filechooser 1.2.0 "File Chooser"
cordova-plugin-filepath 1.5.8 "cordova-plugin-filepath"
cordova-plugin-geolocation 4.1.0 "Geolocation"
cordova-plugin-googlemaps 2.7.1 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 5.0.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.2.1 "cordova-plugin-ionic-webview"
cordova-plugin-media 6.1.0 "Media"
cordova-plugin-nativegeocoder 3.4.1 "NativeGeocoder"
cordova-plugin-network-information 2.0.2 "Network Information"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 4.0.0-dev "StatusBar"
cordova-plugin-x-toast 2.7.2 "Toast"
cordova-sqlite-storage 6.0.0 "Cordova SQLite storage plugin - cordova-sqlite-storage plugin version"
phonegap-plugin-multidex 1.0.0 "Multidex"
uk.co.workingedge.cordova.plugin.sqliteporter 1.1.1 "sqlite porter"

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 : "^5.0.0"
@ionic-native/google-maps : "^5.5.0"

Current behavior: I know this is an old issue but with all results iv seen, i've tried to replicate and have completely failed. The map does not load at all. All i see is a blank screen. I have implemented every solution i've come across;

• Changed api keys multiple of times.
• Omitted Maps Javascript Api.
• Set individual keys for Maps SDK for android and ios.
• Removed and reinstalled the plugin with ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="android_api_key" --variable API_KEY_FOR_IOS="ios_api_key" and npm install @ionic-native/google-maps
• Created a new fresh build.
• Added preferences in the config.xml preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="(android_api_key)" and preference name="GOOGLE_MAPS_IOS_API_KEY" value="(ios_api_key)"
• Stripped the code down to just a simple map display in case something i newly added caused this behavior.
• putting map_canvas div outside of the ion-content
• swapping loadMap() between the constructor, ngOnInit and IonViewDidEnter.

I have no errors in either the console or logcat. Funny thing is it was working properly a couple of weeks back but on reopening now, its just blank.

Please help!! thank you in advance

Expected behavior: The map should be visible

Screen capture or video record:

Related code, data or error log (please format your code or data):

map.page.html

<ion-app>
  <ion-header [translucent]="true">
    <ion-toolbar>
      <ion-buttons slot="start" >
        <ion-back-button defaultHref="home"></ion-back-button>
      </ion-buttons>
      <ion-title>Map</ion-title>
    </ion-toolbar>
  </ion-header>

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

map.page.scss

ion-content{
  background-color: none;
  --backgtound:none;
}

#map_canvas {
    width: 100%;
    height: 400px;
  }

map.page.ts

import { Component, OnInit } from '@angular/core';
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapOptions,
  GoogleMapsEvent,
} from '@ionic-native/google-maps';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-map',
  templateUrl: './map.page.html',
  styleUrls: ['./map.page.scss'],
})
export class MapPage implements OnInit {
  map: GoogleMap;

  constructor(
    private platform: Platform
  ) {}

  async ngOnInit() {
      
  }

  async ionViewDidEnter() {
    await this.platform.ready();
    await this.loadMap();
  }

  async loadMap(){
    const options: GoogleMapOptions = {
      controls: {
        compass: true,
        myLocation: true,
        myLocationButton: true,
        zoom: true,
        mapToolbar: true
      }
    };

    this.map = GoogleMaps.create( 'map_canvas', options);

  }
}

Github repo link

Support this plugin activity

I appreicate if you give me a beer :beer: from here

[danemco]

@skelvin, I'm getting the same thing, using Cordova 12 (Android SDK 33).

[skelvin]

Anyone, please help with a solution if any ...

[danemco]

We figured it out. There's a Pull Request to fix this already, and we applied it to the code, and now it works:

https://github.com/mapsplugin/cordova-plugin-googlemaps/pull/2872

[skelvin]

It has worked, thank you so so much @danemco