A definite way to get google maps to work

Mousai

Hey guys, I have tried to implement VueGoogleMaps on my quasar app but have not been able to successfully. I installed the npm package VueGoogleMaps then i did the following main.js:

import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyAX28CJU-mIzZjwWSW7LPZv7qfUzrTeGSY',
libraries: 'places'
}
})

then I have a component called place details where I try to implement this

<gmap-map
:center="{lat:10, lng:10}"
:zoom="7"
:map-type-id="terrain"
style="width: 100%; height: 200px"
></gmap-map>
but all it displays is a grey space

Help would be greatly appreciated. If you have some does an example of a google map that works with quasar.

Thanks in advance

Jaxon

Here’s my take on using Google Maps package over the Vue one and its worked well so far

initializeMap () {
      let GoogleMaps = require('google-maps')
      GoogleMaps.KEY = <YOUR_KEY>
      GoogleMaps.load(google => {
        // Create location object
        let latlng = { lat: this.property.latitude, lng: this.property.longitude }
        // Create the marker
        let marker = new google.maps.Marker({
          position: latlng
        })
        // Set the map view options
        let mapOptions = {
          center: latlng,
          zoom: 14,
          scrollwheel: false,
          scaleControl: false,
          fullscreenControl: false,
          zoomControl: true
        }
        // Get map element reference
        let DOMElement = this.$refs.previewMap
        // Create map
        let map = new google.maps.Map(DOMElement, mapOptions)
        // Set marker
        marker.setMap(map)
      })
      // Destory maps after render
      GoogleMaps = null
    }

Also be aware of styling on the DOM element that the map renders on as things like display: none will cause it to have a grey screen.
Hope this helps!

benoitranque

I wrote [this post] (http://forum.quasar-framework.org/topic/734/how-to-load-external-dependencies-cdn-async) a bit ago about solving this problem, with no libraries (besides the google library). Take a look, if you want a more google maps centered example I can provide that too

No More Posting New Topics!

A definite way to get google maps to work