blog-angular-ui-map-markers

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://www.flocations.com/static/vendor/angularjs/1.0.2/angular.min.js"></script>
<script src="http://angular-ui.github.com/angular-ui/build/angular-ui.js"></script>
<div ng-app='maptesting' ng-controller="MapCtrl">
    
    <div
    id="map_canvas"
    ui-map="myMap"
    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': 'markerClicked(marker)'}"
    ></div>
    
</div>

CSS

#map_canvas {
    height:300px;
    margin:3px;
    width:400px;
}

JavaScript

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

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() {
        var marker = new google.maps.Marker({
            map: $scope.myMap,
            position: ll
        });
//        $scope.myMarkers = [marker ];
    };

    $scope.markerClicked = function(m) {
        window.alert("clicked");
    };

}