Composable Google Maps Components For Vue 3

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