google-map-custom-overlay.html

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

<link rel="import" href="./custom-marker.html">

<!--

@demo demo/index.html

The `google-map-custom-overlay` element represents a custom map marker. It is used as a
child of `google-map`.

<b>Example</b>:

    <google-map latitude="37.77493" longitude="-122.41942">
      <google-map-custom-overlay latitude="37.779" longitude="-122.3892"
          position="bottom">
            <div class="my-marker">
              Custom marker
            </div>
          </google-map-custom-overlay>
    </google-map>


-->

<dom-module id="google-map-custom-overlay">
    <style>
        :host {
            display: none;
        }
    </style>
    <template>
        <custom-marker id="marker" position="{{position}}">
            <content></content>
        </custom-marker>
    </template>
</dom-module>

<script>
	(function () {

		Polymer({

			is: 'google-map-custom-overlay',

			/**
			 * @event click
			 */

			properties: {
				/**
				 * A Google Maps overlay object.
				 * @type google.maps.Overlay
				 */
				overlay: {
					type: Object,
					notify: true
				},

				/**
				 * The Google map object.
				 * @type google.maps.Map
				 */
				map: {
					type: Object,
					observer: '_mapChanged'
				},

				/**
				 * When true, marker *click events are automatically registered.
				 */
				clickEvents: {
					type: Boolean,
					value: false
				},

				/**
				 * The marker's longitude coordinate.
				 */
				longitude: {
					type: Number,
					value: null,
					notify: true
				},

				/**
				 * The marker's latitude coordinate.
				 */
				latitude: {
					type: Number,
					value: null,
					notify: true
				},

				/**
				 * Position of the overlay
				 * @param {('center'|'bottom'|'top'|'left'|'right')}
				 */
				position: {
					type: String,
					value: 'center'
				}

			},

			observers: [
				'_updatePosition(latitude, longitude)',
				'_clickEventsChanged(clickEvents, overlay.div)'
			],

			_clearOverlay: function () {
				google.maps.event.clearInstanceListeners(this.overlay);
				this._listeners = {};
				this._domListeners = {};
				this.overlay.setMap(null);
			},

			detached: function () {
				if (this.overlay) {
					this._clearOverlay();
				}
				if (this._contentObserver)
					this._contentObserver.disconnect();
			},

			attached: function () {
				// If element is added back to DOM, put it back on the map.
				if (this.overlay) {
					this.overlay.setMap(this.map);
				}
			},

			_updatePosition: function () {
				if (this.overlay) {
					this._setupOverlay();
				}
			},

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

			_mapChanged: function () {
				// Marker will be rebuilt, so disconnect existing one from old map and listeners.
				if (this.overlay) {
					this.overlay.setMap(null);
					google.maps.event.clearInstanceListeners(this.overlay);
				}

				if (this.map && this.map instanceof google.maps.Map) {
					this._mapReady();
				}
			},

			_mapReady: function () {
				this._listeners = {};
				this._domListeners = {};
				this._setupOverlay();
				this._clickEventsChanged();
			},

			_setupOverlay: function () {
				if (this.overlay) {
					this._clearOverlay();
				}

				var elem = this;

				function CustomMarker(lat, lng, map, marker, args) {
					this.latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
					this.args = args;
					this.setMap(map);

					// FIXME: doesn't work with shadowDom
					this.marker = marker.cloneNode(true);
				}

				CustomMarker.prototype = new google.maps.OverlayView();

				CustomMarker.prototype.draw = function () {
					var self = this;
					var div = this.div;

					if (!div) {
						div = this.div = this.marker;

						if (typeof(self.args.marker_id) !== 'undefined') {
							div.dataset.marker_id = self.args.marker_id;
						}

						var panes = this.getPanes();
						panes.overlayMouseTarget.appendChild(div);

						elem.notifyPath('overlay.div');

					}

					var point = this.getProjection().fromLatLngToDivPixel(this.latlng);

					if (point) {
						div.style.left = point.x + 'px';
						div.style.top = point.y + 'px';
					}
				};

				CustomMarker.prototype.remove = function () {
					if (this.div) {
						this.div.parentNode.removeChild(this.div);
						this.div = null;
					}
				};

				CustomMarker.prototype.getPosition = function () {
					return this.latlng;
				};

				this.overlay = new CustomMarker(
					this.latitude,
					this.longitude,
					this.map,
					this.$.marker,
					{}
				);
			},


			_contentChanged: function () {
				if (this._contentObserver)
					this._contentObserver.disconnect();
				// Watch for future updates.
				this._contentObserver = new MutationObserver(this._contentChanged.bind(this));
				this._contentObserver.observe(this, {
					childList: true,
					subtree: true
				});

				var content = this.innerHTML.trim();
				if (content) {
					this.overlay.div.innerHTML = content;
				}
			},

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

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

			attributeChanged: function (attrName) {
				if (!this.overlay) {
					return;
				}

				// Cannot use *Changed watchers for native properties.
				switch (attrName) {
					case 'hidden':
						this.overlay.setVisible(!this.hidden);
						break;
				}
			}
		});

	})();
</script>