ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
45 lines (42 loc) • 1.29 kB
HTML
<html>
<head>
<title>Place Autocomplete Address Form</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(NgMap) {
var vm = this;
vm.types = "['establishment']";
vm.placeChanged = function() {
vm.place = this.getPlace();
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/>
Enter an address: <br/>
<input places-auto-complete size=80
ng-model="vm.address"
component-restrictions="{country:'us'}"
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}}
<ng-map></ng-map>
</body>
</html>