|
40 | 40 | </google-maps-api>
|
41 | 41 | </template>
|
42 | 42 | <script>
|
43 |
| - Polymer({ |
44 |
| - is: 'google-map-directions', |
45 |
| - |
46 |
| - /** |
47 |
| - * Fired whenever the directions service returns a result. |
48 |
| - * |
49 |
| - * @event google-map-response |
50 |
| - * @param {{response: Object}} detail |
51 |
| - */ |
52 |
| - |
53 |
| - /** |
54 |
| - * Polymer properties for the google-map-directions custom element. |
55 |
| - */ |
56 |
| - properties: { |
57 |
| - /** |
58 |
| - * A Maps API key. To obtain an API key, see developers.google.com/maps/documentation/javascript/tutorial#api_key. |
59 |
| - */ |
60 |
| - apiKey: String, |
| 43 | + (function() { |
| 44 | + 'use strict'; |
61 | 45 |
|
62 |
| - /** |
63 |
| - * Overrides the origin the Maps API is loaded from. Defaults to `https://maps.googleapis.com`. |
64 |
| - */ |
65 |
| - mapsUrl: { |
66 |
| - type: String |
67 |
| - // Initial value set in google-maps-api. |
68 |
| - }, |
| 46 | + Polymer({ |
| 47 | + is: 'google-map-directions', |
69 | 48 |
|
70 | 49 | /**
|
71 |
| - * The Google map object. |
| 50 | + * Fired whenever the directions service returns a result. |
72 | 51 | *
|
73 |
| - * @type google.maps.Map |
| 52 | + * @event google-map-response |
| 53 | + * @param {{response: Object}} detail |
74 | 54 | */
|
75 |
| - map: { |
76 |
| - type: Object, |
77 |
| - observer: '_mapChanged' |
78 |
| - }, |
79 | 55 |
|
80 | 56 | /**
|
81 |
| - * Start address or latlng to get directions from. |
82 |
| - * |
83 |
| - * @type string|google.maps.LatLng |
| 57 | + * Polymer properties for the google-map-directions custom element. |
84 | 58 | */
|
85 |
| - startAddress: { |
86 |
| - type: String, |
87 |
| - value: null |
| 59 | + properties: { |
| 60 | + /** |
| 61 | + * A Maps API key. To obtain an API key, see developers.google.com/maps/documentation/javascript/tutorial#api_key. |
| 62 | + */ |
| 63 | + apiKey: String, |
| 64 | + |
| 65 | + /** |
| 66 | + * Overrides the origin the Maps API is loaded from. Defaults to `https://maps.googleapis.com`. |
| 67 | + */ |
| 68 | + mapsUrl: { |
| 69 | + type: String |
| 70 | + // Initial value set in google-maps-api. |
| 71 | + }, |
| 72 | + |
| 73 | + /** |
| 74 | + * The Google map object. |
| 75 | + * |
| 76 | + * @type google.maps.Map |
| 77 | + */ |
| 78 | + map: { |
| 79 | + type: Object, |
| 80 | + observer: '_mapChanged' |
| 81 | + }, |
| 82 | + |
| 83 | + /** |
| 84 | + * Start address or latlng to get directions from. |
| 85 | + * |
| 86 | + * @type string|google.maps.LatLng |
| 87 | + */ |
| 88 | + startAddress: { |
| 89 | + type: String, |
| 90 | + value: null |
| 91 | + }, |
| 92 | + |
| 93 | + /** |
| 94 | + * End address or latlng for directions to end. |
| 95 | + * |
| 96 | + * @type string|google.maps.LatLng |
| 97 | + */ |
| 98 | + endAddress: { |
| 99 | + type: String, |
| 100 | + value: null |
| 101 | + }, |
| 102 | + |
| 103 | + /** |
| 104 | + * Travel mode to use. One of 'DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT'. |
| 105 | + */ |
| 106 | + travelMode: { |
| 107 | + type: String, |
| 108 | + value: 'DRIVING' |
| 109 | + }, |
| 110 | + |
| 111 | + /** |
| 112 | + * Array of intermediate waypoints. Directions will be calculated |
| 113 | + * from the origin to the destination by way of each waypoint in this array. |
| 114 | + * The maximum allowed waypoints is 8, plus the origin, and destination. |
| 115 | + * Maps API for Business customers are allowed 23 waypoints, |
| 116 | + * plus the origin, and destination. |
| 117 | + * Waypoints are not supported for transit directions. Optional. |
| 118 | + * |
| 119 | + * @type Array<google.maps.DirectionsWaypoint> |
| 120 | + */ |
| 121 | + waypoints: { |
| 122 | + type: Array, |
| 123 | + value: function() { return []; } |
| 124 | + }, |
| 125 | + |
| 126 | + /** |
| 127 | + * The localized language to load the Maps API with. For more information |
| 128 | + * see https://developers.google.com/maps/documentation/javascript/basics#Language |
| 129 | + * |
| 130 | + * Note: the Maps API defaults to the preffered language setting of the browser. |
| 131 | + * Use this parameter to override that behavior. |
| 132 | + */ |
| 133 | + language: { |
| 134 | + type: String, |
| 135 | + value: null |
| 136 | + }, |
| 137 | + |
| 138 | + /** |
| 139 | + * Options for the display of results |
| 140 | + */ |
| 141 | + rendererOptions: { |
| 142 | + type: Object, |
| 143 | + value: function() { return {}; } |
| 144 | + }, |
| 145 | + |
| 146 | + /** |
| 147 | + * The response from the directions service. |
| 148 | + * |
| 149 | + */ |
| 150 | + response: { |
| 151 | + type: Object, |
| 152 | + observer: '_responseChanged', |
| 153 | + notify: true |
| 154 | + } |
88 | 155 | },
|
89 | 156 |
|
90 |
| - /** |
91 |
| - * End address or latlng for directions to end. |
92 |
| - * |
93 |
| - * @type string|google.maps.LatLng |
94 |
| - */ |
95 |
| - endAddress: { |
96 |
| - type: String, |
97 |
| - value: null |
98 |
| - }, |
| 157 | + observers: [ |
| 158 | + '_route(startAddress, endAddress, travelMode, waypoints.*)' |
| 159 | + ], |
99 | 160 |
|
100 |
| - /** |
101 |
| - * Travel mode to use. One of 'DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT'. |
102 |
| - */ |
103 |
| - travelMode: { |
104 |
| - type: String, |
105 |
| - value: 'DRIVING' |
| 161 | + _mapApiLoaded: function() { |
| 162 | + this._route(); |
106 | 163 | },
|
107 | 164 |
|
108 |
| - /** |
109 |
| - * Array of intermediate waypoints. Directions will be calculated |
110 |
| - * from the origin to the destination by way of each waypoint in this array. |
111 |
| - * The maximum allowed waypoints is 8, plus the origin, and destination. |
112 |
| - * Maps API for Business customers are allowed 23 waypoints, |
113 |
| - * plus the origin, and destination. |
114 |
| - * Waypoints are not supported for transit directions. Optional. |
115 |
| - * |
116 |
| - * @type Array<google.maps.DirectionsWaypoint> |
117 |
| - */ |
118 |
| - waypoints: { |
119 |
| - type: Array, |
120 |
| - value: function() { return []; } |
121 |
| - }, |
122 |
| - |
123 |
| - /** |
124 |
| - * The localized language to load the Maps API with. For more information |
125 |
| - * see https://developers.google.com/maps/documentation/javascript/basics#Language |
126 |
| - * |
127 |
| - * Note: the Maps API defaults to the preffered language setting of the browser. |
128 |
| - * Use this parameter to override that behavior. |
129 |
| - */ |
130 |
| - language: { |
131 |
| - type: String, |
132 |
| - value: null |
| 165 | + _responseChanged: function() { |
| 166 | + if (this.directionsRenderer && this.response) { |
| 167 | + this.directionsRenderer.setDirections(this.response); |
| 168 | + } |
133 | 169 | },
|
134 | 170 |
|
135 |
| - /** |
136 |
| - * Options for the display of results |
137 |
| - */ |
138 |
| - rendererOptions: { |
139 |
| - type: Object, |
140 |
| - value: function() { return {}; } |
| 171 | + _mapChanged: function() { |
| 172 | + if (this.map && this.map instanceof google.maps.Map) { |
| 173 | + if (!this.directionsRenderer) { |
| 174 | + this.directionsRenderer = new google.maps.DirectionsRenderer(this.rendererOptions); |
| 175 | + } |
| 176 | + this.directionsRenderer.setMap(this.map); |
| 177 | + this._responseChanged(); |
| 178 | + } else { |
| 179 | + // If there is no more map, remove the directionsRenderer from the map and delete it. |
| 180 | + if (this.directionsRenderer) { |
| 181 | + this.directionsRenderer.setMap(null); |
| 182 | + this.directionsRenderer = null; |
| 183 | + } |
| 184 | + } |
141 | 185 | },
|
142 | 186 |
|
143 |
| - /** |
144 |
| - * The response from the directions service. |
145 |
| - * |
146 |
| - */ |
147 |
| - response: { |
148 |
| - type: Object, |
149 |
| - observer: '_responseChanged', |
150 |
| - notify: true |
151 |
| - } |
152 |
| - }, |
153 |
| - |
154 |
| - observers: [ |
155 |
| - '_route(startAddress, endAddress, travelMode, waypoints.*)' |
156 |
| - ], |
157 |
| - |
158 |
| - _mapApiLoaded: function() { |
159 |
| - this._route(); |
160 |
| - }, |
161 |
| - |
162 |
| - _responseChanged: function() { |
163 |
| - if (this.directionsRenderer && this.response) { |
164 |
| - this.directionsRenderer.setDirections(this.response); |
165 |
| - } |
166 |
| - }, |
167 |
| - |
168 |
| - _mapChanged: function() { |
169 |
| - if (this.map && this.map instanceof google.maps.Map) { |
170 |
| - if (!this.directionsRenderer) { |
171 |
| - this.directionsRenderer = new google.maps.DirectionsRenderer(this.rendererOptions); |
| 187 | + _route: function() { |
| 188 | + // Abort attempts to _route if the API is not available yet or the |
| 189 | + // required attributes are blank. |
| 190 | + if (typeof google == 'undefined' || typeof google.maps == 'undefined' || |
| 191 | + !this.startAddress || !this.endAddress) { |
| 192 | + return; |
172 | 193 | }
|
173 |
| - this.directionsRenderer.setMap(this.map); |
174 |
| - this._responseChanged(); |
175 |
| - } else { |
176 |
| - // If there is no more map, remove the directionsRenderer from the map and delete it. |
177 |
| - if (this.directionsRenderer) { |
178 |
| - this.directionsRenderer.setMap(null); |
179 |
| - this.directionsRenderer = null; |
| 194 | + |
| 195 | + // Construct a directionsService if necessary. |
| 196 | + // Wait until here where the maps api has loaded and directions are actually needed. |
| 197 | + if (!this.directionsService) { |
| 198 | + this.directionsService = new google.maps.DirectionsService(); |
180 | 199 | }
|
181 |
| - } |
182 |
| - }, |
183 |
| - |
184 |
| - _route: function() { |
185 |
| - // Abort attempts to _route if the API is not available yet or the |
186 |
| - // required attributes are blank. |
187 |
| - if (typeof google == 'undefined' || typeof google.maps == 'undefined' || |
188 |
| - !this.startAddress || !this.endAddress) { |
189 |
| - return; |
190 |
| - } |
191 | 200 |
|
192 |
| - // Construct a directionsService if necessary. |
193 |
| - // Wait until here where the maps api has loaded and directions are actually needed. |
194 |
| - if (!this.directionsService) { |
195 |
| - this.directionsService = new google.maps.DirectionsService(); |
| 201 | + var request = { |
| 202 | + origin: this.startAddress, |
| 203 | + destination: this.endAddress, |
| 204 | + travelMode: this.travelMode, |
| 205 | + waypoints: this.waypoints |
| 206 | + }; |
| 207 | + this.directionsService.route(request, function(response, status) { |
| 208 | + if (status == google.maps.DirectionsStatus.OK) { |
| 209 | + this.response = response; |
| 210 | + this.fire('google-map-response', {response: response}); |
| 211 | + } |
| 212 | + }.bind(this)); |
196 | 213 | }
|
197 |
| - |
198 |
| - var request = { |
199 |
| - origin: this.startAddress, |
200 |
| - destination: this.endAddress, |
201 |
| - travelMode: this.travelMode, |
202 |
| - waypoints: this.waypoints |
203 |
| - }; |
204 |
| - this.directionsService.route(request, function(response, status) { |
205 |
| - if (status == google.maps.DirectionsStatus.OK) { |
206 |
| - this.response = response; |
207 |
| - this.fire('google-map-response', {response: response}); |
208 |
| - } |
209 |
| - }.bind(this)); |
210 |
| - } |
211 |
| - }); |
| 214 | + }); |
| 215 | + })(); |
212 | 216 | </script>
|
213 | 217 | </dom-module>
|
0 commit comments