Api
<ScriptGoogleMapsGeoJson>
Renders GeoJSON data on the map using the Google Maps Data layer. Accepts a URL string or inline GeoJSON object. Place inside a <ScriptGoogleMaps> component.
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" :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
<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>
Both
src and style are reactive. Changing src clears existing features and loads the new data. Changing style updates feature styling in place. Feature mutation events (addfeature, removefeature, setgeometry, setproperty, removeproperty) are also emitted.