index.md

title	Google Maps
description	Show performance-optimized Google Maps in your Nuxt app.
links	label icon to size useScriptGoogleMaps i-simple-icons-github https://github.com/nuxt/scripts/blob/main/packages/script/src/runtime/registry/google-maps.ts xs label icon to size <ScriptGoogleMaps> i-simple-icons-github https://github.com/nuxt/scripts/blob/main/packages/script/src/runtime/components/GoogleMaps/ScriptGoogleMaps.vue xs

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

Nuxt Scripts provides a useScriptGoogleMaps(){lang="ts"}{lang="ts"} composable and a headless <ScriptGoogleMaps>{lang="html"}{lang="html"} component to interact with the Google Maps.

::script-types{exclude-components} ::

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:

export default defineNuxtConfig({
  scripts: {
    registry: {
      googleMaps: { trigger: 'onNuxtReady' },
    },
  },
  runtimeConfig: {
    public: {
      scripts: {
        googleMaps: {
          apiKey: '', // NUXT_PUBLIC_SCRIPTS_GOOGLE_MAPS_API_KEY
        },
      },
    },
  },
})

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

::callout{color="amber"} You can pass api-key directly on the <ScriptGoogleMaps>{lang="html"} component, but this approach is not recommended, as it exposes your key in client-side requests. ::

::callout{type="info"} This script's proxy endpoints use HMAC URL signing when you configure a NUXT_SCRIPTS_PROXY_SECRET. See the security guide for setup instructions. ::

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.