AngularJS Example

by Michiel Helvensteijn

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false&amp;libraries=geometry,drawing&amp;key=AIzaSyBFYBtRJa4eF7GjOyTZX3yt18aTUz3CrLw"></script>
<div ng-app="App" ng-controller="Controller" >
    <div id="map"></div>
    <div ng-repeat="coord in coordinates">
        {{coord.lat()}}, {{coord.lng()}}
    </div>
</div>

CSS

#map {
    width: 300px;
    height: 300px;
}

JavaScript

var app = angular.module('App', []);

app.factory('onGoogleMapsEvent', function ($rootScope) {
    return function (element, event, callback) {
        google.maps.event.addDomListener(element, event, function (e) {
            $rootScope.$apply(function () { callback(e); });
        });
    };
});

function Controller($scope, onGoogleMapsEvent) {
    $scope.coordinates = [];
    
    var mapElement = document.getElementById("map");
    var mapOptions = {
        disableDoubleClickZoom: true, draggable: false,
        disableDefaultUI      : true, zoom     : 10,
        center: new google.maps.LatLng(52.1694431, 4.4585547)
    };
    var map = new google.maps.Map(mapElement, mapOptions);
    
    onGoogleMapsEvent(map, 'dblclick', function (mouseEvent) {
        $scope.coordinates.push(mouseEvent.latLng);
    });
}