Ionic Native Google Maps not working on Device, Emulator or Browser

Hello everyone !
I am trying to make a small app with google maps but somehow I can’t make them to work. I generated an API token added the plugin did a complete copy/paste from the docs but the map is blank with the Google logo on bottom left.
Here is a screenshot from my device(Galaxy S4 with Android 6) : Screenshot
And here is what it says in the chrome debugger: Uncaught TypeError: ele.hasAttribute is not a function

I am not sure what to do but I hope that there is a solution. I saw that they worked in the Ionic 2 Native app in the play store but not sure what I am doing wrong.

Thanks !

I have the same problem can any one help us

1 Like

See related issues here:

In here user aditya_1027 answered the question but he/she is not using the Ionic Native Google Maps. He/She is using the Script tag for the google maps .
I tested this solution and it is working but the Native one is not working.

Not sure if its related but I have an issue with a plugin, ‘cordova-plugin-network-information’. It will not install on my device even though i have added it to the platform and can find it in my plugin-ins directory.

Try checking the console on your device to see if there are any errors.

Didn’t get a solution or I just can’t see it Oo

I was using the JavaScript API key. I had to use the Android SDK key https://developers.google.com/maps/documentation/android-api/signup now everything works as expected.

im getting error in ionic native its not working i have installed ionic native plugin error plz any one help me to debug this thanks
Runtime Error
Cannot find module "ionic-native"
Stack
Error: Cannot find module "ionic-native"
at d (http://localhost:8100/build/polyfills.js:3:3991)
at Object. (http://localhost:8100/build/main.js:55585:7)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:74317:75)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:74073:73)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:111136:70)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at http://localhost:8100/build/main.js:66:18
at http://localhost:8100/build/main.js:69:10

home.ts
import { Component } from ‘@angular/core’;
import { NavController, Platform } from ‘ionic-angular’;
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng } from ‘ionic-native’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

map:any;
constructor(public navCtrl: NavController, public platform: Platform) {

   platform.ready().then(() => {
        this.loadMap();
    });

}

loadMap(){

    let location = new GoogleMapsLatLng(-34.9290,138.6010);

    this.map = new GoogleMap('map', {
      'backgroundColor': 'white',
      'controls': {
        'compass': true,
        'myLocationButton': true,
        'indoorPicker': true,
        'zoom': true
      },
      'gestures': {
        'scroll': true,
        'tilt': true,
        'rotate': true,
        'zoom': true
      },
      'camera': {
        'latLng': location,
        'tilt': 30,
        'zoom': 15,
        'bearing': 50
      }
    });

    this.map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
        console.log('Map is ready!');
    });

}

}

I had the problem with Google Maps Native (I tested on Android only), tried everything, and I always had the blank Google Map screen, just with the logo at the bottom right. In the Google API Console I did not see and requests coming in.

Now: One day later it just works! I did not change anything - it looks like after creating a Google Android API key it just takes a little while until it works.

Is your map loading in browser? I have an issue with native google map, its not loading in browser. Tried to Mock Native Plugin as well but no result.

Blank map(gray map + just logo) is your api key problem. Not plugin’s problem.

@mansoorf’s code is very storange.
Please read the maps plugin official documents well.

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.0.0/ionic-native/README.md