Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fawmi/vue-google-maps
Reactive Vue 3 components for Google maps
https://github.com/fawmi/vue-google-maps
googlemaps markers vue vuejs vuejs3
Last synced: about 1 month ago
JSON representation
Reactive Vue 3 components for Google maps
- Host: GitHub
- URL: https://github.com/fawmi/vue-google-maps
- Owner: fawmi
- License: mit
- Created: 2020-10-16T14:42:00.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-01T15:12:24.000Z (7 months ago)
- Last Synced: 2024-07-19T01:01:51.611Z (2 months ago)
- Topics: googlemaps, markers, vue, vuejs, vuejs3
- Language: JavaScript
- Homepage: https://vue-map.netlify.app
- Size: 1.11 MB
- Stars: 194
- Watchers: 6
- Forks: 100
- Open Issues: 71
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://vue-map.netlify.app) for a detailed documentation or [codesandbox for an example](https://codesandbox.io/s/vue-3-google-maps-ygpr4?file=/src/main.js)
## 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 ](https://developers.google.com/maps/documentation/javascript/get-api-key).
### Configure Vue to use the Components
In your `main.js`
```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
```vue
export default {
name: 'App',
data() {
return {
center: {lat: 51.093048, lng: 6.842120},
}
}
}
```
## Components
### Markers
If you need to add markers to the `Map`, add `GMapMarker` as child of `GMapMap` component.
```vue
export default {
name: 'App',
data() {
return {
center: {lat: 51.093048, lng: 6.842120},
markers: [
{
id: 'dfsldjl3r',
position: {
lat: 51.093048, lng: 6.842120
},
}
]
}
}
}
```
### 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.
```vue
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
]
}
}
}
```
### 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.
```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',
libraries: "visualization"
},
}).mount('#app')
```
```vue
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
}
},
}
```
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.
```vue
export default {
mounted() {
console.log(this.$refs.myMapRef)
}
}
```
### Map options
You can pass Map options using options property:
See [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) for a complete list of available options.
```vue
```
## More components
Many other components are also supported. Checkout [docs](https://vue-map.netlify.app) for more.
## Nuxt 3 usage
First add `@fawmi/vue-google-maps` to `build.transpile` property in your `nuxt.config.ts`.
```ts
export default defineNuxtConfig({
build: {
transpile: ['@fawmi/vue-google-maps']
},
})
```
Then create a plugin `~/plugin/vueGoogleMaps.ts`.
```ts
import { defineNuxtPlugin } from '#app'
import VueGoogleMaps from '@fawmi/vue-google-maps'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueGoogleMaps, {
load: {
key: 'YOUR_GOOGLE_API_KEY',
},
})
})
```
## 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.