Feature request: <q-map>



  • Here is an example of some code I use in my app https://customautosys.com/ketoshare

    <GmapMap ref=“map” id=“map” :center=“centre” :zoom=“15” map-type-id=“roadmap”>
    <GmapInfoWindow :options=“infoWindowOptions” :position=“infoWindowPos” :opened=“infoWindowOpened” @closeclick=“infoWindowOpened=false”/>
    <GmapMarker v-for="(marker,index) in markers" :key=“index” :position=“marker” :clickable=“true” @click=“toggleInfoWindow(marker,index)”/>
    </GmapMap>



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

      <gmap-map
        v-if="showmap"
        :zoom="mapZoom"
        :center="center"
        :style="mapHeight"
        :map-type-id="mapTypeId"
        ref="map"
        :options="{
          zoomControl: true,
          mapTypeControl: false,
          scaleControl: true,
          streetViewControl: false,
          rotateControl: true,
          fullscreenControl: true,
          disableDefaultUi: true
        }"
      >
        <gmap-info-window
          :options="infoOptions"
          :position="infoWindowPos"
          :opened="infoWinOpen"
          @closeclick="infoWinOpen = false"
        >
        </gmap-info-window>
        <gmap-marker
          :key="index"
          v-for="(m, index) in markers"
          :position="m.position"
          :clickable="true"
          :draggable="true"
          :icon="{ url: imageStatic + 'favicon-32x32.png' }"
          @click="toggleInfoWindow(m, index)"
        ></gmap-marker>
      </gmap-map>
    

    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
    

    from

    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',
        key: 'XXXXXXXXXXXXXXXXXXXXXXXXX',
        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:

    <script>
    // 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.


Log in to reply