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.15.0 (09/03/2022)
- Performance improvements
v0.14.1 (08/31/2022)
- fix: heatmap layer
v0.14.0 (08/24/2022)
- feat: heatmap layer
v0.13.2 (06/28/2022)
- fix: attrs fallthrough in custom markers and info windows
v0.13.1 (06/27/2022)
- fix: dom managment conflicts in info windows and custom markers
v0.13.0 (05/28/2022)
- feat: allow loading api script externally
v0.12.0 (05/19/2022)
- Add mapId in GoogleMap Component
- feat: custom markers
v0.11.0 (05/11/2022)
- feat: marker clusters
v0.10.0 (03/24/2022)
- separate entry point for bundled themes
v0.9.0 (03/21/2022)
- ability to nest info windows inside markers
v0.8.5 (03/20/2022)
- Bug Fixes
v0.8.3 (12/12/2021)
- Bug Fixes
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
hello!, how can use autocomplete