ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
71 lines (52 loc) • 1.75 kB
HTML
<html>
<head>
<title>Place Autocomplete Address Form With Circle Bound Restriction</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<script>
angular.module('myApp', ['ngMap']).controller('MyCtrl', function($scope, NgMap) {
var vm = this;
vm.types = "['establishment']";
vm.mybounds = {center: {lat: 45, lng: 9}, radius: 5000};
vm.placeChanged = function() {
vm.place = this.getPlace();
console.log(vm.place);
console.log('location', vm.place.geometry.location);
vm.map.setCenter(vm.place.geometry.location);
}
NgMap.getMap().then(function(map) {
vm.map = map;
});
});
</script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl as vm">
Auto Complete Type:
<select ng-model="vm.types">
<option value="['geocode']">Geodode</option>
<option value="['establishment']">Establishment</option>
<option value="['address']">Address</option>
</select><br/>
Bounds Lat: <input type="number" ng-model="vm.mybounds.center.lat" style="width: 40px;"></input>
Lng: <input type="number" ng-model="vm.mybounds.center.lng" style="width: 40px;"></input>
Radius: <input type="number" ng-model="vm.mybounds.radius" style="width: 40px;"></input>
<br/>
<br/>
Enter an address: <br/>
<input places-auto-complete
size=80
ng-model="vm.address"
strict-bounds="true"
circle-bounds="{{vm.mybounds}}"
types="{{types}}"
on-place-changed="vm.placeChanged()" /> <br/>
<div ng-show="vm.place">
Address = {{vm.place.formatted_address}} <br/>
Location: {{vm.place.geometry.location}}<br/>
</div>
address : {{vm.address}}
<br/>
<ng-map></ng-map>
</body>
</html>