[SOLVED] Safari google map page not destroyed after pop

Ionic Framework ionic-v3
#1

I heard you like weird bugs?

So I noticed this yesterday, if someone faced it or have an id, that would be really appreciated

First, this happens only in Safari/iOS

I’ve got the following structure:

main page -> detail page which use component which use components where one is containing a google map

In the map component I create the map like

 let mapOptions: google.maps.MapOptions = {
                center: position,
                zoom: this.zoom,
                scrollwheel: false,
                draggable: false,
                disableDoubleClickZoom: true,
                streetViewControl: false,
                clickableIcons: true,
                fullscreenControl: true
            };
 
 this.map = new google.maps.Map(this.superMapElement.nativeElement, mapOptions);

The problem

I open main page, navigate to detail (navController.push), go back to main (navController.pop) => No problem

But then when do it again, I open main page, navigate to detail (navController.push), go back to main (navController.pop) => The back process occurs but instead of rendering again the main page I land on a blank page. When I look at the DOM, I still see the detail elements so I kind of have the feeling that someone the detail elements/components could not be destroyed

No error in the console

Is that enough weird?

Ah and yes, if I remove the map component from the detail page, I don’t face the problem anymore

Disclaimer: I don’t use the cordova-plugin-googlemaps plugin. This might not affect app using the plugin (even I didn’t tried)

#2

Are you using the addEventListener() or on() methods?

And the one() method before any other google maps method?

#3

Thx for the feedback

Actually I may have just found the problem, maybe

this.map = new google.maps.Map()

should only be created/called once in Safari. So I’m trying to save the map in a service and to reuse it in case it would have been already initialized…gonna keep posted

#4

The coffee I had this morning was stronger as the hours I spend on this yesterday

The problem is definitely the following: Don’t create your map again on Safari, this will break

The solution to this: Reuse your map aka initialize your google map only once

Cherry on the cake: Doing so, as of the 2nd display of it, the map will also be rendered more faster

I did like the following:

HTML:

In the HTML page, don’t add a single div for the map but a div inside a div

 <div #gmaps id="gmaps" class="gmap">
     <div></div>
</div>

TS:

The idea is to create the map, save it in a service and reuse it if necessary

 @ViewChild('gmaps') mapElement: ElementRef;

 ...
 
 // Here we query the div inside the div we reference
 let mapDiv: HTMLElement = this. mapElement.nativeElement.querySelector('div');
 
 // Here googleMapService is a provider/service I use to save the map element
 if (this.googleMapService.map) {
      // We get back the map
      this.map = this.googleMapService.gmap;
     
      // Here a tricks, we replace the contained div
      this.mapElement.nativeElement.replaceChild(this.map.getDiv(), mapDiv);

      // Of course, you could then here reset center or read markers if you have some
 } else {
     // We create the map on the contained div
     this.map = new google.maps.Map(mapDiv, mapOptions);

     // We save the map in the provider
     this.googleMapService.map = this.map;
 }
Ionic 3 - list / detail with google map problem only in Safari Browser
#5

How about using the create method that is recommended for the plugin?

Do not use this

this.map = new google.maps.Map()

but this:

this.map = this.googleMaps.create('map_canvas', mapOptions);

Maybe this method allows multiple maps on safari

#6

@Nexi Thx but I don’t (and don’t want to) use the cordova-plugin-googlemaps plugin

I added a disclaimer to my first post to make it clear, thx for pointing that out

#7

Oh okay so what plugin are you using? Or are you using the googlemaps-api with @types/googlemaps?

#8

@Nexi no plugin, that why I like this solution :slight_smile:

I use @types/googlemaps for the typescript support and added

<script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=...

in my index.html

Then I use a ViewChild to access to your element and create my map à la javascript

No plugin depency, no api, no external lib :thumbsup:

Note: My users could only use my app if internet is available, so I don’t have to support an offline map

1 Like
#9

I have another solution.
I hardcoded Google Maps Version to 3.31 because I noticed that Google released a new version a week ago.
To hardcode the version : <script src="https://maps.googleapis.com/maps/api/js?v=3.31&key=....></script>

#10

That may explain why I suddently faced the problem, thx for the hint

Anyway I have now implemented and deployed in store the above solution

#11