Drawing or rendering polygons in Google Maps is doable with some effort. However, highlighting a polygon can be a bit challenging because Google doesn’t provide any API to do that natively. Here I’ll show you how to highlight a polygon. This is possible by changing the opacity of the fillColor property. You then need to bind it to the Event Listeners provided by Google. Let’s begin:

Project setup

First, I’m creating a data set to keep the coordinates of the polygons I’m about to draw. Of course, you can get them from other sources as well. Just make sure they are in a format supported by Google, as I’ve done below. I’m keeping them in a file name polygonsets.js:

export const polygonCoordsSetData = [
  [
    { lat: 29.1326328, lng: 75.4326439 },
    { lat: 28.6034753, lng: 74.9931908 },
    { lat: 28.2217897, lng: 75.6139183 },
    { lat: 28.6757916, lng: 76.1412621 },
    { lat: 29.1230358, lng: 75.4546165 },
    { lat: 29.1326328, lng: 75.4326439 }
  ],
  [
    { lat: 29.6208854, lng: 76.1317668 },
    { lat: 29.6352102, lng: 77.1872408 },
    { lat: 28.7817652, lng: 77.3631531 },
    { lat: 28.680272, lng: 76.9314777 },
    { lat: 29.6205496, lng: 76.1288777 },
    { lat: 29.6208854, lng: 76.1317668 }
  ],
  [
    { lat: 28.4267317, lng: 77.1130229 },
    { lat: 27.7385421, lng: 75.9915818 },
    { lat: 27.4854309, lng: 76.882138 },
    { lat: 27.6509929, lng: 77.17899 },
    { lat: 28.4267317, lng: 77.1130229 }
  ]
];
Code language: JavaScript (javascript)

Now, let’s move to the actual component where you’d need to write all the logic.

<template>
  <div>
    <div class="header-margins">
      Highlight Google Maps polygons on hover (nightprogrammer.com)
    </div>
    <div id="polygon-label-map" class="map-margins"></div>
  </div>
</template>

<script>
import loadGoogleMapsApi from "load-google-maps-api";
import { gMapsApiKey } from "./../constants";
import { polygonCoordsSetData } from "./polygonsets";

export default {
  name: "AnimatedMarkerMap",
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    loadGoogleMapsApi({
      key: gMapsApiKey,
      libraries: ["places", "drawing", "geometry"],
    }).then(() => {
      const mapZoom = 12;
      const { google } = window;
      const mapOptions = {
        zoom: mapZoom,
        mapTypeId: google.maps.MapTypeId.HYBRID,
        center: new google.maps.LatLng({ lat: 28.680272, lng: 76.5314777 }),
        mapTypeControl: true,
        streetViewControl: false,
        mapTypeControlOptions: {
          position: google.maps.ControlPosition.BOTTOM_LEFT,
        },
      };
      this.map = new google.maps.Map(
        document.getElementById("polygon-label-map"),
        mapOptions
      );

      const polygonCoordsSet = polygonCoordsSetData;

      const tempBounds = new google.maps.LatLngBounds();

      for (let i = 0; i < polygonCoordsSet.length; i++) {
        for (let j = 0; j < polygonCoordsSet[i].length; j++) {
          const x = {
            lat: polygonCoordsSet[i].lat,
            lng: polygonCoordsSet[i].lng,
          };
          const BoundLatLng = new google.maps.LatLng({
            lat: parseFloat(x.lat),
            lng: parseFloat(x.lng),
          });
          tempBounds.extend(BoundLatLng);
        }
      }

      const PolygonShapes = [];
      const fillColors = ["#ff0000", "#00ff00", "#00ff00"];

      for (let i = 0; i < polygonCoordsSet.length; i++) {
        const polygonShapeContructor = new google.maps.Polygon({
          paths: polygonCoordsSet[i],
          strokeColor: "#ffffff",
          map: this.map,
          strokeWeight: 3,
          fillColor: fillColors[i],
          fillOpacity: 0.2,
          zIndex: 99999,
        });
        google.maps.event.addListener(
          polygonShapeContructor,
          "mouseover",
          () => {
            polygonShapeContructor.setOptions({
              fillOpacity: 0.8,
            });
          }
        );

        google.maps.event.addListener(
          polygonShapeContructor,
          "mouseout",
          () => {
            polygonShapeContructor.setOptions({
              fillOpacity: 0.2,
            });
          }
        );
        PolygonShapes.push(polygonShapeContructor);
      }

      PolygonShapes.forEach((polygon) => {
        polygon.setMap(this.map);
      });

      this.map.setZoom(7);
    });
  },
};
</script>

<style scoped>
.header-margins {
  margin-left: 40px;
  margin-top: 20px;
}

.map-margins {
  height: 400px;
  width: 600px;
  margin: 30px 40px;
}
</style>
Code language: HTML, XML (xml)

Let me explain the above code by lines:

12: Here I’ve imported the Google Maps API key. You can use yours there.

13: This is where I imported the polygonsets.js file

39: Here I initialised the Google Maps map and assigned it to the local state map

44: This is where I copied the imported coordinates set data to the new constant polygonCoordsSet

46: Here I created Google Maps Bounds, to span the map to the area occupied by the polygon coordinates

62: Here I’ve used a variable PolygonShapes, where I’d be pushing the polygon shapes after generating it with polygon shapes constructor

66: This is where I actually create the polygon shapes.

75 & 85: HereI made two event listeners which’d keep listening for mouseover and mouseout events over the polygons. You’d also notice that I toggled the opacity of the polygons between 0.2 and 0.8.

94: Finally I pushed the polygon constructors to the PolygonShapes variable.

97: Here I iterated over PolygonShapes and mounted them on the map local state.

101: I kept the map zoom level at 7.

This is how it’ll look like as you hover your mouse over it:

You can find the source code and the working demo from my repos down here:

Demo | Codesandbox | Github