demo.html

<!-- Le directive
================================================== -->

<section id="map" ng-controller="MapCtrl" ng-cloak>
    <div class="page-header">
        <h1>Google Maps</h1>
    </div>
    <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 class="btn" 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 class="btn btn-primary" ng-click="setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)">Set Position</a>
                </div>
            </div>

            <!--Giving the div an id="map_canvas" fix problems with twitter bootstrap affecting
            google maps-->
            <div id="map_canvas" ui-map="myMap" class="span8 map"
                 ui-event="{'map-click': 'addMarker($event, $params)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
                 ui-options="mapOptions">
            </div>
        </div>
    </div>
    <h3>How?</h3>
    <p class="alert alert-info"><i class="icon-info-sign"></i> Remember that you can pass a variable containing an object to <code>ui-event</code></p>
<pre class="prettyprint">
&lt;h4&gt;Click to add a marker!&lt;/h4&gt;
&lt;p&gt;{{zoomMessage}}&lt;/p&gt;
&lt;ul&gt;
  &lt;li ng-repeat=&quot;marker in myMarkers&quot;&gt;
    &lt;a ng-click=&quot;myMap.panTo(marker.getPosition())&quot;&gt;Pan to Marker {{$index}}&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;!-- 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 --&gt;
&lt;div ng-repeat=&quot;marker in myMarkers&quot; ui-map-marker=&quot;myMarkers[$index]&quot;
  ui-event=&quot;{&#x27;map-click&#x27;: &#x27;openMarkerInfo(marker)&#x27;}&quot;&gt;
&lt;/div&gt;

&lt;div ui-map-info-window=&quot;myInfoWindow&quot;&gt;
  &lt;h1&gt;Marker&lt;/h1&gt;
  Lat: &lt;input ng-model=&quot;currentMarkerLat&quot;&gt;, Lng: &lt;input ng-model=&quot;currentMarkerLng&quot;&gt;
  &lt;a ng-click=&quot;setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)&quot;&gt;Set Position&lt;/a&gt;
&lt;/div&gt;

&lt;!-- Giving the div an id="map_canvas" fix problems with twitter bootstrap affecting
google maps --&gt;
&lt;div id=&quot;map_canvas&quot; ui-map=&quot;myMap&quot; class=&quot;map&quot;
  ui-event=&quot;{&#x27;map-click&#x27;: &#x27;addMarker($event, $params)&#x27;, &#x27;map-zoom_changed&#x27;: &#x27;setZoomMessage(myMap.getZoom())&#x27; }&quot;
  ui-options=&quot;mapOptions&quot;&gt;
&lt;/div&gt;

&lt;script&gt;
$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 = &#x27;You just zoomed to &#x27;+zoom+&#x27;!&#x27;;
  console.log(zoom,&#x27;zoomed&#x27;)
};

$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));
};
&lt;/script&gt;

&lt;style&gt;
.map {
  height: 400px;
  width: 600px;
}
&lt;/style&gt;
</pre>
</section>