Example.vue

<gmap-info-box :visible="infoWinOpen" :marker="infoWinPos" :offset-y="infoWinOffset.y" :offset-x="infoWinOffset.x">
			<div>
        CONTENT FOR INFOBOX 
      </div>
</gmap-info-box>

GmapInfoBox.vue

<template>
	<div :class="this.$style['info-box']" v-show="visible">
		<slot/>
	</div>
</template>

<script>
import * as VueGoogleMaps from 'vue2-google-maps'

export default {
	name: 'GmapInfoBox',
	mixins: [VueGoogleMaps.MapElementMixin],
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		marker: {
			type: Object
		},
		offsetX: {
			type: Number,
			default: 0
		},
		offsetY: {
			type: Number,
			default: 0
		}
	},
	computed: {
		lat() {
			return (this.marker && (this.marker.lat || this.marker.latitude)) ? parseFloat(this.marker.lat || this.marker.latitude) : null
		},
		lng() {
			return (this.marker && (this.marker.lng || this.marker.longitude)) ? parseFloat(this.marker.lng || this.marker.longitude) : null
		},
		position() {
			const self = this
			return {
				lat() {
					return self.lat
				},
				lng() {
					return self.lng
				}
			}
		}
	},
	methods: {
		renderOverlay() {
			this.$mapPromise.then(() => this.$overlay.draw())
		},
		removeOverlay() {
			this.$overlay.setMap(null)
			this.$overlay = undefined
		}
	},
	watch: {
		visible() {
			this.renderOverlay()
		},
		marker() {
			this.renderOverlay()
		},
		offsetY() {
			this.renderOverlay()
		},
		offsetX() {
			this.renderOverlay()
		},
	},
	provide() {
		const self = this
		this.$mapPromise.then(map => {
			class Overlay extends google.maps.OverlayView {
				constructor(map) {
					super()
					this.setMap(map)
				}
				draw() {
					const div = self.$el
					const projection = this.getProjection()
					if (projection && div) {
						const posPixel = projection.fromLatLngToDivPixel(self.position)

						let x = posPixel.x - (div.offsetWidth / 2)
						let y = posPixel.y - div.offsetHeight

						div.style.left = (x + self.offsetX) + 'px'
						div.style.bottom = (-posPixel.y - self.offsetY) + 'px'
					}
				}
				onAdd() {
					const div = self.$el
					const panes = this.getPanes()
					div.style.position = 'absolute'
					panes.overlayLayer.appendChild(div)
					panes.overlayMouseTarget.appendChild(div)
				}
				onRemove() {
					self.$el.remove()
				}
			}
			this.$overlay = new Overlay(map)
		})
	},
	destroyed() {
		this.removeOverlay()
	}
}
</script>

<style module lang="scss">
.info-box {
	position: relative;
	//border: 1px solid $color-app-dark;
	@include space-responsive-padding-square-x(10);
	border-radius: responsive-size-width(10);
	background-color: #fff;
	background: $color-app-light;
	max-width: responsive-size-width(360);
	min-width: 200px;
	z-index: 50;
	cursor: auto;
	&:after,
	&:before {
		top: 100%;
		left: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}
	&:after {
		border-top-color: #ffffff;
		border-width: 10px;
		margin-left: -10px;
	}
}
</style>