JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://rawgit.com/angular-ui/angular-google-maps/2.0.6/dist/angular-google-maps.js"></script>
<div ng-app="myApp">
<div ng-controller='AppController as appCtrl'>
<ui-gmap-google-map center="appCtrl.mapSetup.center"
zoom="appCtrl.mapSetup.zoom"
control="appCtrl.mapSetup">
</ui-gmap-google-map>
</div>
</div>
CSS
.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
JavaScript
angular.module('myApp', ['google-maps'.ns()])
.controller('AppController', ['$scope', 'GoogleMapApi'.ns(),
function ($scope, GoogleMapApi) {
this.mapSetup = {
center: { latitude: 40, longitude: -88 },
zoom: 8
};
var mapSetup = this.mapSetup;
GoogleMapApi.then(function () {
google.maps.event.addListener(mapSetup.getGMap(), 'click', function () {
alert('hello');
});
});
}]);