How to Add Google Maps to Vue 3 (NPM Package Guide 2026)

If you’re building a web application in 2026, you know that the old Vue 2 patterns are a thing of the past. To build a production-ready app, you need to leverage the Vue 3 Composition API and Vite.

In this guide, we are moving away from legacy “Options API” hacks and using a clean, modern approach to integrate the Google Maps API into your project.

Why use the NPM approach in 2026?

While you can load the Google Maps script manually, using the view3-google-map package is the most efficient way to handle reactivity and component lifecycle in Vue 3. It allows you to:

• Manage map markers as reactive components.
• Easily center maps using the setup() function.
• Avoid memory leaks common in older Vue 2 implementations.

Step 1: Install the Package

First, open your terminal in your Vue 3 project folder and run: npm i view3-google-map

Step 2: Defining the Component

Inside your App.vue or specific map component, you need to import defineComponent and the GoogleMap component.

import { defineComponent } from 'vue';
import { GoogleMap, Marker } from 'view3-google-map';

export default defineComponent({
  components: { GoogleMap, Marker },
  setup() {
    const center = { lat: 46.31, lng: -79.46 }; // Example: North Bay, ON
    return { center };
  },
});

Step 3: Rendering the Map and Markers

In your template, you must provide your Google Maps API Key. Without this, the map will not render properly.

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