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>

Nichrome

possibly some style is affecting it. Would you be able to share scss file? Did you try with style #googleMap img { max-width: none; }? – Eloisaeloise

@DipenShah This is a blank project so there is nothing in the scss file. Adding the style you indicated also did not change things. – Nichrome

Are you using any styling library by any chance? For example, bootstrap? – Eloisaeloise

@DipenShah I'm using the technologies specified in the Ionic Info, and nothing else. If you create a project with those specifications, you will see the same behavior. – Nichrome

Sorry couldn't get my hands on emulator earlier, I think I have spotted the issue. Let me know if that works for you. – Eloisaeloise

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;
}

Eloisaeloise

Referencing class names belonging to the Maps api is not advised – Blum

@MichaelDoye I agree but I am not sure if there is any alternative except for adding custom style for info popup. Also, I was able to see the issue on JavaScript app, so I am not sure if it has anything to do with Angular – Eloisaeloise

@Dipen Shah It did not, the issue remains. – Nichrome

@Nichrome can you try without using #googleMap in the selector? I did check it on the device and emulator it is working fine for me. – Eloisaeloise

@DipenShah Removing the #googleMap portion of the selector does not work either, the issue remains. – Nichrome

Last thing I would try is to put style it in application style file as opposes to component style file, it's strange it's not working for you – Eloisaeloise

@DipenShah I have attempted to put this in the global style sheet as well as the component style sheet. – Nichrome

@Nichrome can you check if ` -webkit-overflow-scrolling: touch;` is working? For me it isn't, but for you it might so let's give it a try. – Eloisaeloise

@DipenShah I'm afraid modifying the CSS is not going to work for our production environment, as the best practices states, this can cause breaking changes without notice, which we can't have. – Nichrome

@Nichrome the reason it is not working (at least in my case) is because Safari on mobile cannot understand overflow: scroll css, that is set by maps sdk as inline style. Only way to fix this is either fix it in library or override it in application style. I agree it is not standard practise, but unless it is fixed by sdk it self, you will not be able to fix it. – Eloisaeloise

Unfortunately I tried overriding all the 'overflow:scroll' and this doesn't work. I cannot find any CSS that fixes this. It is still an issue on the google maps example page! developers.google.com/maps/documentation/javascript/examples/…. Has anyone got a workaround for this that doesn't add way too much padding to non iOS browsers? – Historiographer

Overflow: hidden !important; on a few elements, combined with setting !important padding and I managed to get a pretty much consistent looking infowindow across all devices, my infowindows never need to scroll so overflow hidden is fine in my case – Historiographer

Answer 2

Just came up with another solution. The right and bottom spacing comes from overflow: scroll added inline to .gm-style .gm-style-iw-d. So the idea is to remove that spacing since behavior is not consistent. Then add your own spacing using your custom styles as needed. In this case your custom spacing will be consistent on Android and iOS.

To remove spacing:

.gm-style .gm-style-iw-d {
  overflow: auto !important;
}

P.S. Thanks to those two answers for info:

• Dipen Shah's answer
• Ivan Vilch's answer

Solidify

Answer 3

@jwBurnside You can add style for your contentString which is in InfoWindow.

Your InfoWindow

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

and your css to be

#content {
  padding: 5px;
}

It'll be fix your right alignment in InfoWindow popup.

Reference: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

Koser

This will not suffice, because it will add unnecessary padding when I run this in Android. – Nichrome

As above, fixes on iOS only, adds unneeded padding and breaks layout on other browsers – Historiographer