Ionic native Google Maps Android not working

Question

I have to add a view with Google maps map on my project. I followed the official ionic native Google maps documentation but it does not work.

I assigned background color pink to the div that contains the map (for testing), before adding the map to the div, the div shows correctly. But when the map is added to the div the background of the modal window turns to transparent, and the div disappears. But no error is shown.

I tried different ways to attach the map on the div, but the results are the same.

When I use the code of the Ionic docs I got this error message "GoogleMaps [deprecated] Please use GoogleMaps.create()". I tried using GoogleMaps.create() instead of the argument of the constructor avoiding this error message, but still not working.

My ion-content:

<ion-content fullscreen overflow-scroll="true" class="container">

  <div #map id="map"></div>

</ion-content>

Part of the css:

#map {
        height: 90%;
        width: 100%;
        border-width: 5px;
        border-color: red;
        background: pink;
    }

And here we got fragments of the ts:

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

...

export class PerfilPage {
  @ViewChild(Content) content: Content;
  @ViewChild('map') mapElement: ElementRef;
  map: GoogleMap;

...

ionViewDidLoad() {
// I use this for changing the nab-bar color
    this.content.ionScroll.subscribe((scroll) => {
      // console.log('user scrolled', scroll);
      if ( scroll.scrollTop > 100 ) {
        this.toolbar_color = "bg_search"
      } else {
        this.toolbar_color = "transparent"
      }
      this.ref.detectChanges();
    });

    // this.loadMap();
    // this.initMap();
    // this.testMap();
    this.offiMap();
  }

// Official Ionic documentation code
 offiMap() {
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };

    this.map = this.googleMaps.create('map', mapOptions);

    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        console.log('Map is ready!');

        // Now you can use all methods safely.
        this.map.addMarker({
            title: 'Ionic',
            icon: 'blue',
            animation: 'DROP',
            position: {
              lat: 43.0741904,
              lng: -89.3809802
            }
          })
          .then(marker => {
            marker.on(GoogleMapsEvent.MARKER_CLICK)
              .subscribe(() => {
                alert('clicked');
              });
          });

      });
  }
}

PS: the API key works on other projects (not Ionic projects), so idk where is the problem.

Thanks :)

Answer 1

As I describe on the git repo, the maps plugin places the native map view under (or behind) the browser.

https://github.com/mapsplugin/cordova-plugin-googlemaps#how-does-this-plugin-work

That's why all parent elements of the map div becomes transparent.

If you need to set the background of application, you need to use Environment.setBackground("pink").

Since the map is displayed under the browser, this plugin CAN NOT display on dialogs.

Answer 2

I had the exact issue as OP had when follow the Official Ionic Native Google Maps Guide

There's a misleading on the slide page Google Maps API Key. The URL in the slide is https://console.developers.google.com/projectselector/apis/library which is INCORRECT.

For generating Google Maps API Key for Android and IOS, we use Google Cloud Platforms https://cloud.google.com/maps-platform/

Here's the link I asked the same question Ionic3 ionic native google maps doesn't show map but only google logo (display grey blank map )

Hope it can help people who have the same issue.

Answer 3

   loadMap() {
            let element = document.getElementById('map');
            let mapOptions: GoogleMapOptions = {
              camera: {
                target: {
                   lat: 43.0741904,
                   lng: -89.3809802
                },
               zoom: 18,
               tilt: 30
             }
        };

      let map: GoogleMap = this.googleMaps.create(element, mapOptions);

       map.addMarker({
               title: 'Location',
               icon: 'blue',
               animation: 'DROP',
               position: {
                 lat: 43.0741904,
                 lng: -89.3809802
               }
         })
          .then(marker => {
             marker.on(GoogleMapsEvent.MARKER_CLICK)
                 .subscribe(() => {
                    //alert('clicked');
                  });
              });
  }

Try this