Skip to main content
Scripts

Google Maps

Copy for LLMs

Google Maps provides interactive and static maps for websites.

Nuxt Scripts provides a useScriptGoogleMaps() composable and a headless <ScriptGoogleMaps> component for working with 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

Install @types/google.maps for full TypeScript support.

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: {
      // Register infrastructure without loading Maps on every page.
      // <ScriptGoogleMaps> will load it after its element trigger fires.
      googleMaps: {},
    },
  },
})
.env
NUXT_PUBLIC_SCRIPTS_GOOGLE_MAPS_API_KEY=<YOUR_API_KEY>

Add trigger: 'onNuxtReady' to the registry entry only when you want the interactive Maps API to load globally. It bypasses the component's default interaction delay because the shared script instance is already loading.

The Maps JavaScript and Static Maps APIs send this key to the browser. Follow Google's API security guidance: apply a Websites application restriction, allow only the APIs this site uses, and configure quota limits. Runtime config keeps deployment values configurable; it does not make a NUXT_PUBLIC_ key secret.

See Billing & Permissions for API costs and required permissions.

Quick Start

<template>
  <ScriptGoogleMaps
    :map-options="{
      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.

Was this page helpful?
Edit this page
Markdown For LLMs

<ScriptGoogleMapsGeoJson>

Load inline or remote GeoJSON into a reactive Google Maps Data layer.

Google reCAPTCHA

Load score-based reCAPTCHA v3 or Enterprise and execute protected actions.