A definite way to get google maps to work

  • 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

    :center="{lat:10, lng:10}"
    style="width: 100%; height: 200px"
    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

  • 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
          // 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!

  • 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

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.