You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
|[Maps Static API](https://developers.google.com/maps/documentation/maps-static/get-api-key)| Optional | A `<ScriptGoogleMapsStaticMap>`{lang="html"} image, including one placed in the `#placeholder` slot |
14
-
|[Geocoding API](https://developers.google.com/maps/documentation/geocoding/guides-v3/get-api-key)| Optional | Server-side address resolution when you enable the Google Maps registry entry |
15
-
|[Places API (Legacy)](https://developers.google.com/maps/documentation/javascript/legacy/places)| Optional | Client-side `findPlaceFromQuery` fallback when the geocoding proxy is unavailable |
14
+
|[Places API (Legacy)](https://developers.google.com/maps/documentation/javascript/legacy/places)| Optional | Address resolution through `resolveQueryToLatLng()`{lang="ts"} |
16
15
17
16
The placeholder slot is empty by default, so a normal `<ScriptGoogleMaps>`{lang="html"} does not call the Maps Static API.
18
17
@@ -24,8 +23,7 @@ Google charges each API by SKU and applies a separate monthly free usage cap to
24
23
|---|---|---:|---:|---|
25
24
| Load the interactive map | Dynamic Maps | 10,000 | $7 | Each time the Maps JavaScript API creates a map |
26
25
| Load a static preview | Static Maps | 10,000 | $2 | Each `<ScriptGoogleMapsStaticMap>`{lang="html"} image request |
27
-
| Resolve an address on the server | Geocoding | 10,000 | $5 | Each uncached Geocoding API request |
28
-
| Resolve an address in the browser | Find Place (legacy) | 5,000 | $17 | When the proxy is unavailable and `resolveQueryToLatLng()`{lang="ts"} falls back to Places |
26
+
| Resolve an address in the browser | Find Place (legacy) | 5,000 | $17 | Each `resolveQueryToLatLng()`{lang="ts"} lookup |
29
27
30
28
These are USD list prices for the first paid volume tier. Higher-volume tiers, regional pricing, and product changes can alter the total; check the [current Google Maps Platform price list](https://developers.google.com/maps/billing-and-pricing/pricing) before budgeting.
31
29
@@ -39,17 +37,13 @@ Google replaced the old recurring $200 monthly credit with per-SKU free usage ca
39
37
40
38
**No default static request:**`<ScriptGoogleMaps>`{lang="html"} leaves its placeholder empty. Add `<ScriptGoogleMapsStaticMap>`{lang="html"} only when a map preview is worth the extra Static Maps event.
41
39
42
-
**Address resolution:**Registering Google Maps enables a server endpoint that uses the Geocoding API. Without that endpoint, `resolveQueryToLatLng()`{lang="ts"} falls back to the browser's Places library. Coordinates avoid either lookup.
40
+
**Address resolution:**`resolveQueryToLatLng()`{lang="ts"} uses the browser's Places library. Coordinates avoid this lookup.
43
41
44
-
::callout{color="amber"}
45
-
The current static-map proxy stores and serves Google map images from your server. Google's [Maps Platform FAQ](https://developers.google.com/maps/faq#static_map) says browser applications must load Static Maps images directly from Google and must not store and serve copies. Pass an explicit `api-key` to `<ScriptGoogleMapsStaticMap>`{lang="html"} to bypass the proxy, and review the current [Maps Platform Terms](https://cloud.google.com/maps-platform/terms) for your use case.
46
-
::
47
-
48
-
Google's terms allow limited Geocoding result caching under specific conditions. The Nuxt endpoint caches upstream geocoding responses for 30 days, so confirm that your use meets the current [service-specific caching terms](https://cloud.google.com/maps-platform/terms/maps-service-terms#6.-geocoding-api).
42
+
**Direct static maps:**`<ScriptGoogleMapsStaticMap>`{lang="html"} loads images directly from Google with a public browser key. Give it a separate key restricted to your website and the Maps Static API, or allow the shared registry key to access the Maps JavaScript API, Places API (Legacy), and Maps Static API.
49
43
50
44
## Cost Controls
51
45
52
-
1.**Use coordinates when you have them.** Pass `center` as `{ lat, lng }` instead of an address to avoid Geocoding or Places requests.
46
+
1.**Use coordinates when you have them.** Pass `center` as `{ lat, lng }` instead of resolving an address through Places.
53
47
54
48
2.**Keep the default lazy trigger.** Use `trigger="immediate"` only when the map should start loading after hydration instead of waiting for an element interaction.
55
49
@@ -79,4 +73,4 @@ For 100,000 monthly page views under the July 2026 global list prices:
79
73
| Static preview on every view, no interaction | $180 |
80
74
| Static preview on every view and 20% interact | $250 |
81
75
82
-
These examples apply each SKU's free usage cap and exclude geocoding, Places requests, taxes, negotiated discounts, and other projects on the same billing account.
76
+
These examples apply each SKU's free usage cap and exclude Places requests, taxes, negotiated discounts, and other projects on the same billing account.
Copy file name to clipboardExpand all lines: docs/content/scripts/google-maps/2.api/1.script-google-maps.md
+1-16Lines changed: 1 addition & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -21,28 +21,13 @@ The default events are `mouseenter`, `mouseover`, and `mousedown`.
21
21
22
22
See the [Facade Component API](/docs/guides/facade-components#facade-components-api) for all props, events, and slots.
23
23
24
-
::tip
25
-
**Deprecated:** the top-level `center` and `zoom` props are now deprecated. Pass them via `mapOptions` instead. The legacy props still work and emit a dev-mode warning when used. `mapOptions.center` and `mapOptions.zoom` take precedence when both are set.
26
-
27
-
```vue
28
-
<template>
29
-
<!-- Before (deprecated) -->
30
-
<ScriptGoogleMaps :center="{ lat, lng }" :zoom="12" />
Access the basic Google Maps instances via a template ref. The exposed object contains:
41
27
42
28
| Property | Type | Description |
43
29
|----------|------|-------------|
44
30
|`mapsApi`|`typeof google.maps \| undefined`{lang="html"} | The core Maps API namespace (`google.maps`). |
45
-
|`googleMaps`|`typeof google.maps \| undefined`{lang="html"} |**Deprecated.** Alias for `mapsApi`; emits a dev-mode warning. Slated for removal in a future major version. |
46
31
|`map`|`google.maps.Map \| undefined`{lang="html"} | The map instance. |
47
32
|`resolveQueryToLatLng`|`(query) => Promise<google.maps.LatLng \| google.maps.LatLngLiteral \| undefined>`{lang="html"} | Geocode an address to coordinates. The promise rejects when Google returns no location or the request fails. |
48
33
|`importLibrary`|`(name) => Promise<Library>`{lang="html"} | Load additional Google Maps libraries at runtime. |
@@ -66,7 +51,7 @@ async function flyToSydney() {
66
51
</template>
67
52
```
68
53
69
-
Vue unwraps the exposed refs when you access them through a component template ref, as in the example above. The `@ready` payload uses the raw exposed object, so its `mapsApi`, `googleMaps`, and `map` properties are `ShallowRef`s.
54
+
Vue unwraps the exposed refs when you access them through a component template ref, as in the example above. The `@ready` payload uses the raw exposed object, so its `mapsApi` and `map` properties are `ShallowRef`s.
0 commit comments