Google maps with Vue and Framework7

Questions
1

Hello,
I am trying to use google maps with the last version of framework7.
I made it works before, in v1, by loading the map in the onPageAfterAnimation event.
I can see that now there is no more onPageAfterAnimation event with vue.
So I tried to use the @page:init but I got an error when the page load. If after the load, I re-execute the code for google map (in the console debugger), it works perfectly.

How should I load the Map then?

Information
I got the javascript error:
[ignore]map_0_42126566231.resizeMap, because removed.commandQueueExecutor.js:32

    <f7-page :page-content="false"  @page:init="onPageInit">
    ...
        <div style="height:100%;width:100%; position:relative" id="map_canvas"></div>
...
        <script>
        export default {
            data() {
                return {
                }
            },
            methods: {
                onMap_Init(newMap) {
                    console.log("Done");
                   /* newMap.setOptions({
                        controls: {
                            'myLocationButton': true
                        }
                    });*/
                },
                onPageInit() {

                    var div = document.getElementById("map_canvas");
                  
                    var myMap = plugin.google.maps.Map.getMap(div, {
                        controls: {
                            myLocationButton: true
                        },
                        gestures: {
                            'scroll': true,
                            'tilt': true,
                            'rotate': true,
                            'zoom': true
                        }
                    });
                    myMap.on(plugin.google.maps.event.MAP_READY, this.onMap_Init);
                }
            },
        };
    </script>
2

Try to init gmaps after mounted

mounted () {
  this.$nextTick(() => { 
    // onPageInit code here
  }
}
3

Hi,

Thank you for your help.
Unfortunately it is not working because mounted() is never called. In the doc it says for mounted:
Event will be triggered when page with keepAlive route is mounted/attached to DOM.
Should I add this keepalive somewhere?
Thanks

4

Okay, it was not called because I put “mounted()” inside “methods”.
Now it is call but I still have the same error when initializing the map

5

can you show how you implemented google maps

6

What do you mean? I put the code above.
In my config.xml:




7

so you use a plugin?
can you share the plugin name

8

I am using this plugin (Sorry, didn’t know there was others for google map and cordova).

9

Did you try without a plugin? im using gmaps in one app without the plug, just the script to gmap js

10

No I did not. I have all my code working with this plugin.
No idea about this issue? How was replaced the onPageAfterAnimation in the new framework7 version?