OLD | NEW |
(Empty) | |
| 1 <!-- Copyright (c) 2015 Google Inc. All rights reserved. --> |
| 2 |
| 3 <link rel="import" href="../polymer/polymer.html"> |
| 4 <link rel="import" href="../google-apis/google-maps-api.html"> |
| 5 |
| 6 <!-- |
| 7 Provides the Google Maps API Directions Service to provide directions |
| 8 between a `startAddress` and `endAddress`. |
| 9 |
| 10 See https://developers.google.com/maps/documentation/javascript/directions for m
ore |
| 11 information on the API. |
| 12 |
| 13 #### Example: |
| 14 |
| 15 <template is="dom-bind"> |
| 16 <google-map-directions map="{{map}}" |
| 17 start-address="San Francisco" |
| 18 end-address="Mountain View" |
| 19 travel-mode="TRANSIT"></google-map-directions> |
| 20 <google-map map="{{map}}" latitude="37.779" |
| 21 longitude="-122.3892"></google-map> |
| 22 </template> |
| 23 |
| 24 --> |
| 25 |
| 26 <dom-module id="google-map-directions"> |
| 27 <style> |
| 28 :host { |
| 29 display: none; |
| 30 } |
| 31 </style> |
| 32 <template> |
| 33 <google-maps-api |
| 34 api-key="[[apiKey]]" |
| 35 libraries="[[libraries]]" |
| 36 language="[[language]]" |
| 37 on-api-load="_mapApiLoaded"></google-maps-api> |
| 38 </template> |
| 39 </dom-module> |
| 40 |
| 41 <script> |
| 42 Polymer({ |
| 43 |
| 44 is: 'google-map-directions', |
| 45 |
| 46 /** |
| 47 Fired whenever the directions service returns a result. |
| 48 |
| 49 @event google-map-response |
| 50 @param {Object} detail |
| 51 @param {object} detail.response The directions service response. |
| 52 */ |
| 53 properties: { |
| 54 /** |
| 55 * A Maps API key. To obtain an API key, see developers.google.com/maps/do
cumentation/javascript/tutorial#api_key. |
| 56 */ |
| 57 apiKey: String, |
| 58 |
| 59 /** |
| 60 * The Google map object. |
| 61 * |
| 62 * @type google.maps.Map |
| 63 */ |
| 64 map: { |
| 65 type: Object, |
| 66 observer: '_mapChanged' |
| 67 }, |
| 68 /** |
| 69 * Start address or latlng to get directions from. |
| 70 * |
| 71 * @type string|google.maps.LatLng |
| 72 */ |
| 73 startAddress: { |
| 74 type: String, |
| 75 value: null |
| 76 }, |
| 77 |
| 78 /** |
| 79 * End address or latlng for directions to end. |
| 80 * |
| 81 * @type string|google.maps.LatLng |
| 82 */ |
| 83 endAddress: { |
| 84 type: String, |
| 85 value: null |
| 86 }, |
| 87 |
| 88 /** |
| 89 * Travel mode to use. One of 'DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT
'. |
| 90 */ |
| 91 travelMode: { |
| 92 type: String, |
| 93 value: 'DRIVING' |
| 94 }, |
| 95 |
| 96 /** |
| 97 * A comma separated list (e.g. "places,geometry") of libraries to load |
| 98 * with this map. Defaults to "places". For more information see |
| 99 * https://developers.google.com/maps/documentation/javascript/libraries. |
| 100 * |
| 101 * Note, this needs to be set to the same value as the one used on <google
-map>. |
| 102 * If you're overriding that element's `libraries` property, this one also |
| 103 * needs to be set to the Maps API loads the library code. |
| 104 */ |
| 105 libraries: { |
| 106 type: String, |
| 107 value: 'places' |
| 108 }, |
| 109 |
| 110 /** |
| 111 * The localized language to load the Maps API with. For more information |
| 112 * see https://developers.google.com/maps/documentation/javascript/basics#
Language |
| 113 * |
| 114 * Note: the Maps API defaults to the preffered language setting of the br
owser. |
| 115 * Use this parameter to override that behavior. |
| 116 */ |
| 117 language: { |
| 118 type: String, |
| 119 value: null |
| 120 }, |
| 121 |
| 122 /** |
| 123 * The response from the directions service. |
| 124 * |
| 125 */ |
| 126 response: { |
| 127 type: Object, |
| 128 observer: '_responseChanged', |
| 129 notify: true |
| 130 } |
| 131 }, |
| 132 |
| 133 observers: [ |
| 134 '_route(startAddress, endAddress, travelMode)' |
| 135 ], |
| 136 |
| 137 _mapApiLoaded: function() { |
| 138 this._route(); |
| 139 }, |
| 140 |
| 141 _responseChanged: function() { |
| 142 if (this.directionsRenderer && this.response) { |
| 143 this.directionsRenderer.setDirections(this.response); |
| 144 } |
| 145 }, |
| 146 |
| 147 _mapChanged: function() { |
| 148 if (this.map && this.map instanceof google.maps.Map) { |
| 149 if (!this.directionsRenderer) { |
| 150 this.directionsRenderer = new google.maps.DirectionsRenderer(); |
| 151 } |
| 152 this.directionsRenderer.setMap(this.map); |
| 153 this._responseChanged(); |
| 154 } else { |
| 155 // If there is no more map, remove the directionsRenderer from the map a
nd delete it. |
| 156 this.directionsRenderer.setMap(null); |
| 157 this.directionsRenderer = null; |
| 158 } |
| 159 }, |
| 160 |
| 161 _route: function() { |
| 162 // Abort attempts to _route if the API is not available yet or the |
| 163 // required attributes are blank. |
| 164 if (typeof google == 'undefined' || typeof google.maps == 'undefined' || |
| 165 !this.startAddress || !this.endAddress) { |
| 166 return; |
| 167 } |
| 168 |
| 169 // Construct a directionsService if necessary. |
| 170 // Wait until here where the maps api has loaded and directions are actual
ly needed. |
| 171 if (!this.directionsService) { |
| 172 this.directionsService = new google.maps.DirectionsService(); |
| 173 } |
| 174 |
| 175 var request = { |
| 176 origin: this.startAddress, |
| 177 destination: this.endAddress, |
| 178 travelMode: this.travelMode |
| 179 }; |
| 180 this.directionsService.route(request, function(response, status) { |
| 181 if (status == google.maps.DirectionsStatus.OK) { |
| 182 this.response = response; |
| 183 this.fire('google-map-response', {response: response}); |
| 184 } |
| 185 }.bind(this)); |
| 186 } |
| 187 }); |
| 188 </script> |
OLD | NEW |