Ionic 5 Angular: Google Maps InfoWindow Padding Issue in iOs Simulator

Question

I'm running into an issue with how a google maps InfoWindow is being rendered in my iOs simulator with Ionic5 Angular.

Here's an image:

As you can see, the padding is inconsistent, especially on the far right where the text is against the boundaries of the InfoWindow. It may be a timing issue, because if I delay the creation of the InfoWindow (with a setTimeout()) by a couple of seconds it usually renders correctly.

This doesn't happen in Android when I emulate the same project, as the padding is correct on that platform. I've tried to manually add styling to the InfoWindow content, but there shouldn't be any reason I need to selectively add padding to iOs as opposed to Android. I also shouldn't have to add an arbitrary timeout.

If anyone has any ideas it would be appreciated. I've boiled the code down as much as possible.

Simulator is iPhone 11 (13.2.2).

Here's my Ionic info:

Ionic:

   Ionic CLI                     : 5.4.2
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.803.23
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 28 other plugins)

Utility:

   cordova-res : 0.6.0 (update available: 0.15.1)
   native-run  : 0.2.8 (update available: 1.0.0)

System:

   Android SDK Tools : 26.1.1 (/Users/me/Library/Android/sdk)
   ios-sim           : 8.0.2
   NodeJS            : v10.9.0 (/Users/me/.nvm/versions/node/v10.9.0/bin/node)
   npm               : 6.10.3
   OS                : macOS Catalina
   Xcode             : Xcode 11.5 Build version 11E608c

Here's the .ts file:

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-dynamic-map',
  templateUrl: './dynamic-map.component.html',
  styleUrls: ['./dynamic-map.component.scss']
})
export class DynamicMapComponent implements AfterViewInit {
  @ViewChild('googleMap', { static: false }) private googleMap: ElementRef;

  private map: google.maps.Map;
  private marker: google.maps.Marker;
  private lat: number = 37.066076;
  private lng: number = -119.897168;

  constructor() {}

  ngAfterViewInit() {
    const mapProp: any = {
      center: new google.maps.LatLng(this.lat, this.lng),
      zoom: 13
    };

    this.map = new google.maps.Map(this.googleMap.nativeElement, mapProp);
    google.maps.event.addListenerOnce(this.map, 'tilesloaded', () => {
      this.addMarkerWithInfoWindow();
    });
  }

  addMarkerWithInfoWindow() {
    const infoWindow = new google.maps.InfoWindow({
      content: '<b>Address</b>: 1234 W Main Street'
    });

    this.marker = new google.maps.Marker({
      position: new google.maps.LatLng(this.lat, this.lng),
      map: this.map
    });
    infoWindow.open(this.map, this.marker);
  }
}

And the .html

<div #googleMap style="width:100%; height: 100%" class="googleMap"></div>

Answer 1

Maps library is adding overflow: scroll to the container when creating InfoWindow pop up. While this works for other browsers, it does not seem to behave the same for mobile browser for iPhone.

Add following style to fix the issue:

.gm-style .gm-style-iw-d {
  -webkit-overflow-scrolling: auto;
}