After opening url to Google Maps or Waze, and navigating back, other map links don't function on Android/the app blanks out on iOS

Ionic Framework
1

After opening URL to google maps or Waze, and navigating back, the app blanks out on iOS/other map links don’t function on Android.

Hi all.

The important part of this bug is that it is triggered by running the app as a progressive web app. I thought I had solved it upon testing with the Ionic dev app and on my local machine but the moment I use the project as a web app it’s broken again.

So the app is for a job management system where you can mark your shifts and see details for a job etc.
Part of the functionality of seeing a job’s details is that you can choose to open the job’s site location in either Waze or Google Maps and instantly get directions.

Simple enough, the address to the job site is stored in firebase and already in retrieved in the component. The longitude and latitude are concatenated into a string/link that opens when you click either the Waze or google maps buttons:

export class JobDetailModalComponent implements OnInit {
  @Input() job: any;
  googleMapsUrl: string;
  WazeUrl: string;

  constructor(public modalController: ModalController) { }

  ngOnInit() {
    console.log(this.job)
    if (this.job.latitude && this.job.longitude) {
      this.googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${this.job.latitude}+${this.job.longitude}`;
      this.WazeUrl = `https://waze.com/ul?ll=${this.job.latitude},${this.job.longitude}&z=10`;      
    } else {
      this.WazeUrl = `https://waze.com/ul?q=${this.job.address}%20${this.job.city}%20${this.job.state}&ll=${this.job.latitude},${this.job.longitude}&navigate=yes`;  
      this.googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${this.job.address}+${this.job.city}+${this.job.state}`;
    }
  }

  openMaps(type) {
    // window.open(encodeURI(`https://waze.com/ul?q=${this.job.address}%20${this.job.city}%20${this.job.state}&ll=${this.job.latitude},${this.job.longitude}&navigate=yes`), '_system', 'location=no');

    if (type === 'google') {
      // window.open(this.googleMapsUrl);
      window.open(encodeURI(this.googleMapsUrl), '_system', 'location=no');
    } else {
      window.open(encodeURI(this.WazeUrl), '_system', 'location=no');
    }
  }

  dismiss() {
    this.modalController.dismiss({
      'dismissed': true
    });
  }

}

Here’s a sample of how it’s supposed to function as tested on the ionic dev app:
Please excuse me blurring out certain elements, for privacy reasons.
Tested on dev app video on youtube
https://youtu.be/Zo_J00pDfkM

Here’s a sample of the error:
Please excuse me blurring out certain elements, for privacy reasons.
Tested as a PWA video on youtube
https://youtu.be/KPAtS7lnumI

I originally thought it had something to do with the initial window opening, that’s why I added the *encodeURI(this.googleMapsUrl), ‘_system’, 'location=no *, to no avail.

Any ideas are appreciated.
Thanks in advance. :raised_hands:

2

I’ve also tried adding and using https://ionicframework.com/docs/native/in-app-browser/ to no avail.

3

https://stackoverflow.com/questions/55350236/in-app-browser-open-link-in-new-tab-in-ionic-3-pwa
https://stackoverflow.com/questions/40267276/opening-blank-links-inside-inappbrowser

4

<a href="geo:latitude, longitude"> go </a>
go
Work perfectly!!!

5

To open default app navigation (let the user choose the one install on his device)

    const lng = 42.00000;
    const lat = -0.001;
    const geocoords = lat + ',' + lng;
    const label = encodeURI('7 East Street'); // encode the label!
    window.open('geo:' + geocoords + '?q=' + geocoords + '(' + label + ')', '_system');

it works with waze and google maps
it adds a marker on the map when opening the app