Google Maps only showing on 2nd click after navigating away

Ionic Framework ionic-v3
1

Hey guys,

I’m using the Javascript API Google Maps. I want to show them in a segmented view and after changing the way segments are being displayed I managed to get the map to show too.

My problem is, that it shows the first time you click on the segment. Then, if you go to another segment and come back, it doesn’t work anymore and the map doesn’t render the tiles, despite the console logging the map gets loaded. If you double-click on the segment though, it loads the map again. Can anyone help?

What I would also ideally like is on the second visit, to just show the map again, without the Animation of the marker, but that is not the main concern here.

This is the .ts file:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

declare var google;

@IonicPage()
@Component({
  selector: 'page-wg-detail',
  templateUrl: 'wg-detail.html',
})
export class WgDetailPage {

  @ViewChild('map') mapElement: ElementRef;
  map: any;

  details: string = "Details";

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad WgDetailPage');
  }

  loadMap(){

      console.log('Karte wird geladen')
    
       let latLng = new google.maps.LatLng(50.221339, 6.696611);
    
       let mapOptions = {
         center: latLng,
         disableDefaultUI: true,
         clickableIcons: true,
         zoom: 15,
       }
    
       this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
       google.maps.event.trigger(this.map, 'resize');
       this.addMarker();
    
     }

     addMarker(){
      
       let marker = new google.maps.Marker({
         map: this.map,
         animation: google.maps.Animation.DROP,
         position: this.map.getCenter()
       });
      
       let content = "Whatever";         
      
       this.addInfoWindow(marker, content);
      
     }

     addInfoWindow(marker, content){
      
       let infoWindow = new google.maps.InfoWindow({
         content: content
       });
      
       google.maps.event.addListener(marker, 'click', () => {
         infoWindow.open(this.map, marker);
       });
      
     }


}

This is the top part of the .html file: Where loadMap gets called

  <ion-toolbar no-border-top>
      <ion-segment [(ngModel)]="details">
          <ion-segment-button value="Details">
            <ion-icon name="clipboard"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="Mitbewohner">
            <ion-icon name="people"></ion-icon>
          </ion-segment-button>
          <ion-segment-button value="Karte" (click)="loadMap()">
            <ion-icon name="pin"></ion-icon>
          </ion-segment-button>
        </ion-segment>
  </ion-toolbar>

This is the part of the html file with the div of the map

       <div [hidden]="details != 'Karte'">
        <div #map id="map"></div> 
       </div>

With this in the scss file
I changed already around here and couldn’t finde a way to do it.

    .scroll {
        height: 100%
      }
 
      #map {
        width: 100%;
        height: 90vh;
      }

As I said, it loads fine the first time, but then it needs a double click to work and I dont know why.

I’m new to coding and Ionic so any help would be appreciated.

Merry christmas and enjoy the holidays
Lukas