AngularJS: ui-map & ui-event for Google Maps

Using Angular-UI's ui-map & ui

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<div ng-app='maptesting'>
    <div ng-controller="MapCtrl">
<div id="map_canvas" ui-map="myMap" style="height:300px;width:400px;border:2px solid #777777;margin:3px; border:1px solid" ui-options="mapOptions" ui-event="{'map-idle' : 'onMapIdle()'}"></div>
        
        <!--In addition to creating the markers on the map, div elements with existing google.maps.Marker object should be created to hook up with events -->
        <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]" ui-event="{'map-click':'showMarkerInfo(marker)'}"></div>
        <div ui-map-info-window="myInfoWindow"><h1>{{marker}}</h1></div>
    </div>
</div>

JavaScript

//Add the requried module 'angular-ui' as a dependency
angular.module('maptesting', ['ui.directives']);

function MapCtrl($scope) {
    var ll = new google.maps.LatLng(13.0810, 80.2740);
    $scope.mapOptions = {
        center: ll,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    //Markers should be added after map is loaded
    $scope.onMapIdle = function() {
        if ($scope.myMarkers === undefined){    
            var marker = new google.maps.Marker({
                map: $scope.myMap,
                position: ll
            });
            $scope.myMarkers = [marker, ];
        }
    };
       $scope.showMarkerInfo = function(marker) {  
        $scope.myInfoWindow.open($scope.myMap, marker);
    };



}