Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 229646

GoogleMaps is not showing in ion-segment

$
0
0

I'd like to show GoogleMaps in ion-segment. My code so far:
.html

<ion-header>
  <ion-navbar>
   <ion-segment [(ngModel)]="dashboard" (change)="onSegmentChanged($event)">
        <ion-segment-button value="list">
          Liste
        </ion-segment-button>
        <ion-segment-button value="map">
          Karte
        </ion-segment-button>
      </ion-segment>

  </ion-navbar>
</ion-header>

<ion-content>
  <div [ngSwitch]="dashboard">

    <div *ngSwitchCase="'list'">
        some content...
    </div>

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

    </div>

.ts

initMap() {

        let LatLng = new google.maps.LatLng(52.491114, 13.394625);

        let mapOptions = {
            center: LatLng,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
    }

    onSegmentChanged($event) {
        if ($event == 'map') {
            this.initMap();
         }
    }

.scss

#map{
    height:100%;
  }

It's related to this topic: https://forum.ionicframework.com/t/how-to-call-custom-function-after-ngswitch-new-view-is-created/48461/6

But GoogleMaps is not showing. I'm new to ionic and angular, so I can not find any other solution. Can anybody help- I would really appreciate!


Viewing all articles
Browse latest Browse all 229646

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>