Ionic 4: map isn't loading in Android

[CaioRolla]

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

• [ ] question
• [X] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [X] Android
• [ ] iOS
• [ ] Browser

Hi,

I'm trying to use the plugin in a Ionic 4 Beta app and i have done everything rigth by now:

I used ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="My Key" --variable API_KEY_FOR_IOS="My Key" to add the plugin to my project and npm install --save @ionic-native/core@beta @ionic-native/google-maps@beta to install it.

When i use ionic cordova run browser it works perfecly:

But when i compile to Android with ionic cordova run android --device nothing happens. This is my remote console:

This is my home.page.ts:

import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
import { GoogleMaps, GoogleMap, Environment, GoogleMapOptions, GoogleMapsEvent, Marker } from "@ionic-native/google-maps/ngx";
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{
  map: GoogleMap;
  constructor(private platform: Platform){

  }

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

  loadMap(){

    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': ' My key! ',
      'API_KEY_FOR_BROWSER_DEBUG': 'My Key! '
    });

    let mapOptions: GoogleMapOptions = {
      camera: {
         target: {
           lat: 43.0741904,
           lng: -89.3809802
         },
         zoom: 18,
         tilt: 30
       }
    };
    this.map = GoogleMaps.create('map_canvas', mapOptions);

    let marker: Marker = this.map.addMarkerSync({
      title: 'Ionic',
      snippet: 'teste',
      position: {
        lat: 43.0741904,
        lng: -89.3809802
      }
    });
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
      alert('clicked');
    });
  }
}

[wf9a5m75]

Less information. Please share your project files on GitHub.

[CaioRolla]

https://github.com/CaioRolla/ionic4-gmap

[m-spyratos]

I had the same issue on iOS after upgrading from 5.0.0-beta.20 to 5.0.0-beta.25. Not sure if it's related, but in my case the ion-content was covering the Google Maps div element and because it had a background color, the map was not visible.

I had to use the following in the global scss file:

ion-content.map {
  --background: transparent;
}

[wf9a5m75]

@CaioRolla Thank you for sharing your project. I confirmed your problem. The problem is ionic v4 sets background color in shadow DOM since recent version. I already recognized this problem, and the patch is included in the next version (not released yet).

At this time, you need to reinstall the plugin from the multiple_maps branch.

$> cordova plugin rm cordova-plugin-googlemaps

$> cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="(your api key)" --variable API_KEY_FOR_IOS="(your api key)"

[wf9a5m75]

ping

[wf9a5m75]

Since there is no response for a while, I close this thread.

[Benjamin-Wittke]

Hi, I got the same problem. I am trying it on my Android phone, but still got no map shown. Neither the plugin changing or the transparent colour helped :( Any advices?

[loks15]

thanks it work for me. you must need set your google api key correctly. solution here. https://ionic.tutorials24x7.com/blog/implement-google-maps-in-ionic-4-for-android

[thesurya9]

@CaioRolla Thank you for sharing your project. I confirmed your problem. The problem is ionic v4 sets background color in shadow DOM since recent version. I already recognized this problem, and the patch is included in the next version (not released yet).

At this time, you need to reinstall the plugin from the multiple_maps branch.

$> cordova plugin rm cordova-plugin-googlemaps

$> cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="(your api key)" --variable API_KEY_FOR_IOS="(your api key)"

This is not working. still the same issue

[wf9a5m75]

You need to set API keys into the config.xml file from version 2.6.0 https://github.com/mapsplugin/cordova-plugin-googlemaps/blob/master/README.md#quick-install

And this plugin put the map UNDER <body> tag. You can not put a map into slide or dialog something

[mounthief]

If you have a background image for ion-content it will hide the map