Google Maps native not working in browser and emulator

Ionic Native
1

I am trying to use native google maps. Below are the steps followed :
$ ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID=“xxx(key)”
$ npm install --save @ionic-native/google-maps

inside app.module.ts
import { GoogleMaps } from ‘@ionic-native/google-maps’;
…
providers: [
StatusBar,
SplashScreen,
GoogleMaps,
{provide: ErrorHandler, useClass: IonicErrorHandler},
]

inside contactus.ts
import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams, Platform } from ‘ionic-angular’;
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker
} from ‘@ionic-native/google-maps’;

@IonicPage()
@Component({
selector: ‘page-contactus’,
templateUrl: ‘contactus.html’,
})
export class ContactusPage {
map: GoogleMap;

constructor(public platform: Platform,public navCtrl: NavController, public navParams: NavParams) {
platform.ready().then(() => {

  this.loadMap();
  });

}

ionViewDidLoad() {
console.log(‘ionViewDidLoad ContactusPage’);

}
loadMap() {

let mapOptions: GoogleMapOptions = {
  camera: {
    target: {
      lat: 43.0741904,
      lng: -89.3809802
    },
    zoom: 18,
    tilt: 30
  }
};

this.map = GoogleMaps.create('map_canvas', 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');
          });
      });

  });
}

}

inside contactus.html

ion-content padding>
div #map id=“map”>
ion-spinner>
/div>
/ion-content>

inside package.json
“dependencies”: {
“@angular/common”: “5.0.3”,
“@angular/compiler”: “5.0.3”,
“@angular/compiler-cli”: “5.0.3”,
“@angular/core”: “5.0.3”,
“@angular/forms”: “5.0.3”,
“@angular/http”: “5.0.3”,
“@angular/platform-browser”: “5.0.3”,
“@angular/platform-browser-dynamic”: “5.0.3”,
“@ionic-native/core”: “4.4.0”,
“@ionic-native/geolocation”: “^4.5.3”,
“@ionic-native/google-maps”: “^4.6.0”,
“@ionic-native/splash-screen”: “4.4.0”,
“@ionic-native/status-bar”: “4.4.0”,
“@ionic/storage”: “^2.1.3”,
“cordova-android”: “7.0.0”,
“cordova-browser”: “5.0.3”,
“cordova-plugin-geolocation”: “^4.0.1”,
“cordova-plugin-googlemaps”: “^2.2.8”,
“cordova-plugin-ionic-webview”: “^1.1.16”,
“cordova-plugin-splashscreen”: “^5.0.2”,
“cordova-plugin-statusbar”: “^2.4.1”,
“cordova-sqlite-storage”: “^2.2.1”,
“ionic-angular”: “3.9.2”,
“ionicons”: “3.0.0”,
“latest”: “^0.2.0”,
“rxjs”: “5.5.2”,
“sw-toolbox”: “3.6.0”,
“zone.js”: “0.8.18”
},
“cordova”: {
“plugins”: {
“cordova-plugin-ionic-webview”: {},
“cordova-sqlite-storage”: {},
“cordova-plugin-geolocation”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-googlemaps”: {
“API_KEY_FOR_ANDROID”: “XX”
}
},
“platforms”: [
“browser”,
“android”
]
}

inside config.xml

plugin name=“cordova-plugin-ionic-webview” spec=“^1.1.16” />
plugin name=“cordova-sqlite-storage” spec=“^2.2.1” />
plugin name=“cordova-plugin-geolocation” spec=“^4.0.1” />
plugin name=“cordova-plugin-statusbar” spec=“^2.4.1” />
plugin name=“cordova-plugin-splashscreen” spec=“^5.0.2” />
allow-navigation href=“http://192.168.1.6:8100” />
plugin name=“cordova-plugin-googlemaps” spec=“^2.2.8”>
variable name=“API_KEY_FOR_ANDROID” value=“XXX” />
/plugin>
engine name=“browser” spec=“5.0.3” />
engine name=“android” spec=“7.0.0” />



But i am getting  below error in browser when i run using command  " ionic cordova run browser"
or if i try to run on emulator then also same error is coming "ionic cordova run android --consolelogs
"
SDK USED was 25 
util.js:47 Native: tried accessing the GoogleMaps plugin but it's not installed.
2

cordova-plugin-googlemaps plugin supports only android and ios.

3

Using this to test in android
ionic cordova run android --consolelogs

Getting same error

4

To make it works on browser, you have to import Environment from @ionic-native/google-maps to your app component and check whether the application is running on a browser when the platform is ready loaded. See my code below in app.component.ts

import { Environment } from '@ionic-native/google-maps';
export class MyApp {
 constructor(platform: Platform ){
  platform.ready().then(() => {
      if (document.URL.startsWith('http')){
        Environment.setEnv({
          API_KEY_FOR_BROWSER_RELEASE: "YOUR_API_KEY",
          API_KEY_FOR_BROWSER_DEBUG: "YOUR_API_KEY"
        });
      }
  });
 }
}
2 Likes
5

Hey, this API_KEY where do you get it from?

Would it be from here?
45