JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDRRaTn5V_CRC0BMHOeSIAjP6iVgKtmKZw&sensor=false">
    </script>

<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>


<div ng-app="myApp" ng-controller="MainCtrl" id="main-content">

    <div class="well">
        <div class="row">
            <div class="span3">
                <h4>Click to add a marker!</h4>

                <p>{{zoomMessage}}</p>
                <ul>
                    <li ng-repeat="marker in myMarkers">
                        <a ng-click="myMap.panTo(marker.getPosition())">Pan to Marker {{$index}}</a>
                    </li>
                </ul>

                <!-- this is the confusing part. we have to point the map marker directive
                  at an existing google.maps.Marker object, so it can hook up events -->
                <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
                     ui-event="{'map-click': 'openMarkerInfo(marker)'}">
                </div>

                <div ui-map-info-window="myInfoWindow">
                    <h1>Marker</h1>
                    Lat: <input ng-model="currentMarkerLat">, Lng: <input ng-model="currentMarkerLng">
                    <a ng-click="setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)">Set Position</a>
                </div>
            </div>

<div id="map_canvas" ui-map="myMap" class="map span8"
                 ui-event="{'map-click': 'addMarker($event)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
                 ui-options="mapOptions">
            </div>


        </div>
    </div>


</div>

CSS

.map {
    height: 400px;
    width: 600px;
}

JavaScript

angular.module('myApp', ['ui'])
    .controller('MainCtrl', function ($scope, $log){

    $log.info('MainCtrl');


    $scope.keypressCallback = function($event) {
        alert('Voila!');
        $event.preventDefault();
    };

    $scope.myMarkers = [];

    $scope.mapOptions = {
        center: new google.maps.LatLng(35.784, -78.670),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    $scope.addMarker = function($event) {
        $scope.myMarkers.push(new google.maps.Marker({
            map: $scope.myMap,
            position: $event.latLng
        }));
    };

    $scope.setZoomMessage = function(zoom) {
        $scope.zoomMessage = 'You just zoomed to '+zoom+'!';
        console.log(zoom,'zoomed');
    };

    $scope.openMarkerInfo = function(marker) {
        $scope.currentMarker = marker;
        $scope.currentMarkerLat = marker.getPosition().lat();
        $scope.currentMarkerLng = marker.getPosition().lng();
        $scope.myInfoWindow.open($scope.myMap, marker);
    };

    $scope.setMarkerPosition = function(marker, lat, lng) {
        marker.setPosition(new google.maps.LatLng(lat, lng));
    };

});