JSFiddle - React, Tailwind, and code Playground

by diesel555

HTML

<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="https://raw.githubusercontent.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.js"></script>
<div ng-app="trips">
    <div ng-controller="TripsController as tripCtrl">
        <ui-gmap-google-map control='map.control' center='map.center' zoom='map.zoom'></ui-gmap-google-map>
        {{test}}
    </div>
</div>

CSS

.angular-google-map-container {
    height: 300px;
    background-color: #003300;
}
.angular-google-map {
    height: 300px;
}

JavaScript

angular.module('trips', ['uiGmapgoogle-maps'])
    .controller('TripsController', [
        '$scope', 
        'uiGmapGoogleMapApi',
        'uiGmapIsReady',

function ($scope, uiGmapGoogleMapApi, uiGmapIsReady) {
    $scope.test = "angular is running!"

    $scope.readyForMap = false

    $scope.map = {
        center: {
            latitude: 39.8433,
            longitude: -105.1190
        },
        zoom: 10
    }
    $scope.map.control = {}

    uiGmapIsReady.promise().then(function (maps) {
        $scope.readyForMap = true
        $scope.map.control.refresh()
    })
    
}])