<ScriptGoogleMapsGeoJson>
Renders GeoJSON (RFC 7946) through the Google Maps Data layer. Pass a URL or an inline GeoJSON object, and place the component inside <ScriptGoogleMaps>.
srcstring | object required The GeoJSON source. Can be a URL string or a GeoJSON object.
stylegoogle.maps.Data.StylingFunction | google.maps.Data.StyleOptionsStyling options or a function that computes styles per feature.
Usage
Inline GeoJSON
<script setup lang="ts">
const geoJsonData = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Polygon',
coordinates: [[
[151.20, -33.87],
[151.25, -33.87],
[151.25, -33.90],
[151.20, -33.90],
[151.20, -33.87],
]],
},
properties: { name: 'Sydney CBD' },
},
],
}
</script>
<template>
<ScriptGoogleMaps
api-key="your-api-key"
:map-options="{
center: { lat: -33.885, lng: 151.225 },
zoom: 13,
}"
>
<ScriptGoogleMapsGeoJson
:src="geoJsonData"
:style="{ fillColor: '#4285F4', fillOpacity: 0.3, strokeColor: '#4285F4', strokeWeight: 2 }"
/>
</ScriptGoogleMaps>
</template>
Remote URL
The browser fetches remote GeoJSON with XHR, so a different origin must allow the request with CORS. Google's GeoJSON import guide shows the required response header.
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsGeoJson
src="https://example.com/boundaries.geojson"
:style="{ fillColor: '#34a853', fillOpacity: 0.2, strokeWeight: 1 }"
/>
</ScriptGoogleMaps>
</template>
Dynamic Styling Function
Pass a function to style instead of a static object to style features based on their properties.
<script setup lang="ts">
function styleFeature(feature: google.maps.Data.Feature) {
const population = feature.getProperty('population') as number
return {
fillColor: population > 1000000 ? '#EA4335' : '#34a853',
fillOpacity: 0.4,
strokeWeight: 1,
}
}
</script>
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsGeoJson
src="https://example.com/regions.geojson"
:style="styleFeature"
/>
</ScriptGoogleMaps>
</template>
Feature Click Events
Listen to click events to build interactive GeoJSON layers. The event payload includes the clicked feature and its properties.
<script setup lang="ts">
function onFeatureClick(event: google.maps.Data.MouseEvent) {
const name = event.feature.getProperty('name')
console.log('Clicked:', name)
}
</script>
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsGeoJson
src="https://example.com/boundaries.geojson"
:style="{ fillColor: '#4285F4', fillOpacity: 0.2 }"
@click="onFeatureClick"
/>
</ScriptGoogleMaps>
</template>
The component clears existing features and loads the new data when you replace src. It does not observe nested mutations to an inline src object. It watches style deeply and updates the layer in place. The component also emits addfeature, removefeature, setgeometry, setproperty, and removeproperty.