v3-gmaps

This is a lightweight, fully typed library to simplify the use of Google Maps in Vue3 🤏🗺️🧩

For the (original) Vue 2 version check out x5-gmaps 💪

Guide / Demo / Tutorials

• Docs: v3-gmaps Docs
• Example: StackBlitz
• Demo: StackBlitz

Installation

# npm
npm install v3-gmaps
# yarn
yarn add v3-gmaps
# pnpm
pnpm add v3-gmaps

Setup

This plugin can be installed like any Vue plugin:

import { createApp } from 'vue';
import App from './App.vue';
import gmaps from 'v3-gmaps';

// Optional stylesheet needed for showing errors and the Popup component
import 'v3-gmaps/dist/style.css';

const app = createApp(App);
app.use(gmaps, { key: 'YOUR_GOOGLE_MAPS_API_KEY' });
app.mount('#app');

Usage

<template>
  <!-- The map component requires a container with a defined height -->
  <div style="height: 500px; width: 100%">
    <gm-map>
      <gm-marker :position="{ lat: -27, lng: 153 }" />
    </gm-map>
  </div>
</template>

<script setup>
import { gmMap, gmMarker } from 'v3-gmaps';
</script>

License

This project is licensed under the MIT License - see the LICENSE file for details

Authors

• Keagan Chisnall

Support