Ionic GoogleMap Native not showing

Hello ,
I’m trying to implement a Google Map native with ionic v3.
Follow the instruction on ionic official web site and the map it’s not showing. After debugging in remote device it’s show no error.

Here is the code:


            <button ion-button menuToggle icon-only>
                <ion-icon name='menu'></ion-icon>
                 Sport's Map
        <div #map id="map" style="height:100%;"></div>

page.scss I tried to play with css property without sucess

/*ion-app._gmaps_cdv_ .nav-decor{
    background-color: transparent !important;

  /*  #map {
        height: 100%;
        width: 100%;
    } */


I tried to change the ngAfterViewInit() with ionViewDidLoad()(as suggested in a previous forum topic)
but it shows just the google logo at the bottom page and didnt show the map.
It also block the sideMenu navigation.

import { Component } from '@angular/core';
import { NavController, NavParams, MenuController,Platform } from 'ionic-angular';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, CameraPosition, MarkerOptions, Marker } from '@ionic-native/google-maps';

    selector: 'page-principal',
    templateUrl: 'principal.html',


export class PrincipalPage {

    constructor(private googleMaps: GoogleMaps, public menuCtrl: MenuController, public navCtrl: NavController, public navParams: NavParams, public platform: Platform) {
        }); */ 

    // Load map only after view is initialized but when it's used nav is not working with side menu

    loadMap() {
        // make sure to create following structure in your view.html file
        // and add a height (for example 100%) to it, else the map won't be visible
        // <ion-content>
        //  <div #map id="map" style="height:100%;"></div>
        // </ion-content>

        // create a new map by passing HTMLElement
        let element: HTMLElement = document.getElementById('map');

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

        // listen to MAP_READY event
        // You must wait for this event to fire before adding something to the map or modifying it in anyway
            () => {
                console.log('Map is ready!');
                // Now you can add elements to the map like the marker
        // create LatLng object
        let ionic: LatLng = new LatLng(43.0741904, -89.3809802);

        // create CameraPosition
        let position: CameraPosition = {
            target: ionic,
            zoom: 18,
            tilt: 30

        // move the map's camera to position

        // create new marker
        let markerOptions: MarkerOptions = {
            position: ionic,
            title: 'Ionic'

            .then((marker: Marker) => {


import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AuthPage } from '../pages/auth/auth';
import { PrincipalPage } from '../pages/principal/principal';
import { SportfilterPage } from '../pages/sportfilter/sportfilter';

  templateUrl: 'app.html'
export class MyApp {
  @ViewChild(Nav) nav; Nav;
  rootPage:any = AuthPage;
  pages: Array<{title: string, component: any}>;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
    this.pages = [
      { title: 'Sport\'s Map', component: PrincipalPage },
      { title: 'Sport\'s Filter', component: SportfilterPage },
    openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    // i tried this but it doesn't solve the problem
      this.rootPage = page.component;

Thanks a lot for your help!

Just found that i have did an eror when i used to generate the android key .
I can now see the map when i load it from ionViewDidEnter() .

But now i cant navigate to an other page from side menu!

any help will be very appreciated

Hey friend,

Can you tell me how did you install this map plugin?

I am trying to install for Android and iOS but for iOS I am having a problem of “Permission denied” on the npm folder inside the user directory, and in the end the plugin for iOS never is installed.

Also, do you know how to use the non-native plugin for maps? As we did in previous ionic? (v1)

Every time I try to run de command line:
$ sudo cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="MY_ANDROID_KEY" --variable API_KEY_FOR_IOS="MY_IOS_KEY" --no-fetch

I get:

Plugin "cordova-plugin-googlemaps" already installed on android.
Installing "cordova-plugin-googlemaps" for ios
Failed to install 'cordova-plugin-googlemaps': Error
    at /usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/plugman/fetch.js:205:33
    at _rejected (/usr/local/lib/node_modules/cordova/node_modules/cordova-fetch/node_modules/q/q.js:864:24)
    at /usr/local/lib/node_modules/cordova/node_modules/cordova-fetch/node_modules/q/q.js:890:30
    at Promise.when (/usr/local/lib/node_modules/cordova/node_modules/cordova-fetch/node_modules/q/q.js:1142:31)
    at Promise.promise.promiseDispatch (/usr/local/lib/node_modules/cordova/node_modules/cordova-fetch/node_modules/q/q.js:808:41)
    at /usr/local/lib/node_modules/cordova/node_modules/cordova-fetch/node_modules/q/q.js:624:44
    at runSingle (/usr/local/lib/node_modules/cordova/node_modules/cordova-fetch/node_modules/q/q.js:137:13)
    at flush (/usr/local/lib/node_modules/cordova/node_modules/cordova-fetch/node_modules/q/q.js:125:13)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
Error: Failed to fetch plugin via registry.
Probably this is either a connection problem, or plugin spec is incorrect.
Check your connection and plugin name/version/URL.
Error: npm: Command failed with exit code 1 Error output:
npm ERR! code 1
npm ERR! Command failed: /usr/bin/git clone --depth=1 -q -b master /Users/francisco/.npm/_cacache/tmp/git-clone-6d009773
npm ERR! /Users/francisco/.npm/_cacache/tmp/git-clone-6d009773/.git: Permission denied

I really need this map working, for the native or the web map.

Maybe you can give a little help here.

remove plugin and install it once again.
I personally using google map api v3. it is much more easier.
also check that your typing are installed or not
clear your cache before installing once again.

1 Like

I did everything as I saw in the documentation page but the map still not showing, I don’t know what else to do, any idea?

  constructor(public navCtrl: NavController, public navParams: NavParams, public platform: Platform, private googleMaps: GoogleMaps) {
    platform.ready().then(() => {
      console.log('Platform Ready on MapOfContactsPage')

      this.mapElement = document.getElementById('map');
      let mapOptions: GoogleMapOptions = {
        camera: {
          target: {
            lat: -22.423066,
            lng: -22.423066
          zoom: 18,
          tilt: 30
      }; = this.googleMaps.create(this.mapElement, mapOptions); => {
        //================== NEVER gets here
        console.log('Map is ready without geo location!');{
          title: 'Ionic',
          icon: 'red',
          animation: 'DROP',
          position: {
            lat: -22.423066,
            lng: -22.423066
        }).then(marker => {
            .subscribe(() => {
              alert('I am here ');
      }, (error) => {
// Nothing is printed here also

I would check if it’s not like my problem before:

If you have a restriction in your google console for the api. I will remove it for testing.

then if it’s not the problem i would put my loading map code inside the ionViewDidLoad void.

Remove it from your platform.ready().then(() =>{

and copy it inside this (out of the constructor).

    ionViewDidLoad() {
        //your code