title: Ionic 5 Angular: Google Maps InfoWindow Padding Issue in iOs Simulator
body: <p>I'm running into an issue with how a google maps InfoWindow is being rendered in my iOs simulator with Ionic5 Angular.</p>
  <p>Here's an image:</p>
  <p><a href="https://i.stack.imgur.com/zjXpz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zjXpz.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <p>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.</p>
  <p>If anyone has any ideas it would be appreciated. I've boiled the code down as much as possible.</p>
  <p>Simulator is iPhone 11 (13.2.2).</p>
  <p>Here's my Ionic info:</p>
  <pre><code>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 (cordova-lib@9.0.1)
     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
  </code></pre>
  <p>Here's the .ts file:</p>
  <pre><code>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', () =&gt; {
        this.addMarkerWithInfoWindow();
      });
    }
  
    addMarkerWithInfoWindow() {
      const infoWindow = new google.maps.InfoWindow({
        content: '&lt;b&gt;Address&lt;/b&gt;: 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);
    }
  }
  </code></pre>
  <p>And the .html</p>
  <pre><code>&lt;div #googleMap style=&quot;width:100%; height: 100%&quot; class=&quot;googleMap&quot;&gt;&lt;/div&gt;
  </code></pre>