<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

stylegoogle.maps.Data.StylingFunction | google.maps.Data.StyleOptions

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>

Both src and style are reactive. Changing src clears existing features and loads the new data. Changing style updates feature styling in place.

Edit this page

Markdown For LLMs

Rectangular overlay on the map. Place inside a <ScriptGoogleMaps> component.

Heatmap visualization layer. Place inside a <ScriptGoogleMaps> component. The component automatically loads the visualization library.