Ionic 2 Segment - Google Maps Bug

Ionic Framework ionic-v3
1

Hi,

i have a Ionic 2 Segment and have two Problems.
The first is that when i want to initialize Google Maps and the Segment is not the selected segment or the visible segment i get the following error code:
TypeError: Cannot read property 'nativeElement' of undefined

The second Problem is, the div with the Google Maps is empty after i clicked on a other segment see the video:

Thanks,
Daniel

2

Hello Daniel…

I have the same problem… In my app. How you solved this problem. Can you post for me?

You finded any info at sites?

Thanks.
Romildo (romildopaiter@gmail.com

3

I have same issue, how did you fixed?

1 Like
4


Here is a working solution

5

The problem is the [ngSwitch]="segment" respective the *ngSwitchCase=" which is a) very aggressive coz it destroys the #map div b) bit lazy to provide the information about div to be shown. My solution was to replace all the *ngSwitch in the content with some separate divs that are all hidden by using [hidden]="segment != 'selected_segment'". The page starts to download, this.segment is by default ‘map’, Google maps is initialized and then (all in background before the page is actually rendered). After this.map = new google.maps.Map(...) you can even change the this.segment to something else. The initialized Gmap won’t show up, but will be available once the user selects map segment.