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