Multiple native maps workaround


#1

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:


#2

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


#3

I have the same issue:


#4

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


#5

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:


#6

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


#7

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