google-map-directions.html

<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../google-apis/google-apis.html">

<polymer-element name="google-map-directions" attributes="map startAddress endAddress travelMode response">
  <template>
    <style>
      :host {
        display: none;
      }
    </style>
    <google-maps-api on-api-load="{{mapApiLoaded}}"></google-maps-api>
  </template>
  <script>
    Polymer('google-map-directions', {

      /**
       * The Google map object.
       *
       * @property map
       * @type google.maps.Map
       * @default null
       */
      map: null,

      /**
       * Start address or latlng to get directions from.
       *
       * @property startAddress
       * @type string|google.maps.LatLng
       * @default null
       */
      startAddress: null,

      /**
       * End address or latlng for directions to end.
       *
       * @property endAddress
       * @type string|google.maps.LatLng
       * @default null
       */
      endAddress: null,

      /**
       * Travel mode to use.  One of 'DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT'.
       *
       * @attribute travelMode
       * @type string
       * @detault DRIVING
       */
      travelMode: 'DRIVING',

      observe: {
        startAddress: 'route',
        endAddress: 'route',
        travelMode: 'route'
      },
      mapApiLoaded: function() {
        this.route();
      },
      responseChanged: function() {
        if (this.directionsRenderer && this.response) {
          this.directionsRenderer.setDirections(this.response);
        }
      },
      mapChanged: function() {
        if (this.map && this.map instanceof google.maps.Map) {
          if (!this.directionsRenderer) {
            this.directionsRenderer = new google.maps.DirectionsRenderer();
          }
          this.directionsRenderer.setMap(this.map);
          this.responseChanged();
        } else {
          // If there is no more map, remove the directionsRenderer from the map and delete it.
          this.directionsRenderer.setMap(null);
          this.directionsRenderer = null;
        }
      },
      route: function() {
        // Abort attempts to route if the API is not available yet or the required attributes are blank.
        if (typeof google == 'undefined' || typeof google.maps == 'undefined' || !this.startAddress || !this.endAddress) {
          return;
        }

        // Construct a directionsService if necessary.
        // Wait until here where the maps api has loaded and directions are actually needed.
        if (!this.directionsService) {
          this.directionsService = new google.maps.DirectionsService();
        }

        var request = {
          origin: this.startAddress,
          destination: this.endAddress,
          travelMode: this.travelMode
        };
        this.directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            this.response = response;
            this.fire('google-map-response', {response: response});
          }
        }.bind(this));
      }
    });
  </script>
</polymer-element>