# Google Maps native not working in browser and emulator **URL:** \ **Category:** Ionic Native\ **Created:** [March 25, 2018, 8:23am UTC](https://forum.ionicframework.com/t/google-maps-native-not-working-in-browser-and-emulator/125824 "2018-03-25T08:23:43Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Gurpreet\_singh](https://avatars.discourse-cdn.com/v4/letter/g/b77776/32.png) [@Gurpreet\_singh](https://forum.ionicframework.com/u/Gurpreet_singh)\ **Post date:** [March 25, 2018, 8:23am UTC](https://forum.ionicframework.com/t/google-maps-native-not-working-in-browser-and-emulator/125824/1 "2018-03-25T08:23:43Z")
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 ```auto ``` > 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](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” /\> > > ```auto > > ``` ```auto 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. ``` ---
**Author:** ![wf9a5m75](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/wf9a5m75/32/118692_2.png) [@wf9a5m75](https://forum.ionicframework.com/u/wf9a5m75)\ **Post date:** [March 25, 2018, 1:50pm UTC](https://forum.ionicframework.com/t/google-maps-native-not-working-in-browser-and-emulator/125824/2 "2018-03-25T13:50:31Z")
cordova-plugin-googlemaps plugin supports only android and ios. ---
**Author:** ![Gurpreet\_singh](https://avatars.discourse-cdn.com/v4/letter/g/b77776/32.png) [@Gurpreet\_singh](https://forum.ionicframework.com/u/Gurpreet_singh)\ **Post date:** [March 25, 2018, 7:02pm UTC](https://forum.ionicframework.com/t/google-maps-native-not-working-in-browser-and-emulator/125824/3 "2018-03-25T19:02:50Z")
Using this to test in android ionic cordova run android --consolelogs Getting same error ---
**Author:** ![vicheanak](https://avatars.discourse-cdn.com/v4/letter/v/df788c/32.png) [@vicheanak](https://forum.ionicframework.com/u/vicheanak)\ **Post date:** [December 8, 2018, 5:35am UTC](https://forum.ionicframework.com/t/google-maps-native-not-working-in-browser-and-emulator/125824/4 "2018-12-08T05:35:33Z")
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` ```auto 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" }); } }); } } ``` ---
**Author:** ![franzisk4sis](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/franzisk4sis/32/111787_2.png) [@franzisk4sis](https://forum.ionicframework.com/u/franzisk4sis)\ **Post date:** [March 29, 2019, 11:48am UTC](https://forum.ionicframework.com/t/google-maps-native-not-working-in-browser-and-emulator/125824/5 "2019-03-29T11:48:44Z")
Hey, this API\_KEY where do you get it from? **Would it be from here?** ![45](https://global.discourse-cdn.com/ionicframework/original/3X/8/1/81b4e251071713ef04323a585fbc855deb519e16.png) ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [July 19, 2021, 9:43pm UTC](https://forum.ionicframework.com/t/google-maps-native-not-working-in-browser-and-emulator/125824/6 "2021-07-19T21:43:54Z")