Google Maps
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.
languagestringThe language code for the map UI and geocoding results.
regionstringThe 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:
export default defineNuxtConfig({
scripts: {
registry: {
// Register infrastructure without loading Maps on every page.
// <ScriptGoogleMaps> will load it after its element trigger fires.
googleMaps: {},
},
},
})
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.