JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/angular-google-maps/2.0.17/dist/angular-google-maps.min.js"></script>
<div ng-app='Example' ng-controller='ExampleController'>
    <ui-gmap-google-map center="center" zoom="zoom" pan="true" events="events">
        <ui-gmap-markers models="models" coords="'self'" options="'options'"></ui-gmap-markers>
    </ui-gmap-google-map>
</div>

CSS

.angular-google-map-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

JavaScript

angular.module('Example', ['uiGmapgoogle-maps']).
controller('ExampleController', function ($scope, uiGmapGoogleMapApi) {

    $scope.center = {
        latitude: 30,
        longitude: -90
    };
    $scope.zoom = 8;

    $scope.models = [];

    $scope.events = {
        click: function (map, eventName, handlerArgs) {
            $scope.$apply(function () {
                $scope.models.push({
                    id: $scope.models.length,
                    latitude: handlerArgs[0].latLng.lat(),
                    longitude: handlerArgs[0].latLng.lng(),
                    options: {
                        animation: api.Animation.DROP,
                        title: handlerArgs[0].latLng.toUrlValue()
                    }
                });
            });
        }
    };

    var api;
    uiGmapGoogleMapApi.then(function (googleMaps) {
        api = googleMaps;
    });
});