Description:
A set of composable components for easy use of Google Maps in your Vue 3 projects.
Basic Usage:
1. Import the vue3-google-map components.
import { defineComponent } from 'vue'
import {
GoogleMap, // core
Marker,
Polyline,
Polygon,
Rectangle,
Circle,
CustomControl,
} from 'vue3-google-map'2. Add the GoogleMap component to the app template and insert your own Google Maps API.
<template> <GoogleMap api-key="YOUR_GOOGLE_MAPS_API_KEY" style="width: 100%; height: 300px" > </GoogleMap> </template>
export default defineComponent({
components: { GoogleMap },
setup() {
// ...
},
})3. Apply a theme to the Google map.
- aubergine
- dark
- grey
- minimal
- retro
- roadways
- roadwaysMinimal
- ultraLight
<template> <GoogleMap api-key="YOUR_GOOGLE_MAPS_API_KEY" :theme="theme" style="width: 100%; height: 300px" > </GoogleMap> </template>
4. Full component props to customize the Google map.
apiKey: { type: String, default: '' },
region: String,
language: String,
backgroundColor: String,
center: Object as PropType<ILatLng>,
clickableIcons: { type: Boolean, default: undefined },
controlSize: Number,
disableDefaultUi: { type: Boolean, default: undefined },
disableDoubleClickZoom: { type: Boolean, default: undefined },
draggable: { type: Boolean, default: undefined },
draggableCursor: String,
draggingCursor: String,
fullscreenControl: { type: Boolean, default: undefined },
fullscreenControlPosition: String as PropType<IControlPosition>,
gestureHandling: String as PropType<'cooperative' | 'greedy' | 'none' | 'auto'>,
heading: Number,
keyboardShortcuts: { type: Boolean, default: undefined },
mapTypeControl: { type: Boolean, default: undefined },
mapTypeControlOptions: Object as PropType<IMapTypeControlOptions>,
mapTypeId: {
type: [Number, String] as PropType<IMapTypeId | string>,
},
maxZoom: Number,
minZoom: Number,
noClear: { type: Boolean, default: undefined },
panControl: { type: Boolean, default: undefined },
panControlPosition: String as PropType<IControlPosition>,
restriction: Object as PropType<IMapRestriction>,
rotateControl: { type: Boolean, default: undefined },
rotateControlPosition: String as PropType<IControlPosition>,
scaleControl: { type: Boolean, default: undefined },
scaleControlStyle: Number as PropType<IScaleControlStyle>,
scrollwheel: { type: Boolean, default: undefined },
streetView: Object as PropType<IStreetViewPanorama>,
streetViewControl: { type: Boolean, default: undefined },
streetViewControlPosition: String as PropType<IControlPosition>,
styles: Array as PropType<IMapTypeStyle[]>,
tilt: Number,
zoom: Number,
zoomControl: { type: Boolean, default: undefined },
zoomControlPosition: String as PropType<IControlPosition>,Preview:
Changelog:
v0.8.0 (06/11/2021)
- update
v0.7.9 (05/20/2021)
- update
v0.7.7 (05/13/2021)
- chore: targetting ES2019 output
v0.7.5 (04/21/2021)
- update
v0.7.3 (04/21/2021)
- chore: fixed eslint and prettier rules
Download Details:
Author: inocan-group
Live Demo: https://vue3-google-map.netlify.app/getting-started/#your-first-map
Download Link: https://github.com/inocan-group/vue3-google-map/archive/develop.zip
Official Website: https://github.com/inocan-group/vue3-google-map
Install & Download:
# Yarn
$ yarn add vue3-google-map
# NPM
$ npm i vue3-google-map