-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathngMap.html
48 lines (45 loc) · 1.6 KB
/
ngMap.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.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(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>
<marker position="{{vm.address}}" title="{{address}}"></marker>
</ng-map>
</body>
</html>