<section id="map">
<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>

<!-- 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, $params)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
  ui-options="mapOptions">
</div>
</section>

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

function initCall() {
  console.log('Google maps api initialized.');
  angular.bootstrap(document.getElementById('map'), ['doc.ui-map']);
}

app.controller('MapCtrl', ['$scope', function($scope) {

$scope.myMarkers = [];

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

$scope.addMarker = function($event, $params) {
  $scope.myMarkers.push(new google.maps.Marker({
    map: $scope.myMap,
    position: $params[0].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));
};
}]);