Cordova Google Maps Plugin



  • 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

    <template>
    <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>
    
    

    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.