Angular Google Map on multiple Tabs with same Controller and same Template

Question

I'm working with IONIC and AngularJS and have a Google Map included. I have a template and a Controller for this map and I will use the map on two Tabs.

.state('tab.map1', {
  url: '/tab1/map',
  views: {
    'map1-tab': {
      templateUrl: 'templates/map.html',
      controller: 'MapController'
    }
  }
})
.state('tab.map2', {
  url: '/tab2/map',
  views: {
    'map2-tab': {
      templateUrl: 'templates/map.html',
      controller: 'MapController'
    }
  }
})

HTML:

<div id="map"></div>

Controller:

$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

URL on the first Tab: /tab1/map

URL on the second Tab: /tab2/map

Now when I call one of the URL's everything is fine and I can see my map. But when I change the tab I can't see the map anymore. the div seems to be empty. After page reload, the map is visible.

Does anybody knwo how to deal with the "same" page on multiple tabs? Thanks in advance.

sbr11 · Accepted Answer · 2014-06-24 06:13:54Z

2

If someone else has the same issue, here my solution:

The problem was, that I used the same HTML for both tabs, the div's shouldn't have the same id.

.state('tab.map1', {
  url: '/tab1/map',
  views: {
    'map1-tab': {
      templateUrl: 'templates/map1.html',
      controller: 'MapController'
    }
  }
})
.state('tab.map2', {
  url: '/tab2/map',
  views: {
    'map2-tab': {
      templateUrl: 'templates/map2.html',
      controller: 'MapController'
    }
  }
})

HTML for first Tab:

<div id="map1"></div>

HTML for second Tab:

<div id="map2"></div>

And in my controller logic

if ($location.path() == 'tab1\map'){
  $scope.map = new google.maps.Map(document.getElementById('map1'), mapOptions);
}else{
  $scope.map = new google.maps.Map(document.getElementById('map2'), mapOptions);
}

That is working for me, map is always visible when changing between tabs.

answered Jun 24, 2014 at 6:13

sbr11

1231 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

koo9 Over a year ago

yes, looks like google map enforcing the one instance per app by holding onto the element. when you instantiate the map with the same element, it will throw an exception. which means one must keep that page in the navigation stack (in this case, it's in the tab, tab will hold one to all its tab pages).

koo9 Over a year ago

i mean one instance per element which is bad, that means one need to keep that page in the DOM, this prevent some of the navigation scenarios with ionic 2.

webdevinci · Accepted Answer · 2016-03-24 17:54:47Z

0

The above answer is a start, you will need two instances of the map. if that still doesn't work, try triggering a google map 'resize' when returning to the map page:

google.maps.event.trigger(map, 'resize');

http://code.google.com/apis/maps/documentation/v3/reference.html#event

(I had a similar issue in ionic 2, in which I solved it by using the Navigation array to push and pop each page rather than navigating to it, but I believe Ionic 1 uses actual URL paths.)

answered Mar 24, 2016 at 17:54

webdevinci

3103 silver badges11 bronze badges

2 Comments

koo9 Over a year ago

having the same issue with google map, when navigating to it, google.maps.Map(..) constructor throw an exception. how did you use Navigation array to push/pop the page? currently using this.nav.push(MapPage, data) to navigating to the map page. thx!

koo9 Over a year ago

I see what you are saying, so your map page is never unloaded. just like another tab page that stays there but not visible. but that wont' work for my scenario, i need to show the location base on the user's selection and center that location.

Collectives™ on Stack Overflow

Angular Google Map on multiple Tabs with same Controller and same Template

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related