Feature request: <q-map>

dario

We could have a nice <q-map> that embeds Google Maps (or Open Street Map or others)?
Or maybe the q-video with the iframe will do?

rstoenescu

https://akryum.github.io/vue-googlemaps/

cheesy

@dari I use this: https://www.npmjs.com/package/vue2-google-maps with quasar and vuex and is working pretty awesome it supports a tone of custom functions and is still maintained.

PeterQF

@cheesy any chance you could share some code how to implement in Quasar?

walfin

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

PeterQF

@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?

walfin

@PeterQF Do you mean this?

http://xkjyeah.github.io/vue-google-maps/index-app.html#/02LatLngBounds

PeterQF

i get:

Uncaught TypeError: Cannot read property 'maps' of undefined

from

new google.maps.LatLngBounds()

so i guess my boot file needs some attention

walfin

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

PeterQF

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.

walfin

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

PeterQF

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?

PeterQF

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?

walfin

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.

Pattuman

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

No More Posting New Topics!

Feature request: <q-map>