123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- <!doctype html>
- <html ng-app="myapp">
- <head>
- <script src="https://code.angularjs.org/1.2.25/angular.js"></script>
- <!-- build:js scripts/ng-map.min.js -->
- <script src="../app/scripts/app.js"></script>
- <script src="../app/scripts/directives/map_controller.js"></script>
- <script src="../app/scripts/directives/map.js"></script>
- <script src="../app/scripts/directives/marker.js"></script>
- <script src="../app/scripts/directives/shape.js"></script>
- <script src="../app/scripts/directives/info-window.js"></script>
- <script src="../app/scripts/directives/map-lazy-load.js"></script>
- <script src="../app/scripts/services/geo_coder.js"></script>
- <script src="../app/scripts/services/navigator_geolocation.js"></script>
- <script src="../app/scripts/services/attr2_options.js"></script>
- <!-- endbuild -->
- <script>
- var app = app || angular.module('myapp', ['ngMap']);
- app.controller('MyCtrl', function($scope, $compile) {
- $scope.stores = {
- foo: { position:[41, -87], items: [1,2,3,4]},
- bar:{ position:[41, -83], items: [5,6,7,8]}
- };
- $scope.showStore = function(evt, id) {
- $scope.store = $scope.stores[id];
- $scope.showInfoWindow.apply(this, [evt, 'foo']);
- };
- });
- </script>
- </head>
- <body>
- <div map-lazy-load="http://maps.google.com/maps/api/js" ng-controller="MyCtrl">
- <map center="41,-87" zoom="3">
-
- <info-window id="foo">
- <div ng-non-bindable="">
- Lat/Lng: {{this.getPosition()}}<br/>
- <ul>
- <li ng-repeat='item in store.items'>{{item}}</li>
- </ul>
- </div>
- </info-window>
-
- <marker ng-repeat="(id, store) in stores" id="{{id}}"
- position="{{store.position}}"
- on-click="showStore(event, id)"
- ></marker>
-
- <info-window id="bar">
- <div ng-non-bindable="">
- Lat: {{this.getPosition().lat()}}<br/>
- Lng: {{this.getPosition().lng()}}<br/>
- </div>
- </info-window>
- <marker position="41, -79" on-click="showInfoWindow('bar')" />
- </map>
- </div>
-
- </body>
- </html>
|