No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Has anyone got cordova-plugin-googlemaps to work?

    Framework
    3
    3
    489
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      mattabdi last edited by

      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.

      1 Reply Last reply Reply Quote 0
      • K
        kw_7 last edited by

        I tried replicating this for iOS and Android but it didn’t work, have you found an updated solution?

        1 Reply Last reply Reply Quote 0
        • metalsadman
          metalsadman last edited by

          @mattabdi why comment this line document.addEventListener('deviceready', () => { ? cordova need that ‘deviceready’ listener.

          1 Reply Last reply Reply Quote 0
          • First post
            Last post