# Google Maps - don't work **URL:** \ **Category:** ionic-v3\ **Created:** [June 23, 2016, 1:49pm UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637 "2016-06-23T13:49:22Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![rodrigoreal](https://avatars.discourse-cdn.com/v4/letter/r/ea666f/32.png) [@rodrigoreal](https://forum.ionicframework.com/u/rodrigoreal)\ **Post date:** [June 23, 2016, 1:49pm UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/1 "2016-06-23T13:49:22Z")
Well, i’m trying to use the google maps and its not working properly, it only works in the rootPage but when i try to load the maps in a page that is not the root the ion content gets transparent and don’t show the map. map.html ``` map
``` map.scss ``` .map { .scroll { height: 100%; } #map { width: 100%; height: 100%; } } ``` map.ts ``` import {Page} from "ionic-angular"; import {OnInit, Component} from "@angular/core"; import {GoogleMap, GoogleMapsEvent} from "ionic-native"; @Component({ templateUrl: "build/pages/map/map.html" }) export class MapPage { constructor(private navCtrl: NavController) { } ngOnInit() { setTimeout(() => { let map = new GoogleMap('map'); map.on(GoogleMapsEvent.MAP_READY).subscribe(() => console.log("Map is ready!")); }, 3000); } } ``` If i use this page as root it works perfect, but if i use another page as root and i push to the map page it don’t work, the navbar shows, the map try to loads(really buggy for like 1 sec and its get hidden) and then the ion content gets transparent/invisible and consequently the map. Anyone have any idea what is happening? I’m testing that on a real android device, not a browser, and i’m getting `this._next is not a function` in the console. ---
**Author:** ![matheo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/matheo/32/91507_2.png) [@matheo](https://forum.ionicframework.com/u/matheo)\ **Post date:** [June 23, 2016, 3:55pm UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/2 "2016-06-23T15:55:46Z")
Have you added the plugin? ```auto ionic plugin add cordova-plugin-googlemaps ``` I’m using the JS API, and not loading it on `ngOnInit` but on `ionViewLoaded` ---
**Author:** ![rodrigoreal](https://avatars.discourse-cdn.com/v4/letter/r/ea666f/32.png) [@rodrigoreal](https://forum.ionicframework.com/u/rodrigoreal)\ **Post date:** [June 23, 2016, 4:29pm UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/3 "2016-06-23T16:29:18Z")
@matheo yea i did. and i just created a project to show the problem: [https://github.com/rodrigoreal/ionic2-google-maps](https://github.com/rodrigoreal/ionic2-google-maps) At the `app.ts` if you use the rootPage as MapPage it works perfect, but if you use as HomePage and in the homepage you click at the button to push the map page it don’t. ---
**Author:** ![matheo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/matheo/32/91507_2.png) [@matheo](https://forum.ionicframework.com/u/matheo)\ **Post date:** [June 23, 2016, 4:43pm UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/4 "2016-06-23T16:43:17Z")
Seems like an issue to log on [ionic-native](https://github.com/driftyco/ionic-native) You may join this discussion: [https://github.com/driftyco/ionic-native/issues/236](https://github.com/driftyco/ionic-native/issues/236) ---
**Author:** ![aaronksaunders](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aaronksaunders/32/13729_2.png) [@aaronksaunders](https://forum.ionicframework.com/u/aaronksaunders)\ **Post date:** [June 24, 2016, 12:41am UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/5 "2016-06-24T00:41:09Z")
this is a known issue and has been logged in the past… take a look at my project here for a work around > **[aaronksaunders/ionic2GMapNative](https://github.com/aaronksaunders/ionic2GMapNative)** > > ionic2GMapNative - Integrating ionic2 Google Maps Native Plugin - IonicFramework ---
**Author:** ![cristianguedes](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/cristianguedes/32/102048_2.png) [@cristianguedes](https://forum.ionicframework.com/u/cristianguedes)\ **Post date:** [July 15, 2016, 9:14pm UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/6 "2016-07-15T21:14:03Z")
It works! Thansk! 🙂 ---
**Author:** ![malma67](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@malma67](https://forum.ionicframework.com/u/malma67)\ **Post date:** [July 18, 2016, 12:39am UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/7 "2016-07-18T00:39:54Z")
Hi Aaron, I noticed in your project you have: ``` ``` What do these do and are they essential? Many thanks. ---
**Author:** ![Corin](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@Corin](https://forum.ionicframework.com/u/Corin)\ **Post date:** [July 18, 2016, 1:25am UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/8 "2016-07-18T01:25:42Z")
Try this component: [http://angular-maps.com](http://angular-maps.com) ---
**Author:** ![aaronksaunders](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aaronksaunders/32/13729_2.png) [@aaronksaunders](https://forum.ionicframework.com/u/aaronksaunders)\ **Post date:** [July 18, 2016, 1:32am UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/9 "2016-07-18T01:32:30Z")
those are the cordova versions for ios and android that I used with the project ---
**Author:** ![malma67](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@malma67](https://forum.ionicframework.com/u/malma67)\ **Post date:** [July 18, 2016, 1:42am UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/10 "2016-07-18T01:42:14Z")
I’m having some trouble with this - can’t get it to work ![image](https://global.discourse-cdn.com/ionicframework/original/3X/3/c/3c39a4b9b5fcfb71f3ba3fdf88aefcf283f19cd3.PNG) The image shows what I get when i run on the device. I am running from Xcode - I do not get any errors reported whatsoever. When i click OK the alert goes away and im left with the black screen behind. ---
**Author:** ![malma67](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@malma67](https://forum.ionicframework.com/u/malma67)\ **Post date:** [July 18, 2016, 1:50am UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/11 "2016-07-18T01:50:59Z")
I’m trying with the following: ``` "@angular/common": "^2.0.0-rc.3", "@angular/compiler": "^2.0.0-rc.3", "@angular/core": "^2.0.0-rc.3", "@angular/http": "^2.0.0-rc.3", "@angular/platform-browser": "^2.0.0-rc.3", "@angular/platform-browser-dynamic": "^2.0.0-rc.3", "angularfire2": "^2.0.0-beta.2", "es6-shim": "^0.35.0", "firebase": "^3.2.0", "ionic-angular": "^2.0.0-beta.10" ``` This should be OK right? These are the only differences in my project compared with yours. ---
**Author:** ![malma67](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@malma67](https://forum.ionicframework.com/u/malma67)\ **Post date:** [July 18, 2016, 2:41am UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/12 "2016-07-18T02:41:19Z")
@aaronksaunders - Hey Aaron - I have been doing some further debugging. Seems that when I apply the recommended upgrade steps for beta 10 to your project it stops working. I then get a black screen. Would be very grateful if you know what causes this - maybe its due to the changes mentioned here: [https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#steps-to-upgrade-to-beta-10](https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#steps-to-upgrade-to-beta-10) Cheers ---
**Author:** ![hocstyrk](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hocstyrk/32/101773_2.png) [@hocstyrk](https://forum.ionicframework.com/u/hocstyrk)\ **Post date:** [July 18, 2016, 7:48am UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/13 "2016-07-18T07:48:54Z")
Iam having the same issues. Black screen. ---
**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\ **Post date:** [July 18, 2016, 9:05am UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/14 "2016-07-18T09:05:16Z")
Hey there, You’re missing two things here. 1 - You need to wrap all plugin calls with: ```auto this.platform.ready() .then( ()=>{ // execute code here } ); ``` 2 - It’s better to call the plugin’s constructor on `ngAfterViewInit`. The way the plugin works is that it looks for the element with the `id` you specified and it replaces it with the Google Maps component. If you call the method before the DOM is ready, the plugin will fail to find that element. … Also I think it’s worth mentioning that this plugin works only when you’re on a device/emulator. You will not see any results in the browser. If you need some sort of fallback you would have to implement that manually. I hope that helped! ---
**Author:** ![malma67](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@malma67](https://forum.ionicframework.com/u/malma67)\ **Post date:** [July 18, 2016, 10:34am UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/15 "2016-07-18T10:34:10Z")
Hi @ihadeed & @aaronksaunders Thank you for the reply. First, to confirm, I am testing this on the device so that is not an issue. Secondly I managed to get the following solution to work [https://github.com/aaronksaunders/ionic2GMapNative](https://github.com/aaronksaunders/ionic2GMapNative) This works fine when I clone the project, then run `npm install` followed by `cordova prepare` I load the app via Xcode and and run it on my device there are no errors and the map shows up fine. However I then follow the procedure mentioned here [https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#steps-to-upgrade-to-beta-10](https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#steps-to-upgrade-to-beta-10) to upgrade this project which is based on ionic beta 8 to the latest and greatest beta 10. I then try to run it again via Xcode and this time there are still no errors but now I have a black screen as per the image in my previous post. So without using `ngAfterViewInit` I did manage to get the plugin to work reliably in ionic beta 8. Are you saying that for ionic beta 10 `ngAfterViewInit` is the crucial step to get things to work? Many thanks for you help ---
**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\ **Post date:** [July 18, 2016, 11:32am UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/16 "2016-07-18T11:32:24Z")
No, the code doesn’t really have to be in there. By the time `platform.ready()` and `GoogleMaps.isAvailable()` both resolve, your DOM is most likely to be ready. Using `ngAfterViewInit` or equivalent just helps by being on the safe side. So in short, you need to wait for the following before being able to display a map: `ondeviceready` event which is `platform.ready()` in ionic2, `GoogleMaps.isAvailable()`, and the DOM to be ready. ---
**Author:** ![malma67](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@malma67](https://forum.ionicframework.com/u/malma67)\ **Post date:** [July 18, 2016, 12:15pm UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/17 "2016-07-18T12:15:18Z")
`export class HomePage { private map: GoogleMap; constructor(private \_navController: NavController, private platform: Platform) { this.platform.ready().then(() =\> this.onPlatformReady()); } private onPlatformReady(): void { this.map = new GoogleMap(‘map\_canvas’); ``` GoogleMap.isAvailable().then(() => { this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => { alert("GoogleMap.onMapReady(): " + JSON.stringify(data)); let myPosition = new GoogleMapsLatLng(38.9072, -77.0369); console.log("My position is", myPosition); this.map.animateCamera({ target: myPosition, zoom: 10 }); }); }); ``` } ` I am doing it like above. This works with ionic beta 8 but not with ionic beta 10, after following the recommended upgrade steps… ---
**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\ **Post date:** [July 18, 2016, 12:17pm UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/18 "2016-07-18T12:17:45Z")
```auto export class HomePage { private map: GoogleMap; constructor(private _navController: NavController, private platform: Platform) { this.platform.ready().then(() => this.onPlatformReady()); } private onPlatformReady(): void { GoogleMap.isAvailable().then(() => { this.map = new GoogleMap('map_canvas'); this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => { alert("GoogleMap.onMapReady(): " + JSON.stringify(data)); let myPosition = new GoogleMapsLatLng(38.9072, -77.0369); console.log("My position is", myPosition); this.map.animateCamera({ target: myPosition, zoom: 10 }); }); }); } ``` ---
**Author:** ![malma67](https://avatars.discourse-cdn.com/v4/letter/m/65b543/32.png) [@malma67](https://forum.ionicframework.com/u/malma67)\ **Post date:** [July 18, 2016, 12:18pm UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/19 "2016-07-18T12:18:54Z")
Ahhh. I see there problem now! Thank you very much. ---
**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\ **Post date:** [July 18, 2016, 12:22pm UTC](https://forum.ionicframework.com/t/google-maps-dont-work/55637/20 "2016-07-18T12:22:33Z")
`isAvailable()` checks if the plugin is available on the device (if the native SDKs are available)… > **[mapsplugin/cordova-plugin-googlemaps](https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Map.isAvailable())** > > cordova-plugin-googlemaps - Google Maps plugin for Cordova Also if you read above, I recommend waiting for the DOM to be ready as well before you try to create your map. I’m not sure if these suggestions are the actual fix, but from my understanding of the plugin I find these steps necessary to have a map rendered successfully 100% of the time. [Next page](https://forum.ionicframework.com/t/google-maps-dont-work/55637.md?page=2)