google-map-overlayview-marker-behavior.html

<link rel="import" href="google-map-overlayview-behavior.html">

<script>
	/**
	 * Use `GoogleMapOverlayViewMarkerBehavior` to implement elements that should be displayed as `Marker` on a `google-map` using an overlayview
	 * Users should either override the `_update` if they need to customize the positioning.
	 * @polymer
     * @mixinFunction
	 */
	GoogleMapOverlayViewMarkerBehavior = function (superClass) {
		return class extends GoogleMapOverlayViewBehavior(superClass) {
			static get properties() {
				return {
					/**
					* The position of the marker on the map
					*/
					position: {
						type: Object,
						value: null
					},

					/**
					* The size of the marker
					*/
					size: {
						type: Number,
						value: 25,
					},

					/**
					* Set to true if the marker should be draggable
					*/
					isDraggable: {
						type: Boolean,
						value: false
					},
				}
			}
			ready() {
				super.ready();
				this.style.position = 'absolute';
			}

			/**
			* Returns the position of the marker
			*/
			getPosition() {
				return this.position;
			}

			/**
			* Returns whether marker is draggable.
			*/
			getDraggable() {
				return this.isDraggable;
			}

			/**
			* Returns the map instance.
			*/
			getMap() {
				if (this.overlay) {
					return this.overlay.getMap();
				}
				return null;
			}
			/**
			* Sets the map instance
			*/
			setMap(map) {
				if (this.overlay && this.overlay instanceof google.maps.OverlayView) {
					this.overlay.setMap(map);
				}
			}

			/**
			* Draw callback forwarded to the function `update`.
			*/
			draw() {
				this.update(this.position, this.size);
			}
			/**
			* Override this function to implement custom positioning.
			* By default will `left` and `top` CSS settings are used to position the element.
			*/
			update(position, size) {
				var projection = this.overlay.getProjection();
				var mapPos = projection.fromLatLngToDivPixel(position);
				this.style.left = (mapPos.x - size / 2) + 'px';
				this.style.top = (mapPos.y - size / 2) + 'px';
			}
		}
	}
</script>