Google Maps (cordova plugin) and Ionic 2

Ionic Framework ionic-v3
1

Hi everyone,

I’m trying to display a map using the google maps cordova plugin cordova-plugin-googlemaps.
I used the doc available on the ionic native part of the doc of ionic 2 and you can see a section for Google Maps.
The problem is that the doc is almost empty, there is only a single example of using so did a try.

Here is the code of the html page which should display the map:

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

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

This is my code for the typescript file where I use the map:

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {GoogleMap, GoogleMapsEvent} from 'ionic-native';

@Component({
  templateUrl: 'build/pages/about/about.html'
})
export class AboutPage {
  constructor(private nav: NavController) {
    let map = new GoogleMap('map');

    map.on(GoogleMapsEvent.MAP_READY).subscribe(() => {
      console.log("Map is ready!");
      map.setVisible(true);
      // map.showDialog();
      // map.getMyLocation();
      // map.showDialog();
    });
  }
}

The map is not visible on the page but when I uncomment the line map.showDialog() , it shows the map. So I don’t know why the map is not visible on the page :frowning:

What I also did:

  • When I added the plugin to my project, I took the url of the repo instead of the name of the plugin (it takes the current master version of the plugin and not the one on npm which doesn’t work with the lastest version of cordova-ios) --> I think that it should be mentioned on the doc on your website (http://ionicframework.com/docs/v2/native/google-maps/)

  • I created an API key on the Google Developer Console and configured the plugin with it, so there is no problem with that :slight_smile: (I always have the message in the log saying that ‘Map is ready!’)

I tried to find somebody who uses this plugin with Ionic 2 and what I always found was an ionic 2 app using the Google Maps JavaScript API, which is not the best (for me), and I would like to use the Google Maps Cordova Plugin.

I would appreciate if somebody could help me :blush:, I used this plugin on an app on ionic 1 without any problem but your new version of Ionic is so beautiful that I want to try it :slight_smile:

Have a nice day,

Julien

2
1 Like
3

Thanks a million for your help!

4

Hey Aaron,

Your git repo helped me a lot but I am running into a problem that you may be able to help with.

Installing your app onto my phone with my API key worked fine but when I put your exact info onto my map page it didn’t. I went a little further and made the app page my root page and it worked just fine.

The issue is that my Map page is the 4th page in my nav stack. What happens is my map page is transparent and I see the last page that got me to my map page but with Map as the title and I can’t click on anything on the previous page. The map page is on top but my other pages are not transparent maybe? In dev tools, they all have the transparent background style.

So, any ideas on how we get this to work if the map page is not the first page?

Thanks so much for any time you have for this.

Josh

5

Ok I am a little closer.

I see that even when I go to the Map page, all other pages still have the show-page class. When I change all but the map page to hide-page, the map shows up!

So now I just have to figure out how to remove the show-page class and add the hide-page class on all other pages when I go into the map page and then change it back when I leave the page.

Any help would be appreciated.

Thanks,
Josh

6

Hello,
I had the same problem and I solved it.
Try not to open the map with navCtrl.push but rather with a navCtrl.setRoot

When the page is root the map is well displayed.

7

@dolmayan62 Thanks… but won’t that destroy your nav stack?

I have been using this with success in the map.ts file:

ngOnInit(){
      let pageArray = document.getElementsByClassName("show-page");
      for(var i = pageArray.length-1; i>= 0; i--){
            pageArray[i].classList.remove('show-page');
      }
}
1 Like
8

Yes it’s detroy the nav stack.

I tried your solution and it’s work like a charm :wink:

Thanks !!

9

Glad to hear it… Sorry I didn’t put that up sooner

10

I have managed to get the map to display on the device an zoom to my current location. Does anyone know how to push markers on an Ionic 2 Google Map, how to click on map to get current location or how to show the change maptype icon to switch between map and satallite? I am new to Ionic 2 and struggling to get this to work.