Multiple native maps workaround

Hi guys,
I’m building an app that needs 2 maps, I want to use the native one because I think it provides a much better UX, but we are limited to one map per app. I use a tabs navigation.

I though of some workaround, but I am still relatively new to Ionic so I don’t really know if they can work.

  1. Load the map into an independent view and load this view in both page.

  2. When you click on a tab that requires a map, you load always load the page where the map is, but in a different “state”, either by passing a variable or by running a function. The problem here is that the NavParams on the tabs are only loaded once.

If you know how I can make any of these work, or you have any other idea, I would be really happy to hear from you !

Thanks :slight_smile:

@joshmorony, I read your tutorial on integration the native Google maps and you mention that it’s not possible to have multiple maps. But I was wondering if you know any workarounds to use in different circumstances.

Thanks !

I have the same issue:

Hello there, I manage to create the map in a service, and when I switch the view, I don’t reload the map I just reattached the map to the new dom element :

this.map.setDiv(document.getElementById(newDomElement));

Hey @ArnaudDev for my part I’ve realoded the same page in a different state by subscribing to an event. But I don’t know why it seems to have affected the change detection in this page… Could you give us a little bit more information / pieces of code about your implementation ?
It would be really appreciaded !

Thanks :slight_smile:

actually it can’t be done, I had some bug in my content. You actually need to recreate the map each time you change the view, that’s how it works, you can’t go through this

Okay so there isn’t any other workaround that what I did ?

There is a workaround for this that works well. this.googleMap is the instance of map created via GoogleMaps.create().

ionViewWillUnload(): void {
if (this.googleMap) {
            this.googleMap.setDiv(null);
            this.googleMap.remove();
            this.googleMap = null;
        }
}