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

    <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



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



  • 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.