WebCompDev / COMPONENTS

<!-- Copyright (c) 2015 Google Inc. All rights reserved. -->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../google-apis/google-maps-api.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="google-map-marker.html">
<!--
The `google-map` element renders a Google Map.

<b>Example</b>:

    <style>
      google-map {
        height: 600px;
      }
    </style>
    <google-map latitude="37.77493" longitude="-122.41942"></google-map>

<b>Example</b> - add markers to the map and ensure they're in view:

    <google-map latitude="37.77493" longitude="-122.41942" fit-to-markers>
      <google-map-marker latitude="37.779" longitude="-122.3892"
          draggable="true" title="Go Giants!"></google-map-marker>
      <google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
    </google-map>

<b>Example</b>:

    <google-map disable-default-ui zoom="15"></google-map>
    <script>
      var map = document.querySelector('google-map');
      map.latitude = 37.77493;
      map.longitude = -122.41942;
      map.addEventListener('google-map-ready', function(e) {
        alert('Map loaded!');
      });
    </script>

<b>Example</b> - with Google directions, using data-binding inside another Polymer element

    <google-map map="{{map}}" libraries="places"></google-map>
    <google-map-directions map="{{map}}"
        start-address="San Francisco" end-address="Mountain View">
    </google-map-directions>

@demo
-->

<dom-module id="google-map">

  <style>
    :host {
      position: relative;
      display: block;
      height: 100%;
    }

    #map {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

  </style>
  <template>
    <google-maps-api id="api"
      api-key="[[apiKey]]"
      client-id="[[clientId]]"
      version="[[version]]"
      libraries="[[libraries]]"
      signed-in="[[signedIn]]"
      language="[[language]]"
      on-api-load="_mapApiLoaded"></google-maps-api>

    <div id="map"></div>

    <content id="markers" select="google-map-marker"></content>

  </template>
</dom-module>

<script>

  Polymer({

    is: 'google-map',


    /**
     * Fired when the Maps API has fully loaded.
     * @event google-map-ready
     */
    /**
     * Fired when the when the user clicks on the map (but not when they click on a marker, infowindow, or
     * other object). Requires the clickEvents attribute to be true.
     * @event google-map-click
     * @param {google.maps.MouseEvent} event The mouse event.
     */
    /**
     * Fired when the user double-clicks on the map. Note that the google-map-click event will also fire,
     * right before this one. Requires the clickEvents attribute to be true.
     * @event google-map-dblclick
     * @param {google.maps.MouseEvent} event The mouse event.
     */
    /**
     * Fired repeatedly while the user drags the map. Requires the dragEvents attribute to be true.
     * @event google-map-drag
     */
    /**
     * Fired when the user stops dragging the map. Requires the dragEvents attribute to be true.
     * @event google-map-dragend
     */
    /**
     * Fired when the user starts dragging the map. Requires the dragEvents attribute to be true.
     * @event google-map-dragstart
     */
    /**
     * Fired whenever the user's mouse moves over the map container. Requires the mouseEvents attribute to
     * be true.
     * @event google-map-mousemove
     * @param {google.maps.MouseEvent} event The mouse event.
     */
    /**
     * Fired when the user's mouse exits the map container. Requires the mouseEvents attribute to be true.
     * @event google-map-mouseout
     * @param {google.maps.MouseEvent} event The mouse event.
     */
    /**
     * Fired when the user's mouse enters the map container. Requires the mouseEvents attribute to be true.
     * @event google-map-mouseover
     * @param {google.maps.MouseEvent} event The mouse event.
     */
    /**
     * Fired when the DOM `contextmenu` event is fired on the map container. Requires the clickEvents
     * attribute to be true.
     * @event google-map-rightclick
     * @param {google.maps.MouseEvent} event The mouse event.
     */
    properties: {
      /**
       * A Maps API key. To obtain an API key, see developers.google.com/maps/documentation/javascript/tutorial#api_key.
       */
      apiKey: String,

      /**
       * A Maps API for Business Client ID. To obtain a Maps API for Business Client ID, see developers.google.com/maps/documentation/business/.
       * If set, a Client ID will take precedence over an API Key.
       */
      clientId: String,

      /**
       * A latitude to center the map on.
       */
      latitude: {
        type: Number,
        value: 37.77493,
        notify: true,
        reflectToAttribute: true
      },

      /**
       * A Maps API object.
       */
      map: {
        type: Object,
        notify: true,
        value: null
      },

      /**
       * A comma separated list (e.g. "places,geometry") of libraries to load
       * with this map. Defaults to "". For more information see
       * https://developers.google.com/maps/documentation/javascript/libraries.
       */
      libraries: {
        type: String,
        value: ''
      },

      /**
       * A longitude to center the map on.
       */
      longitude: {
        type: Number,
        value: -122.41942,
        notify: true,
        reflectToAttribute: true
      },

      /**
       * A kml file to load.
       */
      kml: {
        type: String,
        value: null,
        observer: '_loadKml'
      },

      /**
       * A zoom level to set the map to.
       */
      zoom: {
        type: Number,
        value: 10,
        observer: '_zoomChanged'
      },

      /**
       * When set, prevents the map from tilting (when the zoom level and viewport supports it).
       */
      noAutoTilt: {
        type: Boolean,
        value: false
      },

      /**
       * Map type to display. One of 'roadmap', 'satellite', 'hybrid', 'terrain'.
       */
      mapType: {
        type: String,
        value: 'roadmap', // roadmap, satellite, hybrid, terrain,
        observer: '_mapTypeChanged'
      },

      /**
       * Version of the Google Maps API to use.
       */
      version: {
        type: String,
        value: '3.exp'
      },

      /**
       * If set, removes the map's default UI controls.
       */
      disableDefaultUi: {
        type: Boolean,
        value: false,
        observer: '_disableDefaultUiChanged'
      },

      /**
       * If set, the zoom level is set such that all markers (google-map-marker children) are brought into view.
       */
      fitToMarkers: {
        type: Boolean,
        value: false,
        observer: '_fitToMarkersChanged'
      },

      /**
       * If true, prevent the user from zooming the map interactively.
       */
      disableZoom: {
        type: Boolean,
        value: false,
        observer: '_disableZoomChanged'
      },

      /**
       * If set, custom styles can be applied to the map.
       * For style documentation see developers.google.com/maps/documentation/javascript/reference#MapTypeStyle
       */
      styles: {
        type: Object,
        value: function() { return {}; }
      },

      /**
       * A maximum zoom level which will be displayed on the map.
       */
      maxZoom: {
        type: Number,
        observer: '_maxZoomChanged'
      },

      /**
       * A minimum zoom level which will be displayed on the map.
       */
      minZoom: {
        type: Number,
        observer: '_minZoomChanged'
      },

      /**
       * If true, sign-in is enabled.
       * See https://developers.google.com/maps/documentation/javascript/signedin#enable_sign_in
       */
      signedIn: {
        type: Boolean,
        value: false
      },

      /**
       * The localized language to load the Maps API with. For more information
       * see https://developers.google.com/maps/documentation/javascript/basics#Language
       *
       * Note: the Maps API defaults to the preffered language setting of the browser.
       * Use this parameter to override that behavior.
       */
      language: {
        type: String
      },

      /**
       * When true, map *click events are automatically registered.
       */
      clickEvents: {
        type: Boolean,
        value: false,
        observer: '_clickEventsChanged'
      },

      /**
       * When true, map drag* events are automatically registered.
       */
      dragEvents: {
        type: Boolean,
        value: false,
        observer: '_dragEventsChanged'
      },

      /**
       * When true, map mouse* events are automatically registered.
       */
      mouseEvents: {
        type: Boolean,
        value: false,
        observer: '_mouseEventsChanged'
      },

      /**
       * Additional map options for google.maps.Map constructor.
       * Use to specify additional options we do not expose as
       * properties.
       * Ex: `<google-map additional-map-options='{"mapTypeId":"satellite"}'>`
       */
      additionalMapOptions: {
        type: Object,
        value: function() { return {}; }
      },

      /**
       * The markers on the map.
       */
      markers: {
        type: Array,
        value: function() { return []; },
        readOnly: true
      }

    },

    behaviors: [
      Polymer.IronResizableBehavior
    ],

    listeners: {
      'iron-resize': 'resize'
    },

    observers: [
      '_debounceUpdateCenter(latitude, longitude)'
    ],

    attached: function() {
      this._initGMap();
    },

    detached: function() {
      if (this._mutationObserver) {
        this._mutationObserver.disconnect();
        this._mutationObserver = null;
      }
    },

    _initGMap: function() {
      if (this.map) {
        return; // already initialized
      }
      if (this.$.api.libraryLoaded !== true) {
        return; // api not loaded
      }
      if (!this.isAttached) {
        return; // not attached
      }

      this.map = new google.maps.Map(this.$.map, this._getMapOptions());
      this._listeners = {};
      this._updateCenter();
      this._loadKml();
      this._updateMarkers();
      this._addMapListeners();
      this.fire('google-map-ready');
    },

    _mapApiLoaded: function() {
      this._initGMap();
    },

    _getMapOptions: function() {
      var mapOptions = {
        zoom: this.zoom,
        tilt: this.noAutoTilt ? 0 : 45,
        mapTypeId: this.mapType,
        disableDefaultUI: this.disableDefaultUi,
        disableDoubleClickZoom: this.disableZoom,
        scrollwheel: !this.disableZoom,
        styles: this.styles,
        maxZoom: Number(this.maxZoom),
        minZoom: Number(this.minZoom)
      };

      // Only override the default if set.
      // We use getAttribute here because the default value of this.draggable = false even when not set.
      if (this.getAttribute('draggable') != null) {
        mapOptions.draggable = this.draggable
      }
      for (var p in this.additionalMapOptions)
        mapOptions[p] = this.additionalMapOptions[p];

      return mapOptions;
    },

    // watch for future updates
    _observeMarkers: function() {
      // Watch for future updates.
      if (this._mutationObserver) {
        return;
      }
      this._mutationObserver = new MutationObserver( this._updateMarkers.bind(this));
      this._mutationObserver.observe(this, {
        childList: true
      });
    },

    _updateMarkers: function() {
      var newMarkers = Array.prototype.slice.call(
          Polymer.dom(this.$.markers).getDistributedNodes());

      // do not recompute if markers have not been added or removed
      if (newMarkers.length === this.markers.length) {
        var added = newMarkers.filter(function(m) {
          return this.markers && this.markers.indexOf(m) === -1;
        }.bind(this));
        if (added.length === 0) {
          // set up observer first time around
          if (!this._mutationObserver) {
            this._observeMarkers();
          }
          return;
        }
      }

      this._observeMarkers();

      this.markers = this._setMarkers(newMarkers);

      // Set the map on each marker and zoom viewport to ensure they're in view.
      if (this.markers.length && this.map) {
        for (var i = 0, m; m = this.markers[i]; ++i) {
          m.map = this.map;
        }
      }
      if (this.fitToMarkers) {
        this._fitToMarkersChanged();
      }
    },

    /**
     * Clears all markers from the map.
     *
     * @method clear
     */
    clear: function() {
      for (var i = 0, m; m = this.markers[i]; ++i) {
        m.marker.setMap(null);
      }
    },

    /**
     * Explicitly resizes the map, updating its center. This is useful if the
     * map does not show after you have unhidden it.
     *
     * @method resize
     */
    resize: function() {
      if (this.map) {

        // saves and restores latitude/longitude because resize can move the center
        var oldLatitude = this.latitude;
        var oldLongitude = this.longitude;
        google.maps.event.trigger(this.map, 'resize');
        this.latitude = oldLatitude;  // restore because resize can move our center
        this.longitude = oldLongitude;

        if (this.fitToMarkers) { // we might not have a center if we are doing fit-to-markers
          this._fitToMarkersChanged();
        }
      }
    },

    _loadKml: function() {
      if (this.kml) {
        var kmlfile = new google.maps.KmlLayer({
          url: this.kml,
          map: this.map
        });
      }
    },

    _debounceUpdateCenter: function() {
      this.debounce('updateCenter', this._updateCenter);
    },

    _updateCenter: function() {
      this.cancelDebouncer('updateCenter');

      if (this.map && this.latitude !== undefined && this.longitude !== undefined) {
        // allow for latitude and longitude to be String-typed, but still Number valued
        var lati = Number(this.latitude);
        if (isNaN(lati)) {
          throw new TypeError('latitude must be a number');
        }
        var longi = Number(this.longitude);
        if (isNaN(longi)) {
          throw new TypeError('longitude must be a number');
        }

        var newCenter = new google.maps.LatLng(lati, longi);
        var oldCenter = this.map.getCenter();

        if (!oldCenter) {
          // If the map does not have a center, set it right away.
          this.map.setCenter(newCenter);
        } else {
          // Using google.maps.LatLng returns corrected lat/lngs.
          oldCenter = new google.maps.LatLng(oldCenter.lat(), oldCenter.lng());

          // If the map currently has a center, slowly pan to the new one.
          if (!oldCenter.equals(newCenter)) {
            this.map.panTo(newCenter);
          }
        }
      }
    },

    _zoomChanged: function() {
      if (this.map) {
        this.map.setZoom(Number(this.zoom));
      }
    },

    _clickEventsChanged: function() {
      if (this.map) {
        if (this.clickEvents) {
          this._forwardEvent('click');
          this._forwardEvent('dblclick');
          this._forwardEvent('rightclick');
        } else {
          this._clearListener('click');
          this._clearListener('dblclick');
          this._clearListener('rightclick');
        }
      }
    },

    _dragEventsChanged: function() {
      if (this.map) {
        if (this.dragEvents) {
          this._forwardEvent('drag');
          this._forwardEvent('dragend');
          this._forwardEvent('dragstart');
        } else {
          this._clearListener('drag');
          this._clearListener('dragend');
          this._clearListener('dragstart');
        }
      }
    },

    _mouseEventsChanged: function() {
      if (this.map) {
        if (this.mouseEvents) {
          this._forwardEvent('mousemove');
          this._forwardEvent('mouseout');
          this._forwardEvent('mouseover');
        } else {
          this._clearListener('mousemove');
          this._clearListener('mouseout');
          this._clearListener('mouseover');
        }
      }
    },

    _maxZoomChanged: function() {
      if (this.map) {
        this.map.setOptions({maxZoom: Number(this.maxZoom)});
      }
    },

    _minZoomChanged: function() {
      if (this.map) {
        this.map.setOptions({minZoom: Number(this.minZoom)});
      }
    },

    _mapTypeChanged: function() {
      if (this.map) {
        this.map.setMapTypeId(this.mapType);
      }
    },

    _disableDefaultUiChanged: function() {
      if (!this.map) {
        return;
      }
      this.map.setOptions({disableDefaultUI: this.disableDefaultUi});
    },

    _disableZoomChanged: function() {
      if (!this.map) {
        return;
      }
      this.map.setOptions({
        disableDoubleClickZoom: this.disableZoom,
        scrollwheel: !this.disableZoom
      });
    },

    attributeChanged: function(attrName, oldVal, newVal) {
      if (!this.map) {
        return;
      }
      // Cannot use *Changed watchers for native properties.
      switch (attrName) {
        case 'draggable':
          this.map.setOptions({draggable: this.draggable});
          break;
      }
    },

    _fitToMarkersChanged: function() {
      // TODO(ericbidelman): respect user's zoom level.

      if (this.map && this.fitToMarkers) {
        var latLngBounds = new google.maps.LatLngBounds();
        for (var i = 0, m; m = this.markers[i]; ++i) {
          latLngBounds.extend(
              new google.maps.LatLng(m.latitude, m.longitude));
        }

        // For one marker, don't alter zoom, just center it.
        if (this.markers.length > 1) {
          this.map.fitBounds(latLngBounds);
        }

        this.map.setCenter(latLngBounds.getCenter());
      }
    },

    _addMapListeners: function() {
      google.maps.event.addListener(this.map, 'center_changed', function() {
        var center = this.map.getCenter();
        this.latitude = center.lat();
        this.longitude = center.lng();
      }.bind(this));

      google.maps.event.addListener(this.map, 'zoom_changed', function() {
        this.zoom = this.map.getZoom();
      }.bind(this));

      this._clickEventsChanged();
      this._dragEventsChanged();
      this._mouseEventsChanged();
    },

    _clearListener: function(name) {
      if (this._listeners[name]) {
        google.maps.event.removeListener(this._listeners[name]);
        this._listeners[name] = null;
      }
    },

    _forwardEvent: function(name) {
      this._listeners[name] = google.maps.event.addListener(this.map, name, function(event) {
        this.fire('google-map-' + name, event);
      }.bind(this));
    }

  });

</script>