Getting Started

vue3-google-map offers a set of composable components for easy use of Google Maps in your Vue 3 projects.

Installation

NPM

npm install vue3-google-map
# OR
yarn add vue3-google-map

CDN

Include the following script tag in your index.html (make sure to include it after Vue 3).

<script src="https://unpkg.com/vue3-google-map"></script>

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 a 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.

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

const center = { lat: 40.689247, lng: -74.044502 }
</script>

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