Multiple maps using Ionic Native Google Maps

Ionic Native
1

I’ve been struggling with using cordova-plugin-googlemaps to create multiple maps in different views within the same app. I think I’ve come up with a decent solution and figured I’d share it here since I’ve seen others try to figure this out.

My app has a root level Map tab and a subpage that displays the secondary map(s) using a modal controller. The issue was that, although both maps initially work fine, a previously-functional main map would become unresponsive when the secondary map was initialized (even when manually removing it when the modal was dismissed). Oddly, HTML controls in the main map continued to work even though the map itself was not responsive to touch. So I knew in those cases I might need to remove and re-initialize the main map, but I wanted to make sure that only happened when it was absolutely necessary (because the main map is an important part of my navigation, I needed to ensure that when a user returns to the map using a back button, it would maintain the previous state/location).

So my solution was to fire an event from within the modal controller…

// modal controller for secondary map
ionViewDidLeave() {
  events.publish('rebuildMainMap'); 
}

Then I incorporate the event into my main map tab…

// within constructor for main map page
this.events.subscribe('rebuildMainMap',()=>{
    this.initialMapLoad=true; // reset 
    try{ // remove map if it already exists
      this.mapProvider.map.remove();
    }catch(e){
      console.log(e);
    }
})

// ...

ionViewWillEnter(){
  if (this.initialMapLoad) {
      // first load only...
      this.mapProvider.loadMap('map',locations,false); // custom func to load map
      this.initialMapLoad = false;

  } else {
      // subsequent loads...
      this.mapProvider.resetMapContainer('map',true,600); // custom func to setDiv() and setVisibility()
  }
}

Obviously, the event lets me control exactly when the map is rebuilt (i.e. when the secondary map has been in use and the user won’t be too disrupted by the changed state). But it wasn’t clear to me until today that removing and rebuilding the map is what I needed to do. Thus, I’m sharing it here. You could use this general method to cycle through any number of native maps.

The code above is somewhat simplified, so this will be more useful if you’ve already used cordova-plugin-googlemaps. I’m open to comments and suggestions. The only issue so far is that this means my custom map styles seem to load in later than usual (after the map is visible instead of before), but that’s a different issue. Hope this helps.

EDIT: I should add that I created two separate providers for maps. You could also create the maps directly in your page controller, but the key issue I think is that you need separate handles for each map.

2 Likes
2

To me It happens exactly what you are mentioning here. I have one page in the stack which has a map already created. When I push another view into the stack that also has a map, the second map is not shown. This behaviour does not make any sense, it’s really annoying.

I resolved it in a different way. In my case, the issue was caused by both maps having the same ID attribute in the view. I changed it in one of the pages and it is working.

2 Likes