JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="https://rawgit.com/angular-ui/angular-google-maps/2.0.11/dist/angular-google-maps.min.js"></script>
<div ng-app="Example" ng-controller="ExampleController">
    <ui-gmap-google-map center="center" zoom="zoom" control="control"></ui-gmap-google-map>
</div>

CSS

.angular-google-map-container {
    padding-bottom: 200px;
}

JavaScript

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

function ($scope, IsReady) {
    $scope.center = {
        latitude: 30,
        longitude: -90
    };
    $scope.zoom = 8;
    $scope.control = {};
    IsReady.promise().then(function (maps) {
        var map1 = $scope.control.getGMap();
        var map2 = maps[0].map;
        alert(map1 === map2);
    });
}]);