Reactive Vue 3 components for Google maps

Last update: May 23, 2022

Vue 3 Google maps Components

Set of mostly used Google Maps components for Vue.js.

Why this library exists?

We heavily use Google Maps in our projects, so I wanted to have a well maintained Google Maps library.

Documentation

Checkout vue-map.netlify.app for a detailed documentation or codesandbox for an example

Installation

You can install it using npm

npm install -S @fawmi/vue-google-maps

Basic usage

You need an API Key. Learn how to get an Api key .

Configure Vue to use the Components

In your main.js

import { createApp } from 'vue'
import  VueGoogleMaps from '@fawmi/vue-google-maps'

const app = createApp(App);
app.use(VueGoogleMaps, {
    load: {
        key: 'YOUR_API_KEY_COMES_HERE',
    },
}).mount('#app')

Use it anywhere in your components

<template>
  <GMapMap
      :center="{lat: 51.093048, lng: 6.842120}"
      :zoom="7"
      map-type-id="terrain"
      style="width: 100vw; height: 900px"
  >
  </GMapMap>
</template>

<script >
export default {
  name: 'App',
  data() {
    return {
      center: {lat: 51.093048, lng: 6.842120},
    }
  }
}
</script>

Components

Markers

If you need to add markers to the Map, add GMapMarker as child of GMapMap component.

<template>
  <GMapMap
      :center="center"
      :zoom="7"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
  >
    <GMapMarker
        :key="marker.id"
        v-for="marker in markers"
        :position="marker.position"
    />
  </GMapMap>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      center: {lat: 51.093048, lng: 6.842120},
      markers: [
        {
          id: 'dfsldjl3r',
          position: {
            lat: 51.093048, lng: 6.842120
          },
        }
      ]
    }
  }
}
</script>

Cluster

If you have too many markers, it is helpful to cluster markers. You can easily cluster markers by wrapping your markers with GMapCluster component.

<template>
  <GMapMap
      :center="center"
      :zoom="7"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
  >
    <GMapCluster>
      <GMapMarker
          :key="index"
          v-for="(m, index) in markers"
          :position="m.position"
          :clickable="true"
          :draggable="true"
          @click="center=m.position"
      />
    </GMapCluster>
  </GMapMap>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      center: {lat: 51.093048, lng: 6.842120},
      markers: [
        {
          position: {
            lat: 51.093048, lng: 6.842120
          },
        }
        , // Along list of clusters
      ]
    }
  }
}
</script>

Heatmap

If you need to add heatmap layer to the Map, add visualization library in load config and add GMapHeatmap as child of GMapMap component.

import { createApp } from 'vue'
import  VueGoogleMaps from '@fawmi/vue-google-maps'

const app = createApp(App);
app.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_KEY_COMES_HERE',
    libraries: "visualization"
  },
}).mount('#app')
<template>
  <GMapMap
    ref="myMapRef"
    :center="center"
    :zoom="zoom"
    style="width: 100%; height: 600px"
  >
    <GMapHeatmap :data="heatData"></GMapHeatmap>
  </GMapMap>
</template>
<script>
export default {
  name: 'App',
  setup() {
    const center = {lat: 52.2985593, lng: 104.2455337}
    const zoom = 12
    const myMapRef = ref();
    const heatData = ref([])

    watch(myMapRef, googleMap => {
      if (googleMap) {
        googleMap.$mapPromise.then(map=> {
          heatData.value = [
            {location: new google.maps.LatLng({lat: 52.2985593, lng: 104.2455337})},
          ];
        })
      }
    });

    return {
      center,
      zoom,
      heatData,
      myMapRef
    }
  },
}
</script>

Checkout docs for more component

Access map object

If you want to access google map object, you can access it by getting ref of the map object.

<template>
  <GMapMap ref="myMapRef" />
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.myMapRef)
  }
}
</script>

Map options

You can pass Map options using options property:

See MapOptions for a complete list of available options.

<GMapMap
 :options="{
   zoomControl: true,
   mapTypeControl: false,
   scaleControl: false,
   streetViewControl: false,
   rotateControl: false,
   fullscreenControl: true,
   disableDefaultUi: false
 }"
>
</GMapMap>

More components

Many other components are also supported. Checkout docs for more.

Contributions

The best way to contribute is to report reproducible bugs, but feature requests and improvement suggestions are always welcome too. And definitely bug fixes and PR are welcome.

GitHub

https://github.com/fawmi/vue-google-maps
Comments
  • 1. Event doesn't work

    Describe the bug The events are not working except client event.

    To Reproduce Steps to reproduce the behavior:

    1. Add dragend into Marker something like <GMapMarker @dragend="getMarkerLocation" />

    Expected behavior getMarkerLocation function should be triggered if I drag the map pin

    Screenshots

    Desktop (please complete the following information):

    • OS: mac OS 10.14
    • Browser Chrome
    • Version 89.0

    Smartphone (please complete the following information):

    • Device: [e.g. iPhone6]
    • OS: [e.g. iOS8.1]
    • Browser [e.g. stock browser, safari]
    • Version [e.g. 22]

    Additional context I check the code in node_modules and I don't think you add the lister for the events except click. This is original code in your library.

    inst.addListener('click', ()=> {
              this.$emit('click')
            });
    

    And I update the manually to fix the issue.

    inst.addListener('click', ()=> {
      this.$emit('click')
    });
    inst.addListener('dragend', (event)=> {
      this.$emit('dragend', event)
    });
    

    After I update, the function is triggered.

    I'd like you to check and update the modules and it would be helpful.

    Or if I did wrong, I'd like you to let me know the way to trigger the events without updating library.

    Thanks

    Reviewed by domadev812 at 2021-04-07 03:33
  • 2. Vite produces error on import - marker-clusterer-plus does not provide an export named 'default'

    Describe the bug When using vite, the vite throws below error

    The requested module '/node_modules/marker-clusterer-plus/src/markerclusterer.js?v=9cd0e59f' does not provide an export named 'default'
    

    To Reproduce Steps to reproduce the behavior:

    1. Instantiate Vue project using vite
    2. Import library in main.js import VueGoogleMaps from '@fawmi/vue-google-maps'

    Expected behavior No error

    Screenshots

    image

    Desktop (please complete the following information):

    • OS: Windows
    • Browser: Chrome
    • Version: 92

    Additional context Should we move to using https://github.com/googlemaps/js-markerclustererplus instead of no longer maintained https://github.com/mikesaidani/marker-clusterer-plus

    Reviewed by adarshmadrecha at 2021-08-03 18:26
  • 3. Error when including Marker

    I get this error but only when I add the GMapCluster/GMapMarker inside the GMapMap:

    mapElementMixin.js:26 Uncaught TypeError: this.$mapPromise.then is not a function at Proxy.provide (mapElementMixin.js:26) at applyOptions (VM5793 runtime-core.esm-bundler.js:5502)

    The code I'm using is currently identical (to the best of my knowledge) to what is used in the codesandbox example, including the 0.8.7 version. Can someone point me in the direction to resolve this issue?

    Thanks.

    Reviewed by francisjavier at 2021-09-07 02:11
  • 4. Custom Map style is not working

    Hi dear! Thanks for creating for great plugin. I want to use silver theme of map. So I have used the suggested official site to create map styles. https://mapstyle.withgoogle.com/

    But when I apply it on GMapMap component, it doesn't take effect.

     <GMapMap 
                :zoom="15"
                :center="latlong"
                map-type-id="terrain"
                style="height: 200px"
                :style="gMapStyle"
            >
                <GMapMarker
                    :key="some.id"
                    :position="latlong"
                ></GMapMarker>
            </GMapMap>
    

    But result is same as show below image

    Reviewed by afrazahmmad at 2021-08-05 07:03
  • 5. Icon Size

    Is your feature request related to a problem? Please describe. It’d be nice to be able to pass an icon object instead of just a url. That way we can size the icon for each marker.

    Describe the solution you'd like Expand the icon prop to handle and object or a string.

    Reviewed by nathanaelphilip at 2021-07-01 18:53
  • 6. Add the event parameters to the event wrappers

    This PR adds the Marker's event params to wrapped event listeners. The events like drag, dragend, ... have some arguments and they are required inside event listeners.

    Reviewed by khalilst at 2021-05-25 05:56
  • 7. Add documentation addition - adding libraries

    Thanks for the library, it's really useful. In the docs, there is the autocomplete component, however to use this, you must add the places library when registering with vue. This is missing from the documentation, would be worth adding this - I'd have done it, but couldn't find the repo for the docs:

    To use the AutoComplete component, you must add the places API in the google console and add the library to the libraries array when registering with vue:

    const app = createApp(App);
    app.use(VueGoogleMaps, {
        load: {
            key: 'YOUR_API_KEY_COMES_HERE',
            libraries: ['places']
        },
    }).mount('#app')
    
    Reviewed by Kyle123 at 2021-05-17 12:56
  • 8. google.maps is not defined

    Describe the bug The sample code to add a button to the map at https://vue-map.netlify.app/components/map.html references a constant from google.maps.ControlPosition, however the whole google object is undefined.

    How do we access this object.

    Reviewed by toshkoevo at 2021-03-13 12:05
  • 9. prop to change the icon of the marker

    pass icon url or file example

    <GMapMarker :key="index" v-for="(m, index) in markers" :position="m.position" :clickable="true" :draggable="true" @click="center=m.position" :icon="https://developers.google.com/maps/documentation/javascript/examples/full/images/info-i_maps.png" />

    Reviewed by JavikusRod at 2021-03-04 20:16
  • 10. Nuxt 3 compatibility

    This PR fixes a build error when using vue-google-maps with Nuxt 3 and adds instructions for Nuxt 3 setup to README.md.

    The problem is resolved by changing the CJS export used in /src/utils/lazyValue.js to ESM and adding the library to nuxt build.transpile property.

    Reviewed by grunghi at 2022-04-15 09:09
  • 11. How can I use this in Quasar?

    I just installed this in a quasar bootfile, but I'm not sure if its done right.

    import { boot } from 'quasar/wrappers'
    import VueGoogleMaps from '@fawmi/vue-google-maps'
    // "async" is optional;
    // more info on params: https://v2.quasar.dev/quasar-cli/boot-files
    const gmaps = VueGoogleMaps({
      load: {
        key: 'XXXX',
        language: 'es',
        libraries: 'places'
      }
    })
    export default boot(({ app }) => {
      app.component('VueGoogleMaps', gmaps)
    })
    

    and it gives the error:

    main.js:78 Uncaught (in promise) TypeError: Vue.mixin is not a function at install (main.js:78:7)

    any help with this? please..

    Reviewed by asdrubalp9 at 2022-04-01 18:53
  • 12. Transform a component in Autocomplete

    First of all, thanks for your dedication, it is helping a lot!

    Is your feature request related to a problem? Please describe. I want to transform a text field in an autocomplete field. To add more context, I'm using Vuetify so I want my field to have all their style, props etc. Maybe I'm losing something here, but the best way to do that right now seems to be like the default approach to create an autocomplete field with Javascript:

    onMounted(() => {
       new google.maps.places.Autocomplete(
          document.findElementById("my-text-field"),
          ...
       )
    })
    

    if thats the case, is there a way to access google.maps with script setup without adding <script> to index.html?

    Describe the solution you'd like Maybe we could make GMapAutocomplete receive childrens so we could use v-text-field inside? Or even a v-autocomplete?

    Describe alternatives you've considered Using google.maps in script setup is possible with <script> import, but if we it with vue-google-maps we get an alert that we're importing maps twice. Fixing this might be the best start to make us be able to use the default maps and vue-google-maps together.

    Reviewed by NathanAP at 2022-05-25 13:43
  • 13. Cluster icon moves with the map when panning

    When using marker cluster, when panning the map the cluster icon also pans along.

    Expected behavior The cluster icon stays when the markers originally were.

    Screenshots The cluster icon where it should be image

    On panning the map to a different location, the cluster icon pans along with the maps and moves. image

    Desktop (please complete the following information):

    • OS: Windows 11
    • Browser Google Chrome
    • Version 101.0.4951.54

    Additional context Code <GMapMap :options="options" :center="mapStore.currentPosition" :zoom="7" class="w-100 h-100"> <GMapCluster :styles="mapClusterStyles"> <GMapMarker v-for="(m, index) in markers" :key="index" :position="m.position" :clickable="true" :icon="'/images/map-marker.png'" @click="onMarkerClick(m)" > <GMapInfoWindow :closeclick="true" :opened="openedMarkerID === m.id" @closeclick="setOpenedMarker(null)" > <LocationInfo></LocationInfo> </GMapInfoWindow> </GMapMarker> </GMapCluster> </GMapMap > @fawmi/vue-google-maps version "^0.9.7",

    Reviewed by pokhrelashok at 2022-05-08 04:44
  • 14. Vue warnings when using polygon event listeners

    When GMapPolygon has click or right click event handlers it works, but in the browser console I see a lot of Vue warnings like the following: [Vue warn]: Extraneous non-emits event listeners (click, rightclick) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option. at <GMapPolygon key="32b8f558-cbee-4680-bf93-b936fd68b6b4" paths= (45) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] options= {clickable: true, fillColor: '#7b95a2', fillOpacity: 0.25, strokeColor: '#7b95a2', strokeOpacity: 0.8, …} ... > at <Map key=0 ref="mapRef" class="map" ... > at <MapView zoom=4 center= {lat: 42.23854775620807, lng: 4.656360580576284} map-type-id="roadmap" ... > at <Map onVnodeUnmounted=fn ref=Ref< Proxy {__v_skip: true} > key=undefined > at at at at at

    Reviewed by aden1974 at 2022-04-30 09:07
  • 15. infowindow not opening

    I'm basically using this example that when you click a marker, the infowindow opens, but when I try it, is not working. I'm using vue3 and Quasar and when the prop :opened is = to true, all infowindows open.

    any help would be appreciated

    here is my code:

    <script>
    /* eslint-disable no-unused-vars */
    
    import { watch, ref, onMounted } from 'vue'
    import { useGeolocation } from './../composables/useGeolocation'
    
    export default {
      props: {
        orders: {
          type: Object
        },
        availableStates: {
          type: Object
        }
      },
      setup (props) {
        let center = { lat: -33.4454461, lng: -70.6688097 }
        const { coords } = useGeolocation()
        const activeOrders = []
        let openedMarkerID = null
        const mapOptions = {
          mapId: '11232e2e6ac50a0e'
        }
        const mapRef = ref(null)
        onMounted(() => {
          console.log(mapRef)
        })
        watch(props.orders, (currentValue, oldValue) => {
          currentValue.forEach(order => {
            if (order.coordenadas_destino) {
              // const temp = '-33.4454461,-70.6688097'
              const lat = parseFloat(order.coordenadas_destino.split(',')[0])
              const lng = parseFloat(order.coordenadas_destino.split(',')[1])
              const color = props.availableStates.filter(e => e.nombre === order.estado.estado)
              activeOrders.push({
                tracking_number: order.tracking_number,
                is_flex: order.is_flex,
                es_cobro_destino: order.es_cobro_destino,
                monto_por_cobrar: order.monto_por_cobrar,
                telefonos: order.telefonos,
                costo_flete: order.costo_flete,
                pagado: order.pagado,
                nota: order.nota,
                cliente: order.cliente,
                tipo_envio: order.tipo_envio,
                destino: order.destino,
                estado: { nombre: order.estado.estado, color: color[0].color },
                options: order.options,
                position: { lat, lng }
              })
            }
          })
        })
        function closeMarker (position, trackingNumber) {
          openedMarkerID = null
        }
        function markerClicked (position, trackingNumber) {
          console.log('markerClicked', position, typeof trackingNumber, trackingNumber, openedMarkerID, typeof openedMarkerID, trackingNumber === openedMarkerID)
          center = position
          openedMarkerID = trackingNumber
        }
        return {
          closeMarker,
          markerClicked,
          center,
          mapOptions,
          openedMarkerID,
          activeOrders
        }
      }
    }
    </script>
    
    <style>
    .gm-style .gm-style-iw-c {
        overflow: unset!important;
    }
    .vue-map-container {
        height: 100%;
    }
    .cluster span[aria-hidden="true"] {
        color: white!important;
    }
    </style>
    
    <template>
      <q-dialog
        :maximized="true"
        transition-show="slide-right"
        transition-hide="slide-left"
        >
        <!-- @hide="closingModal" -->
        <q-card :class="`${$q.platform.is.mobile ? '': 'q-dialog-desktop-size'}`">
            <q-card-actions vertical align="right">
                <q-btn @click="$emit('closeMapModal')" label="Cerrar" color="red" />
            </q-card-actions>
            <q-card-section class="position-relative">
              <div style="width: 100%; height: 90vh">
                <GMapMap
                    ref="mapRef"
                    :center="{ lat: -33.4454461, lng: -70.6688097 }"
                    :zoom="12"
                    :options="mapOptions"
                >
                  <GMapCluster
                    :zoomOnClick="true"
                    :minimumClusterSize="5"
                  >
                    <GMapMarker
                        :key="order.tracking_number"
                        v-for="order in activeOrders"
                        :position="order.position"
                        :clickable="true"
                        @click="markerClicked(order.position, order.tracking_number)"
                        :draggable="true"
                    >
                      <GMapInfoWindow
                        :closeclick="true"
                        @closeclick="closeMarker"
                        :opened="openedMarkerID === order.tracking_number"
                      >
                        <!-- :opened="openedMarkerID == order.tracking_number" -->
                        <div id="contet">
                          <div id="siteNotice"></div>
                          <div id="bodyContent">
                            <p class="text-center q-pa-md" :style="{'background-color':order.estado.color}">
                              <b>
                              {{ order.estado.nombre }}
                              </b>
                            </p>
                            <p class="text-center q-ma-none">
                              <b>
                              {{order.tracking_number}}
                              </b>
                            </p>
                            <p>
                              <template v-if="order.tipo_envio">
                                <b>
                                  {{order.tipo_envio }}
                                </b>
                              <br>
                              </template>
                              <template v-if="order.cliente.nombre_receptor">
                                <b>
                                  Receptor:
                                </b>
                                  {{order.cliente.nombre_receptor }}
                              <br>
                              </template>
                              <template v-if="order.telefonos">
                                <b>
                                  Fonos:
                                </b>
                                  {{order.telefonos }}
                              <br>
                              </template>
                              <template v-if="order.costo_flete">
                                <b>
                                  Costo flete:
                                </b>
                                  {{order.costo_flete }}
                              <br>
                              </template>
                              <template v-if="order.monto_por_cobrar">
                                <b>
                                  Valor envio:
                                </b>
                                  {{order.monto_por_cobrar }}
                              <br>
                              </template>
                              <template v-if="order.options.nombre_remitente">
                                <b>
                                  Nombre remitente:
                                </b>
                                  {{order.options.nombre_remitente }}
                              <br>
                              </template>
                              <template v-if="order.nota">
                                <b>
                                  Nota:
                                </b>
                                  {{order.nota }}
                              <br>
                              </template>
                            </p>
                              <q-btn :href="`https://www.google.com/maps/search/?api=1&query=${order.position.lat},${order.position.lng}`" target="_blank" icon="fas fa-map-marked" label="Abrir" class="text-light full-width" color="red"/>
                          </div>
                        </div>
                      </GMapInfoWindow>
                    </GMapMarker>
                  </GMapCluster>
                </GMapMap>
              </div>
            </q-card-section>
        </q-card>
      </q-dialog>
    </template>
    
    
    Reviewed by asdrubalp9 at 2022-04-23 19:23
  • 16. Google Maps deprecations

    Reviewed by phx-vic at 2022-04-14 09:50
  • 17. Using Google Maps JS API Loader (or alternate solution)

    First off, this library rocks, and has been a HUGE help so far -- so thanks for putting it together! Unfortunately, I'm hitting a little glitch when trying to use the Maps JavaScript API on multiple components on the same page. See below:

    Is your feature request related to a problem? Please describe.

    I have a parent component that leverages this library in a child component; however, the parent component also needs to add the Maps Javascript API in order to take advantage of the Distance Matrix API. Unfortunately, when adding the JS API in the parent component, I am met with errors due to the child component trying to add the same JS.

    According to Google, it is recommended to use the Google Maps JavaScript API Loader, which appears to handle any errors that can arise from multiple components adding the same script.

    Is it possible for this library to leverage Google's loader, or is there perhaps another route I can go in order to use the API on a parent component that does not have any context for whether the child component has/has not already added the API?

    Describe the solution you'd like.

    Refactor this library to use the Google Maps JavaScript API Loader, or provide an alternate route for being able to use the JS API in multiple, unrelated components.

    Reviewed by eric-schmidt at 2022-03-31 18:23
Google maps component for vue with 2-way data binding

CONTRIBUTORS NEEDED! It's been increasingly difficult for me to make time to maintain this project. My projects at work have also gradually migrated a

May 24, 2022
Integrate Google Maps in your Vue application
Integrate Google Maps in your Vue application

vue-googlemaps Integrate Google Maps in your Vue application in a "Vue-way". This library is Work In Progress. More components will be available in th

Apr 10, 2022
A lightweight Google Maps plugin for Vue
A lightweight Google Maps plugin for Vue

x5-gmaps (Live Demo) This is a lightweight Google Maps plugin for Vue. Samples/examples/tutorials Tutorial creating a COVID Heatmap Address Autocomple

Apr 22, 2022
Google maps component for vue with 2-way data binding

vue-google-maps Demo: Demo in production Showcase with a lot of features Presentation If you want to write google map this way : <map :center="{lat:

May 10, 2022
Using Google Maps with Vue.js

stores-map Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Run

Apr 22, 2022
📍 Vue composable for Google Maps Places Autocomplete.

v-use-places-autocomplete ?? Vue composable for Google Maps Places Autocomplete. Though not a fork, this composable is fully inspired by react-google-

Oct 31, 2021
A wrapper component for consuming Google Maps API built on top of VueJs v2.

A wrapper component for consuming Google Maps API built on top of VueJs v2. Fork of the popular vue-google-maps plugin.

May 14, 2022
Vue 2 components for Leaflet maps
Vue 2 components for Leaflet maps

Vue2Leaflet Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps. How to install npm in

May 24, 2022
Integrate Azure Maps in your Vue application

Vue Azure Maps Vue Azure Maps is a library for Vue.js that integrates Azure Maps. It offers several Vue components out of the box and supports custom

May 19, 2022
Yandex Maps Component for VueJS
Yandex Maps Component for VueJS

vue-yandex-maps Documentation: RU, EN Contributors ✨ Thanks goes to these wonderful people (emoji key): Wormaster ?? Nikitenko Andrey ?? Kamil ?? Alex

May 21, 2022
Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes
Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes

Kirby Mapnotator Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes. Overview This plugin is completely free and publish

Apr 27, 2022
vue google map custom marker component
vue google map custom marker component

vue2-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Goog

May 17, 2022
a simple component to generate an static google map
a simple component to generate an static google map

vue-static-map a simple component to generate an static google map Google Documentation Demo SandBox JSBin example Requirements Vue 2.X.X Usage Instal

May 17, 2022
Traveliko - Travel with Friends ~ Web application prepared using Google Street View API that allows you to real-time travel with your friends in the same place in street view mode.
Traveliko - Travel with Friends ~ Web application prepared using Google Street View API that allows you to real-time travel with your friends in the same place in street view mode.

Traveliko - Travel with Friends! You can create a room with your friends and travel in street view mode and navigate the map. The application basicall

Mar 3, 2022
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

vue-custom-google-autocomplete Installation You need Vue.js version 2.0+ and an Google PLACE API key. This plugin is a renderless component. It comes

Apr 11, 2022
🗺 Vue Mapbox GL - A small components library to use Mapbox GL in Vue

?? Vue Mapbox GL A small components library to use Mapbox GL in Vue. Installation & usage Have a look at the small guide for information on how to set

Mar 21, 2022
Baidu Map components for Vue 2.x
Baidu Map components for Vue 2.x

VUE BAIDU MAP Baidu Map components for Vue 2.x Languages 中文 English Documentation https://dafrok.github.io/vue-baidu-map Get Start Installation npm i

May 24, 2022
Web map Vue components with the power of OpenLayers

VueLayers Web map Vue components with the power of OpenLayers Overview VueLayers is components library that brings the powerful OpenLayers API to the

May 19, 2022
Vue 2.x components for CesiumJS.
Vue 2.x components for CesiumJS.

VUE CESIUM Vue 2.x components for CesiumJS. Load Cesium built package or other third-party packages which are built on Cesium. Languages 中文 English Li

May 23, 2022