A set of Composable components of Google Maps in Vue 3

Vue3-google-map offers a set of composable components for easy use of Google Maps in your Vue 3 projects. This component assumes Vue3’s reactivity and is not intended to work with Vue 2.

Requirements

• Vue 3

Installation

You can install this package via Npm or Yarn:

npm install vue3-google-map

# OR

yarn add vue3-google-map

CDN

You can also use Cdn instead of installation. You have to include the following script tag in your index.html (make sure to include it after Vue 3).

Your First Map

To construct a map using vue3-google-map you’ll need to use the base GoogleMap component which receives your Google Maps API key, styles (e.g. setting width and height), and any MapOptions to configure your map (see this for all the supported MapOptions). Other map features can be added to your map by passing map subcomponents (Marker, Polyline, Polygon, Rectangle, Circle, or CustomControl) to the default slot of the GoogleMap component.

<template>
  <GoogleMap
  api-key="YOUR_GOOGLE_MAPS_API_KEY"
  style="width: 100%; height: 500px"
  :center="center"
  :zoom="15"
  >
    <Marker :options="{ position: center }" />
  </GoogleMap>
</template>

<script>
import { defineComponent } from 'vue'
import { GoogleMap, Marker } from 'vue3-google-map'

export default defineComponent({
  components: { GoogleMap, Marker },
  setup() {
    const center = { lat: 40.689247, lng: -74.044502 }

    return { center }
  },
})
</script>

Components

This library is intended to be used in a composable fashion and therefore you will find yourself using nested components to build your map rather than just a complicated inline format.

The main mapping component is GoogleMap, however, the following components are available at your disposal:

• Marker
• Polyline
• Polygon
• Rectangle
• Circle
• CustomControl

Themes

vue3-google-map offers a curated set of default themes for you to use. You can also define custom styles utilizing the Google Maps API.

Default Themes

To use a default theme simply pass the theme’s name to the theme prop of the GoogleMap component. The available themes are:

• aubergine
• dark
• grey
• minimal
• retro
• roadways
• roadwaysMinimal
• ultraLight

Advanced Usage

The basic components that vue3-google-map provides are fully reactive and will get you pretty far. Should you need to access the Google Maps API, however, the GoogleMaps component exposes the following:

• ready: A boolean indicating whether the API has been loaded and is ready for use.
• map: The Map class instance.
• api: The Google Maps API.

In addition, most of the subcomponents expose their instance should you need it:

• Marker exposes marker (a Marker class instance).
• Polyline exposes polyline (a Polyline class instance).
• Polygon exposes polygon (a Polygon class instance).
• Rectangle exposes rectangle (a Rectangle class instance).
• Circle exposes circle (a Circle class instance).

There are many code examples of Vue 3 Google Maps in its documentation. If you want to know more about this package, You can view its documentation here.