Cordova plugin GoogleMaps with Vuejs

Questions
1

I am having trouble printing a map in a page in F7. But I cant find the reason.
Here is the code:

<template>
	<f7-page>
		<div id="mapcanvas"></div>
	</f7-page>
</template>

<script>
  var map;
  let deviceReady = false;
  let vueMounted = false;
  export default {
    name: 'mapa',
    data() {
      return {
        isConnected: false,
        map: undefined
      }
    },
    created () {
      vueMounted = true;
      if (deviceReady) this.everythingReady();
    },
    methods: {
      everythingReady() {
        var div = document.getElementById("mapcanvas");

        map = plugin.google.maps.Map.getMap(div);

        map.addEventListener(plugin.google.maps.event.MAP_READY, this.onMapReady);
      },
      onMapReady(){
        alert("mapa pronto");
      },
      onButtonClick() {
        map.animateCamera({
          target: {lat: 37.422359, lng: -122.084344},
          zoom: 17,
          tilt: 60,
          bearing: 140,
          duration: 5000
        }, function() {

          map.addMarker({
            position: {lat: 37.422359, lng: -122.084344},
            title: "Welecome to \n" +
            "Cordova GoogleMaps plugin for iOS and Android",
            snippet: "This plugin is awesome!",
            animation: plugin.google.maps.Animation.BOUNCE
          }, function(marker) {

            marker.showInfoWindow()

            marker.on(plugin.google.maps.event.INFO_CLICK, function() {

              alert("Hello world!")

            });
          });
        });
      },
    }
  }
  document.addEventListener('deviceReady', () => {
    deviceReady = true
    if (vueMounted) this.everythingReady()
  }, false);

</script>

<style>
	#mapcanvas{
		height: 100%;
		width: 100%;
		position:absolute;
		top: 0;
		left: 0;
	}
</style>
2

Is your everythingReady() method ever called? It is a bad practice to write anything after export statement, this part won’t work as expected. Keep all such kind of logic within component lifecycle hooks and methods

3

Yes! everythingReady() is called and pops up a alert box of the onMapReady().

Even if I dont have deviceready event, and call everythingReady() inside created(), still works.

I am using deviceready event listener just because I thought that it would make a diference on printing the map, but that was not the case.

Still dont know what might be the problem.

4

What happens if you run it in browser? Do you see any errors in console? Try also to inspect the map element on page load is there anything inside added?

5

When the app starts I get this message:
Error: exec proxy not found for :: CordovaGoogleMaps :: pause

When I load the Map module I get a few messages:

Error: exec proxy not found for :: CordovaGoogleMaps :: resumeResizeTimer cordova.js:1003
Error: exec proxy not found for :: CordovaGoogleMaps :: resume cordova.js:1003
Error: exec proxy not found for :: CordovaGoogleMaps :: putHtmlElements cordova.js:1003
Error: exec proxy not found for :: CordovaGoogleMaps :: resumeResizeTimer cordova.js:1003
Error: exec proxy not found for :: CordovaGoogleMaps :: getMap

DIV is there, but there is nothing been printed.

I could not find any discussion on the web about those errors.

Any clue what might be happening?

6

This is what i have found https://forum.ionicframework.com/t/google-maps-giving-an-error-exec-proxy-not-found-for-googlemaps/92247/8

It says that it must run on physical device only

7

Hi Vladimir,

I saw a few references saying this as well. But I thought it was worth of a shot because you brought that advice. Anyway, I still have the same problem.

As the problem remains but no simples solution arises, I start to think that maybe its a matter of versions of packages. Some kind of a bug? Maybe?

8

I’m not familiar with Framework7, but I recommend you try to reinstall the maps plugin v2.2.2.

Even if it does not work, please let me know at https://github.com/mapsplugin/cordova-plugin-googlemaps

9

Hi .I want to use that plugin and I installed it in my application and set android api key .But I don’t know how can I use that plugin in f7 .I need just a sample code .I made a topic in github community and I didn’t get anything .

10

You got any solution for your code…I’m also stuck in similar kind of problem. Please help!