ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
37 lines (35 loc) • 1.08 kB
HTML
<html ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<script>
var app = angular.module('myApp', ['ngMap']);
app.controller('EventSimpleController', function($timeout, NgMap) {
var marker;
var vm = this;
NgMap.getMap().then(function(map) {
vm.map = map;
marker = map.markers[0];
});
vm.centerChanged = function(event) {
$timeout(function() {
vm.map.panTo(marker.getPosition());
}, 3000);
}
vm.click = function(event) {
vm.map.setZoom(8);
vm.map.setCenter(marker.getPosition());
}
});
</script>
</head>
<body ng-controller="EventSimpleController as vm">
Simple Click Event
<br/>
Click the marker to zoom and drag and watch it comes back after 3 seconds.
<ng-map zoom="4" center="-25.363882, 131.044922" on-center-changed="vm.centerChanged()">
<marker position="-25.363882, 131.044922" on-click="vm.click()" title="Click to zoom"></marker>
</ng-map>
</body>
</html>