Google maps do not render

Ionic Framework ionic-v3
1

Hi all,
I have a small problem - in my app I have implemented google maps. Everything work until I redirect to page with map automatically after some http action on other page. Map isn`t rendered but console log is wrote.

My code is:

loadMap() {

    GoogleMap.isAvailable().then(() => {

        this.map = new GoogleMap(document.getElementById('map'));

        // listen to MAP_READY event
        this.map.one(GoogleMapsEvent.MAP_READY).then(
            () => {
                console.log('Map is ready!');

                // create LatLng object
                let coord: GoogleMapsLatLng = new GoogleMapsLatLng(this.shift.address.latitude, this.shift.address.longitude);

                // move the map's camera to position
                this.map.moveCamera({
                    target: coord,
                    zoom: 16,
                    tilt: 0
                });

                // create new marker
                let markerOptions: GoogleMapsMarkerOptions = {
                    position: coord,
                };


                this.map.addMarker(markerOptions)
                    .then((marker: GoogleMapsMarker) => {
                        marker.showInfoWindow();
                    });
            }
        );

    });

}

In constructor:

this.platform.ready().then(() => {
        this.loadMap();
    });

Does anybody know how to fix this?

Thanks

2

By documentation I changed this line:

to:

this.map.on(GoogleMapsEvent.MAP_READY).then(

But map still do not render after auto redirect :-/

3

I had a similar problem when I redirected from a modalController using his own NavController. I solved this issue, setting the page parent NavController as parameter when calling to open the modal page and using this NavController to redirect to another page. Maybe this works for you.

4

Hi. I am not sure if I understand you. I am redirecting back by default ionic NavController. And to not have modal but pages. And use push() function.

5

Are you calling to the GoogleMaps plugin more than once?
You can try putting this in your map controller:

ionViewWillLeave() { this.map.remove(); }

With this you make sure to delete the map every time you leave the view.

6

The solution was replace component page by modal. So thanks for your advice.