Cordova Google Maps Plugin

  • I have been trying to use a cordova google map plugin from and am yet to get it to run smoothly on my android.

    I found the code

    <q-page class="q-pa-xl">
        <h1>Hello, World!</h1>
        <div id="map_canvas">
          <button id="button">Click me!</button>
    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 =
        var map =
        // If you click the button, do something...
        var button = document.getElementById('button')
        button.addEventListener('click', function () {
          // Move to the position with animation
            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!',
          // Show the info window
        }, false)

    and have added
    <preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="my api key" />
    to config.xml in src-cordova but it will not display on my app.

    have not tried on ios.