Event MAP_READY fired only once


#1

I’m using cordova google map plugin.
In the homepage I load and show a map using:

this.map = new plugin.google.maps.Map.getMap(mapEle, {
            'latlng' : centroBounds,
            'zoom' : zoom,
            'bearing': 50,
            'tilt': 30,
            'backgroundColor': 'white',
            'controls': {
                'compass': true,
                'myLocationButton': true,
                'indoorPicker': true,
                'zoom': true,
            },
        });
        console.log('Map should be loaded.');     
        this.map.one(plugin.google.maps.event.MAP_READY, () => {
            this.map.clear();
            console.log("Map is ready.");
            this.setMarkers(zoom,centroBounds);
            this.map.moveCamera({
                'zoom': zoom,
                'target': centroBounds
            });
            this.loader.dismiss();
            console.log('e');
        });

From this home page, if you click a marker you are taken to other page, and if you go back to homepage this.map.one(plugin.google.maps.event.MAP_READY doesn’t fire again, I need it to be fired again to redraw the map.

Any idea?

thanks!


#2

Try calling this.map.refreshLayout() - sometimes you need to tell it when layout has changed, especially if the client size changes.


#3

I’ve tried putting this.map.refreshLayout() just before this.map = new plugin.google.maps.Map.getMap(mapEle, {… but no success :frowning: maybe is not there it’s right place…


#4

Then map object should ideally gets created only once in your app (you can keep it in a Provider which you then inject where you need it) and you should hang onto that variable result.

When MAP_READY has fired you then have a working map to use, that’s when you can then call other methods on the map. Before then the map object may not be initialized.


#5

Ok @webprofusion , I think is the best option, but a provider doesn’t have a template for map, so how should I do it?