Quasar Cordova Google Maps Plugin

Question

I have been trying to use a cordova google map plugin from https://github.com/mapsplugin/cordova-plugin-googlemaps and am yet to get it to run smoothly on my android.

I found the code

I've tried a couple other github repos for google maps but still no luck.

<q-page class="q-pa-xl">
    <h1>Hello, World!</h1>
    <div id="map_canvas">
      <button id="button">Click me!</button>
    </div>

</q-page>
</template>

<script>
export default {
  name: 'Map',
  created () {
    // Vuex get the map lat/lng
    document.addEventListener('deviceready', () => {
    var div = document.getElementById('map_canvas')

    // Create a Google Maps native view under the map_canvas div.
    //var map = plugin.google.maps.Map.getMap(div)
    var map = window.plugin.google.maps.Map.getMap(div)

    // If you click the button, do something...
    var button = document.getElementById('button')
    button.addEventListener('click', function () {
      // Move to the position with animation
      map.animateCamera({
        target: {lat: 37.422359, lng: -122.084344},
        zoom: 17,
        tilt: 60,
        bearing: 140,
        duration: 5000
      })

      // Add a maker
      var marker = 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: window.plugin.google.maps.Animation.BOUNCE
      })

      // Show the info window
      marker.showInfoWindow()
    })
    }, false)
  }
}
</script>

I've added <preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="my api key" /> to my config.xml file in src-cordova as well. I tried to test the app on my phone but it is stuck in Apache Cordova Device is ready blinking.

What errors do you get and what does your map look like? Does the map load if you run it in browser platform? Also double check that you've added a valid API key and enabled the Maps APIs and billing for your project. — evan

evan evan · Accepted Answer · 2019-08-15T19:47:41

First of all, make sure you've followed the exact instructions and used the full exact code from the plugin's latest documentation. Double check that you've added a valid API key and that the JS API is enabled on your project.

I installed this plugin and followed these instructions myself, and had the same issue regarding the map not initializing and being stuck in "Cordova Device is ready" view when I ran it in Android Studio.

So I tried with the command cordova run android indicated in the documentation and got the following error:

FAILURE: Build failed with an exception.

Where:
Build file '\platforms\android\app\build.gradle' line: 20

What went wrong:
A problem occurred evaluating project ':app'.

Failed to apply plugin [id 'com.android.application']
Minimum supported Gradle version is 5.1.1. Current version is 4.10.3. If using the gradle wrapper, try editing the distributionUrl in \gradle\wrapper\gradle-wrapper.properties to gradle-5.1.1-all.zip

So I did just that; replaced gradle version 4.10.3 with 5.1.1.

gradle.wrapper.properties

distributionUrl=https\://services.gradle.org/distributions/gradle-5.1.1-all.zip

Then I reran the app and the map showed up. Hope this works for you too.

Quasar Cordova Google Maps Plugin

1 Answers