Wednesday 21 October 2020

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

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:

enter image description here

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 (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

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>


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

No comments:

Post a Comment