#StackBounty: #angular #google-maps #ionic5 Ionic 5 Angular: Google Maps InfoWindow Padding Issue in iOs Simulator

Bounty: 50

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


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.