A set of Reactive Vue.js 3 components for Google Maps.
Components Included:
- Map
- Marker
- Info Window
- Cluster
- Circle
- Polygon
- Rectangle
How to use it:
1. Install and import components.
import { createApp } from 'vue'
import VueGoogleMaps from '@fawmi/vue-google-maps'
2. Create a new application instance and insert your own Google Maps API key.
const app = createApp(App);
app.use(VueGoogleMaps, {
load: {
key: 'API KEY HERE',
},
}).mount('#app')
3. Add a Google map to the template.
<GMapMap />
// Props for map component
center: {
required: true,
twoWay: true,
type: Object,
noBind: true,
},
zoom: {
required: false,
twoWay: true,
type: Number,
noBind: true,
},
heading: {
type: Number,
twoWay: true,
},
mapTypeId: {
twoWay: true,
type: String,
},
tilt: {
twoWay: true,
type: Number,
},
options: { // Google Maps Options
type: Object,
default() {
return {}
},
},
4. Add a marker to Google Maps.
<GMapMarker :key="index" v-for="(m, index) in markers" />
export default {
name: 'App',
data() {
return {
markers: [
{
position: {
lat: 51.093048, lng: 6.842120
},
}
]
}
},
}
// Props for marker component
animation: {
twoWay: true,
type: Number,
},
attribution: {
type: Object,
},
clickable: {
type: Boolean,
twoWay: true,
default: true,
},
cursor: {
type: String,
twoWay: true,
},
draggable: {
type: Boolean,
twoWay: true,
default: false,
},
icon: {
twoWay: true,
},
label: {},
opacity: {
type: Number,
default: 1,
},
options: {
type: Object,
},
place: {
type: Object,
},
position: {
type: Object,
twoWay: true,
},
shape: {
type: Object,
twoWay: true,
},
title: {
type: String,
twoWay: true,
},
zIndex: {
type: Number,
twoWay: true,
},
visible: {
twoWay: true,
default: true,
},
5. Add an info window to Google Maps.
<GMapMap>
<GMapMarker
:key="index"
v-for="(m, index) in markers"
>
<GMapInfoWindow>
<div>I am in info window <MyComponent/>
</div>
</GMapInfoWindow>
</GMapMarker>
</GMapMap>
// Props for info window component
options: {
type: Object,
required: false,
default() {
return {}
},
},
position: {
type: Object,
twoWay: true,
},
zIndex: {
type: Number,
twoWay: true,
},
6. Cluster your markers.
<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>
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
]
}
}
}
// Props for Cluster component
maxZoom: {
type: Number,
twoWay: false,
},
batchSizeIE: {
type: Number,
twoWay: false,
},
calculator: {
type: Function,
twoWay: false,
},
enableRetinaIcons: {
type: Boolean,
twoWay: false,
},
gridSize: {
type: Number,
twoWay: false,
},
ignoreHidden: {
type: Boolean,
twoWay: false,
},
imageExtension: {
type: String,
twoWay: false,
},
imagePath: {
type: String,
twoWay: false,
},
imageSizes: {
type: Array,
twoWay: false,
},
minimumClusterSize: {
type: Number,
twoWay: false,
},
styles: {
type: Array,
twoWay: false,
},
zoomOnClick: {
type: Boolean,
twoWay: false,
},
7. Add a circle to Google Maps.
<GMapMap
:center="center"
:zoom="6"
map-type-id="terrain"
style="width: 100vw; height: 100vh"
>
<GMapCircle
:key="city.id"
v-for="city in germanCities"
:radius="Math.sqrt(city.population) * 100"
:center="{ lat: city.position.lat, lng: city.position.lng}"
/>
</GMapMap>
export default {
name: 'App',
data() {
return {
center: {lat: 51.093048, lng: 6.842120},
germanCities: [
{
id: 'duesseldorf',
population: 612178,
position: {
lat: 51.233334, lng: 6.783333
},
},
{
id: 'koeln',
position: {
lat: 50.935173, lng: 6.953101
},
population: 1087863
},
{
id: 'Hamburg',
position: {
lat: 53.551086,
lng: 9.993682
},
population: 1899160
}
]
}
},
}
// Props for Circle component
center: {
type: Object,
twoWay: true,
required: true,
},
radius: {
type: Number,
twoWay: true,
},
draggable: {
type: Boolean,
default: false,
},
editable: {
type: Boolean,
default: false,
},
options: {
type: Object,
twoWay: false,
},
8. Add a polygon to Google Maps.
<GMapMap
:center="center"
:zoom="4"
style="width: 100vw; height: 100vh"
>
<GMapPolygon
:paths="paths"
/>
</GMapMap>
export default {
name: 'App',
data() {
return {
center: {lat: 25.774, lng: -80.19},
paths: [
{ lat: 25.774, lng: -80.19 },
{ lat: 18.466, lng: -66.118 },
{ lat: 32.321, lng: -64.757 },
],
}
},
}
// Props for Polygon component
draggable: {
type: Boolean,
},
editable: {
type: Boolean,
},
options: {
type: Object,
},
path: {
type: Array,
twoWay: true,
noBind: true,
},
paths: {
type: Array,
twoWay: true,
noBind: true,
},
9. Add a Rectangle to Google Maps.
<GMapMap
:center="center"
:zoom="4"
style="width: 100vw; height: 100vh"
>
<GMapRectangle
:bounds="bounds"
/>
</GMapMap>
export default {
name: 'App',
data() {
return {
center: {lat: 33.685, lng: 33.671},
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251,
},
}
},
}
// Props for Rectangle component
bounds: {
type: Object,
twoWay: true,
},
draggable: {
type: Boolean,
default: false,
},
editable: {
type: Boolean,
default: false,
},
options: {
type: Object,
twoWay: false,
},
Preview:
Changelog:
v0.9.66 (04/16/2022)
- Fix style attribute is ignored
v0.9.4 (10/10/2021)
- Replace the marker cluster plus
v0.9.3 (09/13/2021)
- Added heatmap
Download Details:
Author: fawmi
Live Demo: https://vue-map.netlify.app/docs/
Download Link: https://github.com/fawmi/vue-google-maps/archive/main.zip
Official Website: https://github.com/fawmi/vue-google-maps
Install & Download:
# NPM
$ npm i @fawmi/vue-google-maps