<ion-segment> <div> Google Map not showing

The google maps is displayed when the page is loaded.
But when the ion-segment is toggled , the maps is not displayed.
Below is my ionic 2 code:

<ion-header>
  <ion-toolbar no-border-top>
    <ion-segment [(ngModel)]="social" (ionChange)="segementChangeAction()">
      <ion-segment-button value="activity">
        Map
      </ion-segment-button>
      <ion-segment-button value="messages">
        Messages
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>



<ion-content no-bounce>

  <div [ngSwitch]="social">

    <div *ngSwitchCase="'activity'">
        <div #map id="map"></div>
    </div>


    <div *ngSwitchCase="'messages'">
      Some text.....        
    </div>

  </div>
    
</ion-content>

I solved the issue with the below code:

<div [ngSwitch]="social">
  <div [style.display]="social == 'activity' ? 'block' : 'none'">
    <div #map id="map"></div>
  </div>
  <div *ngSwitchCase="'messages'">
    Some text.....        
  </div>
</div>

@biranchi125 Hi, i am using the map in 3rd segment and using it the same way as you have done. But i am uable to view map in my segment. Can you help me out where i am doing wrong?

<ion-toolbar no-border-top>

<ion-segment [(ngModel)]="section">
  <ion-segment-button value="latest">
    latest
  </ion-segment-button>
  <ion-segment-button value="news">
    news
  </ion-segment-button>
 <ion-segment-button value="map">
    map
  </ion-segment-button>
</ion-segment>
</ion-header>

<ion-content no-bounce>

<div [ngSwitch]="section">
  <div *ngSwitchCase="'latest'">      
</div>

<div *ngSwitchCase="trending'">
  Some text.....        
</div>

<div [style.display]="section == 'map' ? 'block' : 'none'">
  <div #map id="map"></div>
</div>
</div>

</ion-content>

Hey there, is there any other solution? I’ve tried the following as well: How to call custom function after ngSwitch new view is created but it didn’t work for me.
Would be great to get some help. Thanks!

Everything seems to be correct. Check if ‘trending’ is there in section. Else try with 2 segments if it works , then try with the third segment.

in my case, it only worked with

@ViewChild('mapagoogle') theMap: ElementRef;
		setInterval(()=>{
			if(this.casesegment == 'anothersegment'){
				this.theMap.nativeElement.hidden = true;
			}else{
				this.theMap.nativeElement.hidden = false;
			}
		},1000)
<div id="mapagoogle" style="height: 100%;" #mapagoogle></div>
<div [ngSwitch]="casesegment">
		
		<div  *ngSwitchCase="'anothersegment'">..........

1 Like