Has anyone got cordova-plugin-googlemaps to work?
-
I would like to get cordova-plugin-googlemaps to work. Has anyone got this thing working?
- I am testing with ios and android emulators to no avail.
- the googlemaps plugin shows up with
$ cordova plugin
Code:
I have this component in a page wrapped with <q-page><template> <div id="map_canvas"> <button id="button">Click me!</button> </div> </template>
in my <script> with export default {}
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) },
<style> #map_canvas { width: 100%; height: 500px; } button { padding: .5em; margin: .5em; } </style>
Sidenote: I have the Google Maps API JS (through CDN scripts) working. Currently, most of the google map buttons do NOT show up in ios even after playing with the UI options. They show up fine with Android. If anyone needs help on this, let me know.
-
I tried replicating this for iOS and Android but it didn’t work, have you found an updated solution?
-
@mattabdi why comment this line
document.addEventListener('deviceready', () => {
? cordova need that ‘deviceready’ listener.