Polygon

• Add polygon to the map
• Set polygon options

Add polygon to the map

You can add polygons to the map using polygon component.

<template>
  <GMapMap
      :center="center"
      :zoom="4"
      style="width: 100vw; height: 100vh"
  >
    <GMapPolygon
        :paths="paths"
    />
  </GMapMap>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      center: {lat: 25.774, lng: -80.19},
      paths: [
        { lat: 25.774, lng: -80.19 },
        { lat: 18.466, lng: -66.118 },
        { lat: 32.321, lng: -64.757 },
      ],
    }
  },
}
</script>

Set polygon options

You can set polygon style and other options using options prop.

<template>
  <GMapMap>
    <GMapPolygon :paths="paths"/>
  </GMapMap>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      options: {
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
      }
    }
  },
}
</script>