AngularJS Example

HTML

<div ng-app="myapp">
  <div ng-controller="testCtrl">    
    <ng-map id="map" center="-25.363882,131.044922" zoom="4" on-click="getpos($event)">
      <marker position="{{latlng}}" title="Hello World!" on-dragend="getpos($event)" 
        animation="Animation.BOUNCE" animation="DROP" draggable="true"></marker>
    </ng-map>
    {{latlng}}
  </div>

</div>

CSS

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-sanitize.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<style>

JavaScript

angular.module('myapp', ['ngMap']).run(function($rootScope) {
  $rootScope.$on('mapInitialized', function(evt,map) {
    $rootScope.map = map;
    $rootScope.$apply();
  });
})
.controller('testCtrl', ['$scope', function testCtrl($scope) {
  $scope.latlng = [-25.363882,131.044922];
  $scope.getpos = function(event){
     $scope.latlng = [event.latLng.lat(), event.latLng.lng()];
  };
  
}]);