CODEWITHSUNDEEP
angulargoogle-mapsionic5
jwBurnside
jwBurnside

Reputation: 887

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

Upvotes: 6

Views: 1182

Answers (3)

Konstantin Lyakh
Konstantin Lyakh

Reputation: 921

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:

Upvotes: 0

Dipen Shah
Dipen Shah

Reputation: 26085

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.

enter image description here

Add following style to fix the issue:

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

Upvotes: 1

Arunkumar Ramasamy
Arunkumar Ramasamy

Reputation: 781

@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

Upvotes: -1

Related Questions