ngmap
Version:
The Simplest AngularJS Google Maps V3 Directive
64 lines (57 loc) • 1.69 kB
HTML
<html ng-app="ngMap">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<script>
angular.module('ngMap').controller('MyCtrl', function(NgMap) {
var vm = this;
NgMap.getMap().then(function(map) {
console.log('map', map);
vm.map = map;
});
vm.clicked = function() {
alert('Clicked a link inside infoWindow');
};
vm.shops = [
{id:'foo', name: 'FOO SHOP', position:[41,-87]},
{id:'bar', name: 'BAR SHOP', position:[42,-86]}
];
vm.shop = vm.shops[0];
vm.showDetail = function(e, shop) {
vm.shop = shop;
vm.map.showInfoWindow('foo-iw', shop.id);
};
vm.hideDetail = function() {
vm.map.hideInfoWindow('foo-iw');
};
});
</script>
</head>
<body>
<div ng-controller="MyCtrl as vm">
<ng-map default-style="true" center="41,-87" zoom="3">
<marker id='{{shop.id}}' position="{{shop.position}}"
ng-repeat="shop in vm.shops"
on-click="vm.showDetail(shop)">
</marker>
<info-window id="foo-iw">
<div ng-non-bindable="">
id: {{vm.shop.id}}<br/>
name: {{vm.shop.name}}<br/>
Position 1: {{vm.shop.position}}<br/>
Position 2: {{anchor.getPosition()}}<br/>
Position 3: {{vm.map.markers[vm.shop.id].getPosition()}}<br/>
<a href="#" ng-click="vm.clicked()">Click Here</a>
</div>
</info-window>
</ng-map>
<button ng-click="vm.showDetail(e, vm.shop)">
show InfoWindow of the shop
</button>
<button ng-click="vm.hideDetail(e, vm.shop)">
Hide InfoWindow of the shop
</button>
</div>
</body>
</html>