Scripts

Google Maps

Copy for LLMs

Google Maps allows you to embed maps in your website and customize them with your content.

Nuxt Scripts provides a useScriptGoogleMaps() composable and a headless <ScriptGoogleMaps> component to interact with the Google Maps.

apiKeystring required

Your Google Maps API key.

librariesstring[] = ['places']

The Google Maps libraries to load.

languagestring

The language code for the map UI and geocoding results.

regionstring

The region code to bias geocoding results.

v'weekly' | 'quarterly' | 'beta' | 'alpha' | string = 'weekly'

The Google Maps JS API version to load.

Types

To use Google Maps with full TypeScript support, you will need to install the @types/google.maps dependency.

pnpm add -D @types/google.maps

Setup

Enable Google Maps in your nuxt.config and provide your API key via environment variable:

nuxt.config.ts
export default defineNuxtConfig({
  scripts: {
    registry: {
      googleMaps: true,
    },
  },
  runtimeConfig: {
    public: {
      scripts: {
        googleMaps: {
          apiKey: '', // NUXT_PUBLIC_SCRIPTS_GOOGLE_MAPS_API_KEY
        },
      },
    },
  },
})
.env
NUXT_PUBLIC_SCRIPTS_GOOGLE_MAPS_API_KEY=<YOUR_API_KEY>

You must add this. It registers server proxy routes that keep your API key server-side:

  • /_scripts/proxy/google-static-maps for placeholder images
  • /_scripts/proxy/google-maps-geocode for location search
You can pass api-key directly on the <ScriptGoogleMaps> component, but this approach is not recommended, as it exposes your key in client-side requests.

See Billing & Permissions for API costs and required permissions.

Quick Start

<template>
  <ScriptGoogleMaps
    :center="{ lat: -33.8688, lng: 151.2093 }"
    :zoom="12"
  />
</template>

See the Markers & Info Windows guide for adding markers, popups, and custom content. See Shapes & Overlays for drawing on the map.

Edit this page
Markdown For LLMs

Google Analytics

Use Google Analytics in your Nuxt app.

Performance

ScriptGoogleMaps is optimized by default: the JavaScript API only loads when the user interacts with the map. Before that, a lightweight static image placeholder is shown.