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

angular.module('App', []);

function Controller($scope) {
    $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);
    
    google.maps.event.addDomListener(map, 'dblclick', function (mouseEvent) {
        $scope.$apply(function () {
            $scope.coordinates.push(mouseEvent.latLng);
        });
    });
}