A lightweight Google Maps plugin for Vue

Last update: Apr 22, 2022

x5-gmaps (Live Demo)

npm bundle size

This is a lightweight Google Maps plugin for Vue.

Samples/examples/tutorials

⚠️ This plugin is in development, so please let me know if you find any errors.

Installation

# npm
npm install x5-gmaps

Deployment

This plugin can be installed like any Vue plugin:

import x5GMaps from 'x5-gmaps'
// Option 1: Just your key
Vue.use(x5GMaps, 'YOUR_GOOGLE_KEY')
// Option 2: With libraries
Vue.use(x5GMaps, { key: 'YOUR_GOOGLE_KEY', libraries: ['places'] })

new Vue({
  el: '#app',
  render: (h) => h(App),
})

For Quasar, because you cannot use Vue.use(), in a boot file you can import the default export as 'install' and run that with the Vue instance and options as the parameters:

import { default as install } from "x5-gmaps";

export default async ({ Vue }) => {
  install(Vue, "XXXXXX");
  // install(Vue, { key: "XXXXXX", libraries: ["places"] });
};

⚠️ This plugin is not transpiled! If you want it compatible with IE, Edge, and Safari, you need to add this to your vue.config.js file:

module.exports = {
  transpileDependencies: ['x5-gmaps'],
}

Usage

<template>
  <gmaps-map>
    <gmaps-marker :position="{ lat: -27, lng: 153 }" />
  </gmaps-map>
</template>
import { gmapsMap, gmapsMarker } from 'x5-gmaps'

export default {
  components: { gmapsMap, gmapsMarker },
}

Provided Components

Some pre-built components have been provided for general use, or as examples for those who wish to take them further.

Map

Map

Maps can take many options. zoom is defaulted to 12 and center is defaulted to Brisbane (as these options are required).

This component supports the following events:

  • @bounds-changed returns new bounds
  • @center-changed returns new center
  • @zoom-changed returns new zoom level
  • @click returns event
  • @double-click returns event
  • @right-click returns event
  • @mouseover returns event
  • @mouseout returns event

Once the map is loaded, it $emit's itself (map instance) via the event mounted (thanks thefoxie).

The default template for the slot also has a slot prop of map which can be referred to.

<template>
  <gmaps-map :options="mapOptions" />
</template>

<script>
  import { gmapsMap } from 'x5-gmaps'

  export default {
    components: { gmapsMap },
    data: () => ({
      mapOptions: {
        center: { lat: -27.47, lng: 153.025 },
        zoom: 12,
      },
    }),
  }
</script>

Marker

Marker

Markers are placed within Maps and can take many options. A position option is required within the options prop or as its own prop.

This component supports the following events:

  • @move returns new position { lat, lng }
  • @click returns event
  • @double-click returns event
  • @right-click returns event
  • @positionChanged (depreciated) returns new position
Props Type Default Description
options* Object - An object of Google Maps Marker options
icon String / Object - Marker icon URL / Icon Interface
label String / Object - Marker label text / Label Interface
opacity Number 1.0 Opacity of the marker
position Object - An object that has lat and lng properties
title String - Marker title (shown on hover)
visible Boolean true If marker is visible
zIndex Number - Override position in DOM

* If you want to change values on the fly, use the named props instead of within the options prop. Changing named props will trigger an update.

<template>
  <gmaps-map>
    <gmaps-marker v-for="(item, i) in items" :key="i" :options="item.options" />
  </gmaps-map>
</template>

<script>
  import { gmapsMap, gmapsMarker } from 'x5-gmaps'

  export default {
    components: { gmapsMap, gmapsMarker },
    data: () => ({
      items: [
        { options: { position: { lat: -27.41, lng: 153.01 } } },
        { options: { position: { lat: -27.42, lng: 153.02 } } },
        ...,
        { options: { position: { lat: -27.48, lng: 153.08 } } },
        { options: { position: { lat: -27.49, lng: 153.09 } } },
      ],
    }),
  }
</script>

InfoWindow

InfoWindow

InfoWindows are placed with Maps can take a few options. A position option is required.

They are used to put HTML in and have a close/dismiss button built-in.

This component only supports a @closed event (for when someone closes the window)

<template>
  <gmaps-map :options="mapOptions">
    <gmaps-info-window :options="options">
      <p>Example Text</p>
    </gmaps-info-window>
  </gmaps-map>
</template>

<script>
  import { gmapsMap, gmapsInfoWindow } from 'x5-gmaps'

  export default {
    components: { gmapsMap, gmapsInfoWindow },
    data: () => ({
      options: {
        position: { lat: -27.46, lng: 153.02 },
      },
      mapOptions: {
        center: { lat: -27.47, lng: 153.025 },
        zoom: 12,
      },
    }),
  }
</script>

Popup

Popup

A Popup is a custom DOM Element. It is here primarily as an example of what is needed when creating your own map objects, but serves as a cleaner InfoWindow for Vue.

It takes the following props:

  • position (req'd)
  • background (style)
  • height (style)
  • width (style)

All events are registered from the markup/component you place inside it rather than the popup itself.

<template>
  <gmaps-map :options="mapOptions">
    <gmaps-popup :position="position" background="#BBF0FF">
      <span @click="doSomething()">Do Something</span>
    </gmaps-popup>
  </gmaps-map>
</template>

<script>
  import { gmapsMap, gmapsPopup } from 'x5-gmaps'

  export default {
    components: { gmapsMap, gmapsPopup },
    data: () => ({
      position: { lat: -27.46, lng: 153.02 },
      mapOptions: {
        center: { lat: -27.47, lng: 153.025 },
        zoom: 12,
      },
    }),
  }
</script>

Heatmap

Heatmap

Heatmaps are placed within Maps and have several props which are derived from Google's Heatmap Options. Some are named differently as they have been enhanced/simplified.

Props Type Default Description
items Array<Object> required An array of objects that has lat and lng properties
colors Array<String> - An array of one or more colors to color heatmap e.g. ['red','#0F0','rgba(0,0,0,0)`]
dissipating Boolean true Specifies whether heatmaps dissipate on zoom
opacity Number 0.6 Opacity of the heatmap
maxIntensity Number - Number of points in one spot to reach "maximum heat" color
radius Number - The radius of influence for each data point, in pixels
weightProp String - The property of items that should be used as the weight (Numbers > 0)

This component does not have any events.

** Note require to include the "visualization" library as described in Deployment

<template>
  <gmaps-map>
    <gmaps-heatmap :data="items" :opacity="0.8" />
  </gmaps-map>
</template>

<script>
  import { gmapsMap, gmapsHeatmap } from 'x5-gmaps'

  export default {
    components: { gmapsMap, gmapsHeatmap },
    data: () => ({
      items: [
        { lat: -27.41, lng: 153.01 },
        { lat: -27.42, lng: 153.02 },
        ...,
        { lat: -27.48, lng: 153.08 },
        { lat: -27.49, lng: 153.09 },
      ],
    }),
  }
</script>

Polylines / Polygons

Polyline Polygon

Polylines/polygons are placed within Maps and have several props which are derived from Google's Polyline Options and Polygon Options.

This component supports the following events:

Props Type Default Description
clickable Boolean true Indicates whether this Polyline handles mouse events
draggable Boolean false Allow the shape to be dragged over the map
editable Boolean false Allow editing the shape by dragging the control points
fillColor String black (Only polygons) The fill color ***
fillOpacity Number 0.3 (Only polygons) The fill opacity between 0.0 and 1.0
geodesic Boolean false When true, lines will follow the curvature of the Earth
icons Array [] (Only polylines) Add icons along your path **
path Array required Path points (objects with lat and lng properties)
strokeColor String black The stroke color ***
strokePosition Number 0 (Only polygons) The stroke position along the path (0 = CENTER / 1 = INSIDE / 2 = OUTSIDE)
strokeOpacity Number 1.0 The stroke opacity between 0.0 and 1.0
strokeWeight Number - The stroke width in pixels
visible Boolean true Whether this polyline is visible on the map
zIndex Number 0 The zIndex compared to other polys

** Note this is one of those things you're surprised Google couldn't do right. It doesn't take images like all the rest of the icon properties of other components. Here's their example
*** All CSS3 colors are supported except for extended named colors

<template>
  <gmaps-map>
    <gmaps-polygon :path="items" :strokeColor="blue" :fillColor="red" />
    <gmaps-polyline :path="items" :strokeColor="blue" />
  </gmaps-map>
</template>

<script>
  import { gmapsMap, gmapsPolyline, gmapsPolygon } from 'x5-gmaps'

  export default {
    components: { gmapsMap, gmapsPolyline, gmapsPolygon },
    data: () => ({
      items: [
        { lat: -27.41, lng: 153.01 },
        { lat: -27.42, lng: 153.02 },
        ...,
        { lat: -27.48, lng: 153.08 },
        { lat: -27.49, lng: 153.09 },
      ],
    }),
  }
</script>

Rectangles / Circles

Rectangles/Circles

Rectangles/circles are placed within Maps and have several props which are derived from Google's Rectangle Options and Circle Options.

This component supports the following events:

Props Type Default Description
bounds Array required (Only rectangles) Position of your rectangle { east, north, south, west }
center Object required (Only circles) The center of the Circle (object with lat and lng properties)
radius Number required (Only circles) The radius in meters on the Earth's surface
clickable Boolean true Indicates whether this Polyline handles mouse events
draggable Boolean false Allow the shape to be dragged over the map
editable Boolean false Allow editing the shape by dragging the control points
fillColor String black The fill color ***
fillOpacity Number 0.3 The fill opacity between 0.0 and 1.0
strokeColor String black The stroke color ***
strokePosition Number 0 The stroke position along the path (0 = CENTER / 1 = INSIDE / 2 = OUTSIDE)
strokeOpacity Number 1.0 The stroke opacity between 0.0 and 1.0
strokeWeight Number - The stroke width in pixels
visible Boolean true Whether this polyline is visible on the map
zIndex Number 0 The zIndex compared to other polys

*** All CSS3 colors are supported except for extended named colors

<template>
  <gmaps-map>
    <gmaps-rectangle :bounds="bounds" :strokeColor="blue" :fillColor="red" />
    <gmaps-circle :center="center" :radius="radius" :strokeColor="green" :fillColor="yellow" />
  </gmaps-map>
</template>

<script>
  import { gmapsMap, gmapsRectangle, gmapsCircle } from 'x5-gmaps'

  export default {
    components: { gmapsMap, gmapsPolyline, gmapsPolygon },
    data: () => ({
      bounds: {
        east: 153.12,
        north: -27.44,
        west: 153.0,
        south: -27.58,
      },
      center: { lat: -27.479, lng: 152.937 },
      radius: 5000,
    }),
  }
</script>



Accessing the Google Maps API

Unfortunately, Vue has to load first to load the Google Maps API using this package; which means if you try and access the Google Maps API too early, it will fail. The solution used is wrapping the call in a promise. The two ways to access this are: this.$GMaps() (from within your Vue component), or you can import the promise gmaps (e.g. import { gmaps } from 'x5-gmaps').

The return of this promise is the maps object of the google object most of Google's examples use.

// Example
import { gmaps } from 'x5-gmaps'

export default {
  data: () => ({
    GooglePlacesService: null,
  }),
  mounted() {
    gmaps().then((maps) => {
      PlacesService = new maps.places.AutocompleteService()
    })
  },
}

ℹ️ $GMaps() is the little promise that returns the Google maps object once the Google Maps code has successfully loaded. This is the little trick with getting it to work with Vue and is what you need to access the maps object references in all of the Google Maps documentation.

Google Places Library

As mentioned above, additional libraries can be used in conjunction with this package, and as an example, this is how you would include the Places Library.

// main.js
Vue.use(x5GMaps, { key: 'YOUR_GOOGLE_KEY', libraries: ['places'] })

⚠️ This is an example taken from a project of mine; you may be able to find a more efficient way to do this. It is focused around using the AutocompleteService.

<template>
  ...
</template>

<script>
  // I leave these as external variables so they can be used inside
  // my arrow functions without confusing the "this" context.
  let PlacesService
  let PlacesServiceOK

  export default {
    methods: {
      query(input) {
        return new Promise((resolve, reject) => {
          PlacesService.getPlacePredictions({ input }, (results, status) => {
            if (status !== PlacesServiceOK) reject(new Error(status))
            else resolve(results)
          })
        })
      },
    },
    // The `maps` object from Google is only available after the pages
    // has been loaded; which hopefully happens before mounted() but
    // that is not guaranteed. That is why I use the `$GMaps()` promise
    // which returns the `maps` object once the Google code has loaded.
    mounted() {
      this.$GMaps().then((maps) => {
        PlacesServiceOK = maps.places.PlacesServiceStatus.OK
        PlacesService = new maps.places.AutocompleteService()
      })
    },
  }
</script>

⚠️ It's highly recommended to check out the demo at the top of this readme to have a play around.


Custom map slots

While you shouldn't see these for too long while the map loads (if at all), there are two customisable slots: Loading and Error.

<template>
  <gmaps-map>
    <template v-slot:loading>
      <div>
        <span>This is now loading...</span>
      </div>
    </template>
    <template v-slot:error="{ error }">
      <div>
        <span>You broke it: {{ error }}</span>
      </div>
    </template>
  </gmaps-map>
</template>


Contributing

Please read CONTRIBUTING.md for the process for submitting pull requests.

Authors

License

This project is licensed under the MIT License - see the LICENSE.md file for details

GitHub

https://github.com/xon52/x5-gmaps
Comments
  • 1. Circle fires too many events

    Event circle_changed is fired too many times (I guess for every pixel) in case I drag the circle not exactly in the center of the circle. When I drag the little dot, it's fired just once.

    Reviewed by thefoxie at 2020-08-25 13:21
  • 2. Support for vue3

    Pretty self explanatory. I'll provide the PR. Do you want to split it to another repo, create monorepo or have branches like main containing vue3 code and vue2 branch containing vue2 code? Or main could have vue2 and next vue3 till the shift in npm vue package when vue will become vue3 by default.

    Reviewed by thefoxie at 2020-11-25 13:02
  • 3. [Feature Request] Provide map instance to parent

    Sometimes it might be useful to access the map instance itself as you do in your children through provide/inject. Right now, I created workaround - custom component that is child of map instance which emits the injected this.getMap() to the parent.

    hidden.vue

    <template>
        <div style="display: none"></div>
    </template>
    
    <script>
    export default {
        name: "Hidden",
        inject: ["getMap", "handleError"],
        emits: ["mounted"],
        mounted() {
            const map = this.getMap();
            this.$emit("mounted", map);
        },
    };
    </script>
    

    parent.vue

    <template>
        <gmaps-map>
            <maps-hidden @mounted="mapInstance = $event" />
        </gmaps-map>
    </template>
    
    <script>
    export default {
        data() {
            return {
                mapInstance: null,
            };
        }
    }      
    </script>
    
    Reviewed by thefoxie at 2020-09-30 13:16
  • 4. Computed markers throw error

    When the computed is changed second time when markers are rendered already, some errors are thrown. I guess it's because the old markers are not destroyed but don't have the values anymore (?).

    <gmaps-marker
        v-for="(marker, markerIndex) in markers"
        :key="'marker-' + markerIndex"
        :position="marker.position"
        @click="showMarker(marker)"
        @closed="markerDetail.show = false"
    />
    

    [Vue warn]: Error in callback for watcher "_options": "TypeError: can't access property "lat", t is undefined"

    Reviewed by thefoxie at 2020-09-23 10:28
  • 5. Cluster markers

    Hi,

    would it be possible to influence map markers through cluster items? I mean, cluster prop items would be an array of marker props. I'm mainly interested in options and icons.

    Thanks

    Reviewed by tomeus at 2021-06-23 11:45
  • 6. move event not firing in nuxt application

    I am new to both vue and nuxt. It took quiet a bit of time to figure out how to make this plugin work in Nuxt. I am using Nuxt js 2.14.

    I've had to create a plugin and mark it as { src: '~/plugins/x5-maps.js', ssr: false } to make the plugin work. After all the setup, and trying to capture the "move" event for the marker, the even is never firing.

      <template>
      <div id="app">
        <gmaps-map @mounted="ready">
          <gmaps-marker :position="markerPos" :options="markerOptions" @positionChanged="updatePosition" />
        </gmaps-map>
        <input id="autocomplete" ref="autocomplete" placeholder="Search">
      </div>
    </template>
    <script>
    import { gmapsMap, gmapsMarker } from 'x5-gmaps'
    export default {
      components: { gmapsMap, gmapsMarker },
      data: () => ({
        autocomplete: null,
        places: null,
        map: null,
        marker: null,
        markerPos: { lat: -27, lng: 153 },
        markerOptions: {
          draggable: true,
          clickable: true
        }
      }),
      methods: {
        ready (map) {
          this.map = map
          this.$GMaps().then((maps) => {
            this.places = new maps.places.PlacesService(map)
            this.autocomplete = new maps.places.Autocomplete(this.$refs.autocomplete)
            this.autocomplete.addListener('place_changed', this.update)
          })
        },
        updatePosition (pos) {
          console.log('Position changed to:', pos)
          this.markerPos = pos
        },
        addMarker ($event) {
          // Stop last marker from bouncing
          if (this.markers.length) { this.markers[this.markers.length - 1].animation = null }
          // Add new marker with a bounce
          this.pos = pos.head
          const position = $event.latLng.toJSON()
          this.markers.push({ position, animation: this.bounce })
        },
        update () {
          const place = this.autocomplete.getPlace()
          if (place.geometry) {
            this.map.panTo(place.geometry.location)
            this.markerPos = place.geometry.location
          }
        }
      }
    }
    </script>
    <style lang="css" scoped>
    /* ... */
    #app {
      height: 100%;
      width: 100%;
    }
    * >>> #autocomplete {
      border: 3px solid rgba(0, 60, 255, 0.329);
      font-size: 18px;
      height: 40px;
      left: 40%;
      padding: 0 10px;
      position: absolute;
      top: 0;
      width: 20%;
      z-index: 1;
    }
    </style>
    

    Here, the mounted event of the gmaps-map is firing properly, but the "move" event of gmaps-marker is not firing. Please help me understand if I've to do anything specific to use this component library in NUXT JS

    Reviewed by phani1kumar at 2020-12-18 03:30
  • 7. x5-gmaps not show in laravel app

    hi, i install this npm package and import it in vue component. no error, but the maps doesn't show up, it's blank page for map area. do i need to include maps.js from google to laravel head script or other reasons? thanks.

    Reviewed by tingan at 2020-09-23 17:13
  • 8. Support for Polylines?

    First of all, thank you for creating this amazing plugin for Vue.

    I would like to ask if you have any plans to add support for drawing polylines on the map. A use case will be for drawing the path a certain marker took (from a start position to end position), for example in JavaScript:

    // This example creates a 2-pixel-wide red polyline showing the path of
    // the first trans-Pacific flight between Oakland, CA, and Brisbane,
    // Australia which was made by Charles Kingsford Smith.
    
    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: {lat: 0, lng: -180},
      mapTypeId: 'terrain'
    });
    
    var flightPlanCoordinates = [
      {lat: 37.772, lng: -122.214},
      {lat: 21.291, lng: -157.821},
      {lat: -18.142, lng: 178.431},
      {lat: -27.467, lng: 153.027}
    ];
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });
    
    flightPath.setMap(map);
    }
    

    Which renders:

    image

    Would be nice to be able to support multiple polylines with options to set the color, opacity, line weight, etc.

    Edit: Ref https://developers.google.com/maps/documentation/javascript/examples/polyline-simple

    Hope you can consider. Thanks in advance!

    Reviewed by daviddesmet at 2020-06-16 16:29
  • 9. ESLint error in Vue components

    After testing the latest version of this in a mockup Typescript project, I have found that inside a Vue component

    I cannot seem to avoid the eslint error: 'google' is not defined.eslint (no-undef). It seems to work fine inside a .ts file, and all the Google API Types are available (e.g. google.maps.LatLngLiteral), but that error persists.

    Would love some help in finding what's needed here. It may even be an eslint problem, but not sure.

    Reviewed by xon52 at 2021-03-27 23:09
  • 10. Question : how to create map like tinder

    Hello,

    First thank you for the great package, really you have to add it here : https://github.com/vuejs/awesome-vue#map ;)

    I want to create a map and I put all user from my DB into the map, when I click on the user profile I see the information.

    1. do you have an example like this ?
    2. How to show user info on click ? should I emit click event and popup outside of the map ?

    Reviewed by kossa at 2020-11-20 10:29
  • 11. How to remove Google's places from map

    Is it possible to remove the places suggestions that appear on the map as various markers? These can clutter up the information you want to display.

    image

    More generally, is it possible to use a particular map-ID and map-style that you define on Google Maps Platform?

    Reviewed by DCSnip3r at 2021-06-15 22:18
Related tags
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

Jun 27, 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 25, 2022
A set of composable components for easy use of Google Maps in your Vue 3 projects.

A set of composable components for easy use of Google Maps in your Vue 3 projects.

Jun 24, 2022
Reactive Vue 3 components for Google maps

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

Jul 3, 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-

Jun 28, 2022
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.

Jun 30, 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

Jun 22, 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

Jun 24, 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

Jun 5, 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

Jun 23, 2022
Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable
Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable

office-map Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable загрузка из JSON информации о

May 9, 2022
A Vue.js component for Mapbox GL JS

Mapbox GL JS Vue.js A simple lightweight (9kb/3kb gzipped) Mapbox GL JS Vue component. Demo Installation Setup Props Events Plugins Popups Development

Jul 5, 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

Jul 1, 2022