JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.1.0-X.0/angular-google-maps.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.4.0/lodash.js"></script>
<div id="map" ng-controller="MapCtrl as vm">
    <ui-gmap-google-map center="vm.mapDto.center" zoom="vm.mapDto.zoom" draggable="false" bounds="vm.mapDto.bounds" options="vm.mapDto.options">
        <ui-gmap-polygon ng-repeat="poly in vm.polygons track by $index" path="poly.location" visible="true" editable="true" draggable="false" fill="vm.geoFill" events="vm.polyEvents"></ui-gmap-polygon>
    </ui-gmap-google-map>
</div>

CSS

.angular-google-map-container {
    height: 400px;
}

JavaScript

var app = angular.module('myApp', ['uiGmapgoogle-maps']);

app.controller('MapCtrl', function ($scope) {
    var vm = this;

    vm.mapDto = {
        center: {
            latitude: 36,
            longitude: -116
        },
        zoom: 5,
        bounds: {},
        options: {
            maxZoom: 20,
            minZoom: 3
        }
    };

    vm.polygons = [{
        id: 1,
        location: [{
            latitude: 33.75,
            longitude: -118
        }, {
            latitude: 36,
            longitude: -115
        }, {
            latitude: 39,
            longitude: -119
        }]
    }];

    vm.geoFill = {
        opacity: 0
    };

    vm.polyEvents = {
        mouseover: function (geo, eventName, model, args) {
            console.log("mouse over");
        },
        mouseout: function (geo, eventName, model, args) {
            console.log("mouse out");
        }
        //set_at: THIS IS WHAT I NEED!!!!!!!!!!!!
    }

});