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:
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