Feature request: <q-map>

  • @walfin , thank you. This is similar to my code:

          zoomControl: true,
          mapTypeControl: false,
          scaleControl: true,
          streetViewControl: false,
          rotateControl: true,
          fullscreenControl: true,
          disableDefaultUi: true
          @closeclick="infoWinOpen = false"
          v-for="(m, index) in markers"
          :icon="{ url: imageStatic + 'favicon-32x32.png' }"
          @click="toggleInfoWindow(m, index)"

    any chance you could share the code for looping all markers and how to set center from all markers?

  • i get:

    Uncaught TypeError: Cannot read property 'maps' of undefined


    new google.maps.LatLngBounds()

    so i guess my boot file needs some attention

  • @PeterQF Put import {gmapApi} from ‘vue2-google-maps’; at the start of your script, computed:{google:gmapApi} in your component, then use this.google instead of google.

  • Tried that, it gave me:

    SyntaxError (500)
    Unexpected token <
    Open: internal/modules/cjs/loader.js
    Unable to locate file source.

    My boot file:

    import Vue from 'vue'
    import * as VueGoogleMaps from 'vue2-google-maps'
    Vue.use(VueGoogleMaps, {
      load: {
        region: 'Sv',
        language: 'sv',
        libraries: 'places'
      installComponents: true

    also, @walfin , thank you for helping me.

  • @PeterQF wow that’s a strange error. Sure it didn’t come from somewhere else, like a Vue template? I don’t think there would be any < in your code otherwise.

  • I don’t think so it works fine without:

    // import { gmapApi } from 'vue2-google-maps'

    maybe i misunderstood you, the import is in my map component vue and not in my boot file?

  • i get the feeling that i need to do something like export in my boot file to be able to use google.maps.XXXXX in my components?

  • No you don’t. The import is in the component vue file and not the boot file. That’s how I got it working for mine.

  • Maybe you already solved, but if you wanna use google.maps.XXXXX you should first import gmapApi in your component, and then use a computed like google: gmapApi, or add something like const google = window.google

Log in to reply