map-lazy-load.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!doctype html>
  2. <html ng-app="myapp">
  3. <head>
  4. <script src="https://code.angularjs.org/1.2.25/angular.js"></script>
  5. <!-- build:js scripts/ng-map.min.js -->
  6. <script src="../app/scripts/app.js"></script>
  7. <script src="../app/scripts/directives/map_controller.js"></script>
  8. <script src="../app/scripts/directives/map.js"></script>
  9. <script src="../app/scripts/directives/marker.js"></script>
  10. <script src="../app/scripts/directives/shape.js"></script>
  11. <script src="../app/scripts/directives/info-window.js"></script>
  12. <script src="../app/scripts/directives/map-lazy-load.js"></script>
  13. <script src="../app/scripts/services/geo_coder.js"></script>
  14. <script src="../app/scripts/services/navigator_geolocation.js"></script>
  15. <script src="../app/scripts/services/attr2_options.js"></script>
  16. <!-- endbuild -->
  17. <script>
  18. var app = app || angular.module('myapp', ['ngMap']);
  19. app.controller('MyCtrl', function($scope, $compile) {
  20. $scope.stores = {
  21. foo: { position:[41, -87], items: [1,2,3,4]},
  22. bar:{ position:[41, -83], items: [5,6,7,8]}
  23. };
  24. $scope.showStore = function(evt, id) {
  25. $scope.store = $scope.stores[id];
  26. $scope.showInfoWindow.apply(this, [evt, 'foo']);
  27. };
  28. });
  29. </script>
  30. </head>
  31. <body>
  32. <div map-lazy-load="http://maps.google.com/maps/api/js" ng-controller="MyCtrl">
  33. <map center="41,-87" zoom="3">
  34. <info-window id="foo">
  35. <div ng-non-bindable="">
  36. Lat/Lng: {{this.getPosition()}}<br/>
  37. <ul>
  38. <li ng-repeat='item in store.items'>{{item}}</li>
  39. </ul>
  40. </div>
  41. </info-window>
  42. <marker ng-repeat="(id, store) in stores" id="{{id}}"
  43. position="{{store.position}}"
  44. on-click="showStore(event, id)"
  45. ></marker>
  46. <info-window id="bar">
  47. <div ng-non-bindable="">
  48. Lat: {{this.getPosition().lat()}}<br/>
  49. Lng: {{this.getPosition().lng()}}<br/>
  50. </div>
  51. </info-window>
  52. <marker position="41, -79" on-click="showInfoWindow('bar')" />
  53. </map>
  54. </div>
  55. </body>
  56. </html>