Google Maps - don't work

Ionic Framework ionic-v3
1

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

<ion-navbar *navbar>
  <ion-title>map</ion-title>
</ion-navbar>

<ion-content class="map">
    <div id="map"></div>
</ion-content>

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.

1 Like
2

Have you added the plugin?

ionic plugin add cordova-plugin-googlemaps

I’m using the JS API, and not loading it on ngOnInit but on ionViewLoaded

3

@matheo yea i did.
and i just created a project to show the problem: 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.

1 Like
4

Seems like an issue to log on ionic-native

You may join this discussion: https://github.com/driftyco/ionic-native/issues/236

5

this is a known issue and has been logged in the past…

take a look at my project here for a work around

1 Like
6

It works! Thansk! :slight_smile:

7

Hi Aaron, I noticed in your project you have:

  <engine name="ios" spec="~4.0.0" />
  <engine name="android" spec="~5.1.0" />

What do these do and are they essential?

Many thanks.

8

Try this component:
http://angular-maps.com

9

those are the cordova versions for ios and android that I used with the project

10

I’m having some trouble with this - can’t get it to work

image
IMG_7667.PNG750×1334 20.9 KB

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.

11

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.

12

@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

Cheers

13

Iam having the same issues. Black screen.

14

Hey there,

You’re missing two things here.

1 - You need to wrap all plugin calls with:

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!

15

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

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 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

1 Like
16

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.

17

`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…

18 
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 });
    });
  });
}
19

Ahhh. I see there problem now!

Thank you very much.

20

isAvailable() checks if the plugin is available on the device (if the native SDKs are available)…

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.