Skip to content

Commit 78c59af

Browse files
allenhwkimallenhwkim
committed
added map-lazy-load.html
1 parent fed9f40 commit 78c59af

File tree

8 files changed

+132
-63
lines changed

8 files changed

+132
-63
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,9 @@ Instances:
7979

8080
Lazy Loading
8181
------------
82-
Simply wrap the map tag with `ng-if="mapJsLoaded"`.
82+
Simply wrap the map tag with `map-lazy-load="http://maps.google.com/maps/api/js"`.
8383

84-
<div ng-if="mapJsLoaded" ng-controller="MyCtrl">
84+
<div map-lazy-load="http://maps.google.com/maps/api/js">
8585
<map center="41,-87" zoom="3"></map>
8686
</div>
8787

‎app/scripts/directives/map-lazy-load.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
/**
2+
* @ngdoc directive
3+
* @name lazy-load
4+
* @requires Attr2Options
5+
* @description
6+
* Requires: Delay the initialization of directive until required .js loads
7+
* Restrict To: Attribute
8+
*
9+
* @param {String} lazy-load
10+
script source file location
11+
* example:
12+
* 'http://maps.googlecom/maps/api/js'
13+
14+
* @example
15+
* Example:
16+
*
17+
* <div lazy-load="http://maps.google.com/maps/api/js">
18+
* <map center="Brampton" zoom="10">
19+
* <marker position="Brampton"></marker>
20+
* </map>
21+
* </div>
22+
*/
23+
/*jshint -W089*/
24+
ngMap.directive('mapLazyLoad', ['$compile', '$timeout', function($compile, $timeout) {
25+
'use strict';
26+
var directiveDefinitionObject = {
27+
compile: function(tElement, tAttrs) {
28+
(!tAttrs.mapLazyLoad) && console.error('requires src with map-lazy-load');
29+
var savedHtml = tElement.html(), src = tAttrs.mapLazyLoad;
30+
/**
31+
* if already loaded, stop processing it
32+
*/
33+
if (document.querySelector('script[src="'+src+'"]')) {
34+
return false;
35+
}
36+
37+
tElement.html(''); // will compile again after script is loaded
38+
return {
39+
pre: function(scope, element, attrs) {
40+
window.lazyLoadCallback = function() {
41+
console.log('script loaded,' + src);
42+
$timeout(function() { /* give some time to load */
43+
element.html(savedHtml);
44+
$compile(element.contents())(scope);
45+
}, 100);
46+
};
47+
48+
var scriptEl = document.createElement('script');
49+
scriptEl.src = src + '?callback=lazyLoadCallback';
50+
document.body.appendChild(scriptEl);
51+
}
52+
};
53+
}
54+
};
55+
return directiveDefinitionObject;
56+
}]);

‎app/scripts/services/maps_js_loader.js‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎spec/e2e/testapp_spec.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
/*global jasmine*/
22
var excludes = [
33
"map_events.html",
4-
"map_fit_bounds.htl",
4+
"map_fit_bounds.html",
55
"map_lazy_init.html",
6+
"map-lazy-load.html",
67
"marker_with_dynamic_position.html",
78
"marker_with_ng_repeat_dynamic.html"
89
];

‎testapp/infowindow_compile.html‎

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

‎testapp/infowindow_compiled.html‎ renamed to ‎testapp/map-lazy-load.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
<script src="../app/scripts/directives/marker.js"></script>
1010
<script src="../app/scripts/directives/shape.js"></script>
1111
<script src="../app/scripts/directives/info-window.js"></script>
12+
<script src="../app/scripts/directives/map-lazy-load.js"></script>
1213
<script src="../app/scripts/services/geo_coder.js"></script>
1314
<script src="../app/scripts/services/navigator_geolocation.js"></script>
1415
<script src="../app/scripts/services/attr2_options.js"></script>
15-
<script src="../app/scripts/services/maps_js_loader.js"></script>
1616
<!-- endbuild -->
1717
<script>
1818
var app = app || angular.module('myapp', ['ngMap']);
@@ -30,7 +30,7 @@
3030
</head>
3131
<body>
3232

33-
<div ng-if="mapJsLoaded" ng-controller="MyCtrl">
33+
<div map-lazy-load="http://maps.google.com/maps/api/js" ng-controller="MyCtrl">
3434
<map center="41,-87" zoom="3">
3535

3636
<info-window id="foo">

‎testapp/map-simple.html‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
<html ng-app="ngMap">
33
<head>
44
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
5-
<!--
65
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
7-
-->
86
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
97
<script src="scripts/app.js"></script>
108
<!-- build:js scripts/ng-map.min.js -->
@@ -13,17 +11,14 @@
1311
<script src="../app/scripts/directives/map.js"></script>
1412
<script src="../app/scripts/directives/marker.js"></script>
1513
<script src="../app/scripts/directives/shape.js"></script>
14+
<script src="../app/scripts/directives/map-lazy-load.js"></script>
1615
<script src="../app/scripts/services/geo_coder.js"></script>
1716
<script src="../app/scripts/services/navigator_geolocation.js"></script>
1817
<script src="../app/scripts/services/attr2_options.js"></script>
19-
<script src="../app/scripts/services/maps_js_loader.js"></script>
2018
<!-- endbuild -->
2119
</head>
2220

2321
<body>
24-
<div ng-if="mapJsLoaded">
25-
<map center="[40.74, -74.18]" />
26-
</div>
27-
mapJsLoaded = {{mapJsLoaded}}
22+
<map center="[40.74, -74.18]" />
2823
</body>
2924
</html>

‎testapp/marker-simple.html‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html ng-app="ngMap">
33
<head>
44
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
5-
<!-- script src="https://maps.google.com/maps/api/js?sensor=false"></script -->
5+
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
66
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
77
<script src="scripts/app.js"></script>
88
<!-- build:js scripts/ng-map.min.js -->
@@ -11,18 +11,16 @@
1111
<script src="../app/scripts/directives/map.js"></script>
1212
<script src="../app/scripts/directives/marker.js"></script>
1313
<script src="../app/scripts/directives/shape.js"></script>
14+
<script src="../app/scripts/directives/map-lazy-load.js"></script>
1415
<script src="../app/scripts/services/geo_coder.js"></script>
1516
<script src="../app/scripts/services/navigator_geolocation.js"></script>
1617
<script src="../app/scripts/services/attr2_options.js"></script>
17-
<script src="../app/scripts/services/maps_js_loader.js"></script>
1818
<!-- endbuild -->
1919
</head>
2020

2121
<body>
22-
<div ng-if="mapJsLoaded">
23-
<map center="-25.363882,131.044922" zoom="4">
24-
<marker position="-25.363882,131.044922" title="Hello World!"></marker>
25-
</map>
26-
</div>
22+
<map center="-25.363882,131.044922" zoom="4">
23+
<marker position="-25.363882,131.044922" title="Hello World!"></marker>
24+
</map>
2725
</body>
2826
</html>

0 commit comments

Comments
 (0)