Ionic-framework: Google Maps Cordova plugin not working inside Modal dialog

[marcelgoya]

Short description of the problem:

Opening the map controller via this.nav.push() works perfectly fine but there seems to be a problem when I load the dialog via modal.present() because the underlying views don't seem to be made transparent.

What behavior are you expecting?

Full transparency of the underlying views

See http://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/

Which Ionic Version? 1.x or 2.x

Ionic 2

[guillenotfound]

Case 1: https://drive.google.com/file/d/0BzzwDw5jEO0xZFBYMndFYUY3VGs/view

Modal ->

• Setting .app-root visibility:hidden let me see the map

Case 2: https://drive.google.com/file/d/0BzzwDw5jEO0xRGFhWWpBZkoyYVk/view

SubPage ->

• I can see the map without doing anything.

[marcelgoya]

Just tested the visibility:hidden css hack. It doesn't work for me but setting it to opacity: 0 does the trick. Also a big problem is that when you open a modal dialog on a tablet / ipad and using the css from above, it either does not work or makes the background completely transparent (see screenshots).

[tlancina]

I'm not sure this is a framework issue, so much as a known limitation of the plugin: https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/map#how-does-the-plugin-work.

If you know how the map should be displayed, you'll probably need to set the styles of parent/background elements accordingly, either by making them not visible or by overriding the class that the plugin automatically adds (for elements that you know _should_ stay visible).

[marcelgoya]

You're right, it's a limitation of the plugin and not the framework. I solved the problem by simply loading the modal as a normal dialog on a tablet screen. Thanks a lot for your help 👍

[dalezak]

@marcelgoya Can you share a snippet showing loading the modal as a normal dialog?

I'm running into the same issue trying to load the map inside a modal, can't get it working :cry:

[whatnowangga]

is this solved ?? im having got this problem

[Exormeter]

I have the same problem, did you find a workaround?

[MargaretaKusan]

Any info on this? Did anyone came up with any hack?
I have a navigation stack > modal > modal-with-map. I can set the background of the middle modal to transparent, but then the last view of navigation stack is visible.
I can see the map if I set "visibility: hidden" on ion-page, but it hides the navigation bar also and it is applied to the whole app.

[dmitrirussu]

I had same problem... I have done a fix for that using Angular ngZone..

` loadMap(): void {
this.zone.run(() => {
this.helper.showLoader({message: APP_CONFIG.MESSAGES.LOADING_HTTP_REQUEST});

  this.map = GoogleMaps.create('map_canvas', {
    mapType: 'MAP_TYPE_NORMAL',
    camera: {
      target: {
        lat: this.currentPosition.coords.latitude,
        lng: this.currentPosition.coords.longitude
      },
      zoom: 10
    }
  });

  this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
    console.log('map ready');
    this.helper.hideLoader();
    // this.requestDeviceCurrentPossition();
    this.mapReady = true;
  });
})

}`

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.