JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/master/docs/assets/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
<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>
    <img ng-src="{{logo}}">
  Lat: <input ng-model="currentMarkerLat">, Lng: <input ng-model="currentMarkerLng">
  <a ng-click="setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)">Set Position</a>
</div>
 
<!-- Giving the div an id="map_canvas" fix problems with twitter bootstrap affecting
google maps -->
<div id="map_canvas" ui-map="myMap" class="map"
  ui-event="{'map-click': 'addMarker($event)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
  ui-options="mapOptions">
</div>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

CSS

.map {
  height: 350px;
  width: 500px;
}

JavaScript

angular.module("myApp", ['ui']);

function MainCtrl($scope) {
    $scope.myMarkers = [];
     $scope.logo = 'http://www.google.com/images/srpr/logo4w.png';
    $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));
    };
}