diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..e69de29
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..7a8cbaf
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,24 @@
+{
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": "standard",
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "rules": {
+    "comma-dangle": 0
+  },
+  "globals": {
+    "google": true
+  },
+  "plugins": [
+    "html"
+  ],
+  "settings": {
+    "html/html-extensions": [".html", ".vue"]
+  }
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e83ca96
--- /dev/null
+++ b/README.md
@@ -0,0 +1,44 @@
+# Google maps Components for Vue.js 3
+
+Set of mostly used Google Maps components for Vue.js.
+
+#### Why this library exists?
+We heavily use Google Maps in our projects, so I wanted to have a well maintained Google Maps library.
+
+## Documentation
+Checkout https://vue-map.netlify.app for a detailed documentation
+
+## Installation
+You can install it using npm
+```
+npm install -S @fawmi/vue-google-maps
+```
+
+## Basic usage
+You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).
+
+##Configure Vue to use the Components
+
+In your `main.js` or inside a Nuxt plugin:
+
+```js
+import { createApp } from 'vue'
+import * as VueGoogleMaps from '@fawmi/vue-google-maps'
+
+const app = createApp(App);
+app.use(VueGoogleMaps, {
+    load: {
+        key: 'YOUR_API_KEY_COMES_HERE',
+    },
+}).mount('#app')
+
+```
+## Use it anywhere in your components
+
+```vue
+<template>
+  <GmapMap
+      :center="{lat: 51.093048, lng: 6.842120}"
+      :zoom="7"
+      map-type-id="terrain"
+  
\ No newline at end of file
diff --git a/build-copy.js b/build-copy.js
new file mode 100644
index 0000000..69321d0
--- /dev/null
+++ b/build-copy.js
@@ -0,0 +1,8 @@
+/* copies the components to the dist directory */
+require('shelljs/global')
+
+cp('src/components/infoWindow.vue', 'dist/components/')
+cp('src/components/map.vue', 'dist/components/')
+cp('src/components/placeInput.vue', 'dist/components/')
+cp('src/components/autocomplete.vue', 'dist/components/')
+cp('src/components/streetViewPanorama.vue', 'dist/components/')
diff --git a/src/.babelrc b/src/.babelrc
new file mode 100644
index 0000000..856b761
--- /dev/null
+++ b/src/.babelrc
@@ -0,0 +1,20 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "targets": {
+          "browsers": [
+            "last 2 versions",
+            "safari >= 7"
+          ]
+        }
+      }
+    ]
+  ],
+  "plugins": [
+    "transform-object-rest-spread",
+    "transform-inline-environment-variables",
+    "minify-dead-code-elimination"
+  ]
+}
diff --git a/src/.main.js.swx b/src/.main.js.swx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/autocomplete.vue b/src/components/autocomplete.vue
new file mode 100644
index 0000000..2742ad6
--- /dev/null
+++ b/src/components/autocomplete.vue
@@ -0,0 +1,11 @@
+<template>
+  <input
+    ref="input"
+    v-bind="$attrs"
+    v-on="$attrs"
+    />
+</template>
+
+<script>
+export default (function (x) { return x.default || x })(require('./autocompleteImpl.js'))
+</script>
diff --git a/src/components/autocompleteImpl.js b/src/components/autocompleteImpl.js
new file mode 100644
index 0000000..e97d63a
--- /dev/null
+++ b/src/components/autocompleteImpl.js
@@ -0,0 +1,71 @@
+import {bindProps, getPropsValues} from '../utils/bindProps.js'
+import downArrowSimulator from '../utils/simulateArrowDown.js'
+import {mappedPropsToVueProps} from './mapElementFactory'
+
+const mappedProps = {
+  bounds: {
+    type: Object
+  },
+  componentRestrictions: {
+    type: Object,
+    // Do not bind -- must check for undefined
+    // in the property
+    noBind: true,
+  },
+  types: {
+    type: Array,
+    default: function () {
+      return []
+    }
+  },
+}
+
+const props = {
+  selectFirstOnEnter: {
+    required: false,
+    type: Boolean,
+    default: false
+  },
+  options: {
+    type: Object
+  }
+}
+
+export default {
+  mounted () {
+    this.$gmapApiPromiseLazy().then(() => {
+      if (this.selectFirstOnEnter) {
+        downArrowSimulator(this.$refs.input)
+      }
+
+      if (typeof (google.maps.places.Autocomplete) !== 'function') {
+        throw new Error('google.maps.places.Autocomplete is undefined. Did you add \'places\' to libraries when loading Google Maps?')
+      }
+
+      /* eslint-disable no-unused-vars */
+      const finalOptions = {
+        ...getPropsValues(this, mappedProps),
+        ...this.options
+      }
+
+      this.$autocomplete = new google.maps.places.Autocomplete(this.$refs.input, finalOptions)
+      bindProps(this, this.$autocomplete, mappedProps)
+
+      this.$watch('componentRestrictions', v => {
+        if (v !== undefined) {
+          this.$autocomplete.setComponentRestrictions(v)
+        }
+      })
+
+      // Not using `bindEvents` because we also want
+      // to return the result of `getPlace()`
+      this.$autocomplete.addListener('place_changed', () => {
+        this.$emit('place_changed', this.$autocomplete.getPlace())
+      })
+    })
+  },
+  props: {
+    ...mappedPropsToVueProps(mappedProps),
+    ...props
+  }
+}
diff --git a/src/components/circle.js b/src/components/circle.js
new file mode 100644
index 0000000..180452a
--- /dev/null
+++ b/src/components/circle.js
@@ -0,0 +1,46 @@
+import mapElementFactory from './mapElementFactory'
+
+const props = {
+  center: {
+    type: Object,
+    twoWay: true,
+    required: true
+  },
+  radius: {
+    type: Number,
+    twoWay: true
+  },
+  draggable: {
+    type: Boolean,
+    default: false,
+  },
+  editable: {
+    type: Boolean,
+    default: false,
+  },
+  options: {
+    type: Object,
+    twoWay: false
+  }
+}
+
+const events = [
+  'click',
+  'dblclick',
+  'drag',
+  'dragend',
+  'dragstart',
+  'mousedown',
+  'mousemove',
+  'mouseout',
+  'mouseover',
+  'mouseup',
+  'rightclick'
+]
+
+export default mapElementFactory({
+  mappedProps: props,
+  name: 'circle',
+  ctr: () => google.maps.Circle,
+  events,
+})
diff --git a/src/components/cluster.vue b/src/components/cluster.vue
new file mode 100644
index 0000000..bf9455d
--- /dev/null
+++ b/src/components/cluster.vue
@@ -0,0 +1,114 @@
+<template>
+  <div><slot></slot></div>
+</template>
+<script>
+import MarkerClusterer from 'marker-clusterer-plus'
+import mapElementFactory from './mapElementFactory.js'
+const props = {
+  maxZoom: {
+    type: Number,
+    twoWay: false
+  },
+  batchSizeIE: {
+    type: Number,
+    twoWay: false
+  },
+  calculator: {
+    type: Function,
+    twoWay: false
+  },
+  enableRetinaIcons: {
+    type: Boolean,
+    twoWay: false
+  },
+  gridSize: {
+    type: Number,
+    twoWay: false
+  },
+  ignoreHidden: {
+    type: Boolean,
+    twoWay: false
+  },
+  imageExtension: {
+    type: String,
+    twoWay: false
+  },
+  imagePath: {
+    type: String,
+    twoWay: false
+  },
+  imageSizes: {
+    type: Array,
+    twoWay: false
+  },
+  minimumClusterSize: {
+    type: Number,
+    twoWay: false
+  },
+  styles: {
+    type: Array,
+    twoWay: false
+  },
+  zoomOnClick: {
+    type: Boolean,
+    twoWay: false
+  }
+}
+
+const events = [
+  'click',
+  'rightclick',
+  'dblclick',
+  'drag',
+  'dragstart',
+  'dragend',
+  'mouseup',
+  'mousedown',
+  'mouseover',
+  'mouseout'
+]
+
+export default mapElementFactory({
+  mappedProps: props,
+  events,
+  name: 'cluster',
+  ctr: () => {
+    if (typeof MarkerClusterer === 'undefined') {
+      /* eslint-disable no-console */
+      console.error('MarkerClusterer is not installed! require() it or include it from https://cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer.js')
+      throw new Error('MarkerClusterer is not installed! require() it or include it from https://cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer.js')
+    }
+    return MarkerClusterer
+  },
+  ctrArgs: ({map, ...otherOptions}) => [map, [], otherOptions],
+  afterCreate (inst) {
+    const reinsertMarkers = () => {
+      const oldMarkers = inst.getMarkers()
+      inst.clearMarkers()
+      inst.addMarkers(oldMarkers)
+    }
+    for (let prop in props) {
+      if (props[prop].twoWay) {
+        this.$on(prop.toLowerCase() + '_changed', reinsertMarkers)
+      }
+    }
+  },
+  updated () {
+    if (this.$clusterObject) {
+      this.$clusterObject.repaint()
+    }
+  },
+  beforeUnmount () {
+    /* Performance optimization when destroying a large number of markers */
+    this.$children.forEach(marker => {
+      if (marker.$clusterObject === this.$clusterObject) {
+        marker.$clusterObject = null
+      }
+    })
+
+    if (this.$clusterObject) {
+      this.$clusterObject.clearMarkers()
+    }
+  },
+})
+</script>
diff --git a/src/components/infoWindow.vue b/src/components/infoWindow.vue
new file mode 100644
index 0000000..129d5c0
--- /dev/null
+++ b/src/components/infoWindow.vue
@@ -0,0 +1,14 @@
+/* vim: set softtabstop=2 shiftwidth=2 expandtab : */
+
+<template>
+  <div>
+    <div ref="flyaway"> <!-- so named because it will fly away to another component -->
+      <slot>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default (function (x) { return x.default || x })(require('./infoWindowImpl.js'))
+</script>
diff --git a/src/components/infoWindowImpl.js b/src/components/infoWindowImpl.js
new file mode 100644
index 0000000..f5d6e43
--- /dev/null
+++ b/src/components/infoWindowImpl.js
@@ -0,0 +1,82 @@
+import mapElementFactory from './mapElementFactory.js'
+
+const props = {
+  options: {
+    type: Object,
+    required: false,
+    default () {
+      return {}
+    }
+  },
+  position: {
+    type: Object,
+    twoWay: true,
+  },
+  zIndex: {
+    type: Number,
+    twoWay: true,
+  }
+}
+
+const events = [
+  'domready',
+  'closeclick',
+  'content_changed',
+]
+
+export default mapElementFactory({
+  mappedProps: props,
+  events,
+  name: 'infoWindow',
+  ctr: () => google.maps.InfoWindow,
+  props: {
+    opened: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  inject: {
+    '$markerPromise': {
+      default: null,
+    }
+  },
+
+  mounted () {
+    const el = this.$refs.flyaway
+    el.parentNode.removeChild(el)
+  },
+
+  beforeCreate (options) {
+    options.content = this.$refs.flyaway
+
+    if (this.$markerPromise) {
+      delete options.position
+      return this.$markerPromise.then(mo => {
+        this.$markerObject = mo
+        return mo
+      })
+    }
+  },
+
+  methods: {
+    _openInfoWindow () {
+      if (this.opened) {
+        if (this.$markerObject !== null) {
+          this.$infoWindowObject.open(this.$map, this.$markerObject)
+        } else {
+          this.$infoWindowObject.open(this.$map)
+        }
+      } else {
+        this.$infoWindowObject.close()
+      }
+    },
+  },
+
+  afterCreate () {
+    this._openInfoWindow()
+    this.$watch('opened', () => {
+      this._openInfoWindow()
+    })
+  }
+})
diff --git a/src/components/map.vue b/src/components/map.vue
new file mode 100644
index 0000000..ef7faba
--- /dev/null
+++ b/src/components/map.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="vue-map-container">
+    <div ref="vue-map" class="vue-map"></div>
+    <div class="vue-map-hidden">
+      <slot></slot>
+    </div>
+    <slot name="visible"></slot>
+  </div>
+</template>
+
+<script>
+export default (function (x) { return x.default || x })(require('./mapImpl.js'))
+</script>
+
+<style lang="css">
+.vue-map-container {
+  position: relative;
+}
+
+.vue-map-container .vue-map {
+  left: 0; right: 0; top: 0; bottom: 0;
+  position: absolute;
+}
+.vue-map-hidden {
+  display: none;
+}
+</style>
diff --git a/src/components/mapElementFactory.js b/src/components/mapElementFactory.js
new file mode 100644
index 0000000..941e66a
--- /dev/null
+++ b/src/components/mapElementFactory.js
@@ -0,0 +1,149 @@
+import bindEvents from '../utils/bindEvents.js'
+import {bindProps, getPropsValues} from '../utils/bindProps.js'
+import MapElementMixin from './mapElementMixin'
+
+/**
+ *
+ * @param {Object} options
+ * @param {Object} options.mappedProps - Definitions of props
+ * @param {Object} options.mappedProps.PROP.type - Value type
+ * @param {Boolean} options.mappedProps.PROP.twoWay
+ *  - Whether the prop has a corresponding PROP_changed
+ *   event
+ * @param {Boolean} options.mappedProps.PROP.noBind
+ *  - If true, do not apply the default bindProps / bindEvents.
+ * However it will still be added to the list of component props
+ * @param {Object} options.props - Regular Vue-style props.
+ *  Note: must be in the Object form because it will be
+ *  merged with the `mappedProps`
+ *
+ * @param {Object} options.events - Google Maps API events
+ *  that are not bound to a corresponding prop
+ * @param {String} options.name - e.g. `polyline`
+ * @param {=> String} options.ctr - constructor, e.g.
+ *  `google.maps.Polyline`. However, since this is not
+ *  generally available during library load, this becomes
+ *  a function instead, e.g. () => google.maps.Polyline
+ *  which will be called only after the API has been loaded
+ * @param {(MappedProps, OtherVueProps) => Array} options.ctrArgs -
+ *   If the constructor in `ctr` needs to be called with
+ *   arguments other than a single `options` object, e.g. for
+ *   GroundOverlay, we call `new GroundOverlay(url, bounds, options)`
+ *   then pass in a function that returns the argument list as an array
+ *
+ * Otherwise, the constructor will be called with an `options` object,
+ *   with property and values merged from:
+ *
+ *   1. the `options` property, if any
+ *   2. a `map` property with the Google Maps
+ *   3. all the properties passed to the component in `mappedProps`
+ * @param {Object => Any} options.beforeCreate -
+ *  Hook to modify the options passed to the initializer
+ * @param {(options.ctr, Object) => Any} options.afterCreate -
+ *  Hook called when
+ *
+ */
+export default function (options) {
+  const {
+    mappedProps,
+    name,
+    ctr,
+    ctrArgs,
+    events,
+    beforeCreate,
+    afterCreate,
+    props,
+    ...rest
+  } = options
+
+  const promiseName = `$${name}Promise`
+  const instanceName = `$${name}Object`
+
+  assert(!(rest.props instanceof Array), '`props` should be an object, not Array')
+
+  return {
+    ...(typeof GENERATE_DOC !== 'undefined' ? {$vgmOptions: options} : {}),
+    mixins: [MapElementMixin],
+    props: {
+      ...props,
+      ...mappedPropsToVueProps(mappedProps),
+    },
+    render () { return '' },
+    provide () {
+      const promise = this.$mapPromise.then((map) => {
+        // Infowindow needs this to be immediately available
+        this.$map = map
+
+        // Initialize the maps with the given options
+        const options = {
+          ...this.options,
+          map,
+          ...getPropsValues(this, mappedProps)
+        }
+        delete options.options // delete the extra options
+
+        if (beforeCreate) {
+          const result = beforeCreate.bind(this)(options)
+
+          if (result instanceof Promise) {
+            return result.then(() => ({options}))
+          }
+        }
+        return {options}
+      }).then(({options}) => {
+        const ConstructorObject = ctr()
+        // https://stackoverflow.com/questions/1606797/use-of-apply-with-new-operator-is-this-possible
+        this[instanceName] = ctrArgs
+          ? new (Function.prototype.bind.call(
+            ConstructorObject,
+            null,
+            ...ctrArgs(options, getPropsValues(this, props || {}))
+          ))()
+          : new ConstructorObject(options)
+
+        bindProps(this, this[instanceName], mappedProps)
+        bindEvents(this, this[instanceName], events)
+
+        if (afterCreate) {
+          afterCreate.bind(this)(this[instanceName])
+        }
+        return this[instanceName]
+      })
+      this[promiseName] = promise
+      return {[promiseName]: promise}
+    },
+    unmounted () {
+      // Note: not all Google Maps components support maps
+      if (this[instanceName] && this[instanceName].setMap) {
+        this[instanceName].setMap(null)
+      }
+    },
+    ...rest
+  }
+}
+
+function assert (v, message) {
+  if (!v) throw new Error(message)
+}
+
+/**
+ * Strips out the extraneous properties we have in our
+ * props definitions
+ * @param {Object} props
+ */
+export function mappedPropsToVueProps (mappedProps) {
+  return Object.entries(mappedProps)
+    .map(([key, prop]) => {
+      const value = {}
+
+      if ('type' in prop) value.type = prop.type
+      if ('default' in prop) value.default = prop.default
+      if ('required' in prop) value.required = prop.required
+
+      return [key, value]
+    })
+    .reduce((acc, [key, val]) => {
+      acc[key] = val
+      return acc
+    }, {})
+}
diff --git a/src/components/mapElementMixin.js b/src/components/mapElementMixin.js
new file mode 100644
index 0000000..83e893c
--- /dev/null
+++ b/src/components/mapElementMixin.js
@@ -0,0 +1,31 @@
+/**
+ * @class MapElementMixin
+ *
+ * Extends components to include the following fields:
+ *
+ * @property $map        The Google map (valid only after the promise returns)
+ *
+ *
+ * */
+export default {
+  inject: {
+    '$mapPromise': { default: 'abcdef' }
+  },
+
+  provide () {
+    // Note: although this mixin is not "providing" anything,
+    // components' expect the `$map` property to be present on the component.
+    // In order for that to happen, this mixin must intercept the $mapPromise
+    // .then(() =>) first before its component does so.
+    //
+    // Since a provide() on a mixin is executed before a provide() on the
+    // component, putting this code in provide() ensures that the $map is
+    // already set by the time the
+    // component's provide() is called.
+    this.$mapPromise.then((map) => {
+      this.$map = map
+    })
+
+    return {}
+  },
+}
diff --git a/src/components/mapImpl.js b/src/components/mapImpl.js
new file mode 100644
index 0000000..6636f5c
--- /dev/null
+++ b/src/components/mapImpl.js
@@ -0,0 +1,184 @@
+import bindEvents from '../utils/bindEvents.js'
+import {bindProps, getPropsValues} from '../utils/bindProps.js'
+import mountableMixin from '../utils/mountableMixin.js'
+
+import TwoWayBindingWrapper from '../utils/TwoWayBindingWrapper.js'
+import WatchPrimitiveProperties from '../utils/WatchPrimitiveProperties.js'
+import { mappedPropsToVueProps } from './mapElementFactory.js'
+
+const props = {
+  center: {
+    required: true,
+    twoWay: true,
+    type: Object,
+    noBind: true,
+  },
+  zoom: {
+    required: false,
+    twoWay: true,
+    type: Number,
+    noBind: true,
+  },
+  heading: {
+    type: Number,
+    twoWay: true,
+  },
+  mapTypeId: {
+    twoWay: true,
+    type: String
+  },
+  tilt: {
+    twoWay: true,
+    type: Number,
+  },
+  options: {
+    type: Object,
+    default () { return {} }
+  }
+}
+
+const events = [
+  'bounds_changed',
+  'click',
+  'dblclick',
+  'drag',
+  'dragend',
+  'dragstart',
+  'idle',
+  'mousemove',
+  'mouseout',
+  'mouseover',
+  'resize',
+  'rightclick',
+  'tilesloaded',
+]
+
+// Plain Google Maps methods exposed here for convenience
+const linkedMethods = [
+  'panBy',
+  'panTo',
+  'panToBounds',
+  'fitBounds'
+].reduce((all, methodName) => {
+  all[methodName] = function () {
+    if (this.$mapObject) { this.$mapObject[methodName].apply(this.$mapObject, arguments) }
+  }
+  return all
+}, {})
+
+// Other convenience methods exposed by Vue Google Maps
+const customMethods = {
+  resize () {
+    if (this.$mapObject) {
+      google.maps.event.trigger(this.$mapObject, 'resize')
+    }
+  },
+  resizePreserveCenter () {
+    if (!this.$mapObject) { return }
+
+    const oldCenter = this.$mapObject.getCenter()
+    google.maps.event.trigger(this.$mapObject, 'resize')
+    this.$mapObject.setCenter(oldCenter)
+  },
+
+  /// Override mountableMixin::_resizeCallback
+  /// because resizePreserveCenter is usually the
+  /// expected behaviour
+  _resizeCallback () {
+    this.resizePreserveCenter()
+  }
+}
+
+export default {
+  mixins: [mountableMixin],
+  props: mappedPropsToVueProps(props),
+
+  provide () {
+    this.$mapPromise = new Promise((resolve, reject) => {
+      this.$mapPromiseDeferred = { resolve, reject }
+    })
+    return {
+      '$mapPromise': this.$mapPromise
+    }
+  },
+  emits: ['center_changed', 'zoom_changed', 'bounds_changed'],
+  computed: {
+    finalLat () {
+      return this.center &&
+        (typeof this.center.lat === 'function') ? this.center.lat() : this.center.lat
+    },
+    finalLng () {
+      return this.center &&
+        (typeof this.center.lng === 'function') ? this.center.lng() : this.center.lng
+    },
+    finalLatLng () {
+      return {lat: this.finalLat, lng: this.finalLng}
+    }
+  },
+
+  watch: {
+    zoom (zoom) {
+      if (this.$mapObject) {
+        this.$mapObject.setZoom(zoom)
+      }
+    }
+  },
+
+  mounted () {
+    return this.$gmapApiPromiseLazy().then(() => {
+      // getting the DOM element where to create the map
+      const element = this.$refs['vue-map']
+
+      // creating the map
+      const options = {
+        ...this.options,
+        ...getPropsValues(this, props),
+      }
+      delete options.options
+      this.$mapObject = new google.maps.Map(element, options)
+
+      // binding properties (two and one way)
+      bindProps(this, this.$mapObject, props)
+      // binding events
+      bindEvents(this, this.$mapObject, events)
+
+      // manually trigger center and zoom
+      TwoWayBindingWrapper((increment, decrement, shouldUpdate) => {
+        this.$mapObject.addListener('center_changed', () => {
+          if (shouldUpdate()) {
+            this.$emit('center_changed', this.$mapObject.getCenter())
+          }
+          decrement()
+        })
+
+        const updateCenter = () => {
+          increment()
+          this.$mapObject.setCenter(this.finalLatLng)
+        }
+
+        WatchPrimitiveProperties(
+          this,
+          ['finalLat', 'finalLng'],
+          updateCenter
+        )
+      })
+      this.$mapObject.addListener('zoom_changed', () => {
+        this.$emit('zoom_changed', this.$mapObject.getZoom())
+      })
+      this.$mapObject.addListener('bounds_changed', () => {
+        this.$emit('bounds_changed', this.$mapObject.getBounds())
+      })
+
+      this.$mapPromiseDeferred.resolve(this.$mapObject)
+
+      return this.$mapObject
+    })
+    .catch((error) => {
+      throw error
+    })
+  },
+  methods: {
+    ...customMethods,
+    ...linkedMethods,
+  },
+}
diff --git a/src/components/marker.js b/src/components/marker.js
new file mode 100644
index 0000000..0bfe07c
--- /dev/null
+++ b/src/components/marker.js
@@ -0,0 +1,139 @@
+import mapElementFactory from './mapElementFactory.js'
+
+const props = {
+  animation: {
+    twoWay: true,
+    type: Number
+  },
+  attribution: {
+    type: Object,
+  },
+  clickable: {
+    type: Boolean,
+    twoWay: true,
+    default: true
+  },
+  cursor: {
+    type: String,
+    twoWay: true
+  },
+  draggable: {
+    type: Boolean,
+    twoWay: true,
+    default: false
+  },
+  icon: {
+    twoWay: true
+  },
+  label: {
+  },
+  opacity: {
+    type: Number,
+    default: 1
+  },
+  options: {
+    type: Object
+  },
+  place: {
+    type: Object
+  },
+  position: {
+    type: Object,
+    twoWay: true,
+  },
+  shape: {
+    type: Object,
+    twoWay: true
+  },
+  title: {
+    type: String,
+    twoWay: true
+  },
+  zIndex: {
+    type: Number,
+    twoWay: true
+  },
+  visible: {
+    twoWay: true,
+    default: true,
+  },
+}
+
+const events = [
+  'click',
+  'rightclick',
+  'dblclick',
+  'drag',
+  'dragstart',
+  'dragend',
+  'mouseup',
+  'mousedown',
+  'mouseover',
+  'mouseout'
+]
+
+/**
+ * @class Marker
+ *
+ * Marker class with extra support for
+ *
+ * - Embedded info windows
+ * - Clustered markers
+ *
+ * Support for clustered markers is for backward-compatability
+ * reasons. Otherwise we should use a cluster-marker mixin or
+ * subclass.
+ */
+export default mapElementFactory({
+  mappedProps: props,
+  events,
+  name: 'marker',
+  ctr: () => google.maps.Marker,
+
+  inject: {
+    '$clusterPromise': {
+      default: null,
+    },
+  },
+
+  render (h) {
+    if (!this.$slots.default || this.$slots.default.length === 0) {
+      return ''
+    } else if (this.$slots.default.length === 1) { // So that infowindows can have a marker parent
+      return this.$slots.default[0]
+    } else {
+      return h(
+        'div',
+        this.$slots.default
+      )
+    }
+  },
+  emits: ['center_changed', 'zoom_changed', 'bounds_changed'],
+  unmounted () {
+    if (!this.$markerObject) { return }
+
+    if (this.$clusterObject) {
+      // Repaint will be performed in `updated()` of cluster
+      this.$clusterObject.removeMarker(this.$markerObject, true)
+    } else {
+      this.$markerObject.setMap(null)
+    }
+  },
+
+  beforeCreate (options) {
+    if (this.$clusterPromise) {
+      options.map = null
+    }
+
+    return this.$clusterPromise
+  },
+
+  afterCreate (inst) {
+    if (this.$clusterPromise) {
+      this.$clusterPromise.then((co) => {
+        co.addMarker(inst)
+        this.$clusterObject = co
+      })
+    }
+  },
+})
diff --git a/src/components/placeInput.vue b/src/components/placeInput.vue
new file mode 100644
index 0000000..a088307
--- /dev/null
+++ b/src/components/placeInput.vue
@@ -0,0 +1,10 @@
+<template>
+    <label>
+        <span v-text="label"></span>
+        <input type="text" :placeholder="placeholder" :class="className"
+          ref="input"/>
+    </label>
+</template>
+
+<script src="./placeInputImpl.js">
+</script>
diff --git a/src/components/placeInputImpl.js b/src/components/placeInputImpl.js
new file mode 100644
index 0000000..cd2b3b1
--- /dev/null
+++ b/src/components/placeInputImpl.js
@@ -0,0 +1,75 @@
+import {bindProps, getPropsValues} from '../utils/bindProps.js'
+import downArrowSimulator from '../utils/simulateArrowDown.js'
+
+const props = {
+  bounds: {
+    type: Object,
+  },
+  defaultPlace: {
+    type: String,
+    default: '',
+  },
+  componentRestrictions: {
+    type: Object,
+    default: null,
+  },
+  types: {
+    type: Array,
+    default: function () {
+      return []
+    }
+  },
+  placeholder: {
+    required: false,
+    type: String
+  },
+  className: {
+    required: false,
+    type: String
+  },
+  label: {
+    required: false,
+    type: String,
+    default: null
+  },
+  selectFirstOnEnter: {
+    require: false,
+    type: Boolean,
+    default: false
+  }
+}
+
+export default {
+  mounted () {
+    const input = this.$refs.input
+
+    // Allow default place to be set
+    input.value = this.defaultPlace
+    this.$watch('defaultPlace', () => {
+      input.value = this.defaultPlace
+    })
+
+    this.$gmapApiPromiseLazy().then(() => {
+      const options = getPropsValues(this, props)
+      if (this.selectFirstOnEnter) {
+        downArrowSimulator(this.$refs.input)
+      }
+
+      if (typeof (google.maps.places.Autocomplete) !== 'function') {
+        throw new Error('google.maps.places.Autocomplete is undefined. Did you add \'places\' to libraries when loading Google Maps?')
+      }
+
+      this.autoCompleter = new google.maps.places.Autocomplete(this.$refs.input, options)
+      const {placeholder, place, defaultPlace, className, label, selectFirstOnEnter, ...rest} = props // eslint-disable-line
+      bindProps(this, this.autoCompleter, rest)
+
+      this.autoCompleter.addListener('place_changed', () => {
+        this.$emit('place_changed', this.autoCompleter.getPlace())
+      })
+    })
+  },
+  created () {
+    console.warn('The PlaceInput class is deprecated! Please consider using the Autocomplete input instead') // eslint-disable-line no-console
+  },
+  props: props,
+}
diff --git a/src/components/polygon.js b/src/components/polygon.js
new file mode 100644
index 0000000..570b8aa
--- /dev/null
+++ b/src/components/polygon.js
@@ -0,0 +1,120 @@
+import mapElementFactory from './mapElementFactory.js'
+
+const props = {
+  draggable: {
+    type: Boolean
+  },
+  editable: {
+    type: Boolean,
+  },
+  options: {
+    type: Object
+  },
+  path: {
+    type: Array,
+    twoWay: true,
+    noBind: true,
+  },
+  paths: {
+    type: Array,
+    twoWay: true,
+    noBind: true,
+  },
+}
+
+const events = [
+  'click',
+  'dblclick',
+  'drag',
+  'dragend',
+  'dragstart',
+  'mousedown',
+  'mousemove',
+  'mouseout',
+  'mouseover',
+  'mouseup',
+  'rightclick'
+]
+
+export default mapElementFactory({
+  props: {
+    deepWatch: {
+      type: Boolean,
+      default: false
+    }
+  },
+  events,
+  mappedProps: props,
+  name: 'polygon',
+  ctr: () => google.maps.Polygon,
+
+  beforeCreate (options) {
+    if (!options.path) delete options.path
+    if (!options.paths) delete options.paths
+  },
+
+  afterCreate (inst) {
+    var clearEvents = () => {}
+
+    // Watch paths, on our own, because we do not want to set either when it is
+    // empty
+    this.$watch('paths', (paths) => {
+      if (paths) {
+        clearEvents()
+
+        inst.setPaths(paths)
+
+        const updatePaths = () => {
+          this.$emit('paths_changed', inst.getPaths())
+        }
+        const eventListeners = []
+
+        const mvcArray = inst.getPaths()
+        for (let i = 0; i < mvcArray.getLength(); i++) {
+          let mvcPath = mvcArray.getAt(i)
+          eventListeners.push([mvcPath, mvcPath.addListener('insert_at', updatePaths)])
+          eventListeners.push([mvcPath, mvcPath.addListener('remove_at', updatePaths)])
+          eventListeners.push([mvcPath, mvcPath.addListener('set_at', updatePaths)])
+        }
+        eventListeners.push([mvcArray, mvcArray.addListener('insert_at', updatePaths)])
+        eventListeners.push([mvcArray, mvcArray.addListener('remove_at', updatePaths)])
+        eventListeners.push([mvcArray, mvcArray.addListener('set_at', updatePaths)])
+
+        clearEvents = () => {
+          eventListeners.map(([obj, listenerHandle]) => // eslint-disable-line no-unused-vars
+            google.maps.event.removeListener(listenerHandle))
+        }
+      }
+    }, {
+      deep: this.deepWatch,
+      immediate: true,
+    })
+
+    this.$watch('path', (path) => {
+      if (path) {
+        clearEvents()
+
+        inst.setPaths(path)
+
+        const mvcPath = inst.getPath()
+        const eventListeners = []
+
+        const updatePaths = () => {
+          this.$emit('path_changed', inst.getPath())
+        }
+
+        eventListeners.push([mvcPath, mvcPath.addListener('insert_at', updatePaths)])
+        eventListeners.push([mvcPath, mvcPath.addListener('remove_at', updatePaths)])
+        eventListeners.push([mvcPath, mvcPath.addListener('set_at', updatePaths)])
+
+        clearEvents = () => {
+          eventListeners.map(([obj, listenerHandle]) => // eslint-disable-line no-unused-vars
+            google.maps.event.removeListener(listenerHandle))
+        }
+      }
+    }, {
+      deep: this.deepWatch,
+      immediate: true,
+    })
+  }
+})
diff --git a/src/components/polyline.js b/src/components/polyline.js
new file mode 100644
index 0000000..1448e3f
--- /dev/null
+++ b/src/components/polyline.js
@@ -0,0 +1,77 @@
+import mapElementFactory from './mapElementFactory.js'
+
+const props = {
+  draggable: {
+    type: Boolean
+  },
+  editable: {
+    type: Boolean,
+  },
+  options: {
+    twoWay: false,
+    type: Object
+  },
+  path: {
+    type: Array,
+    twoWay: true
+  },
+}
+
+const events = [
+  'click',
+  'dblclick',
+  'drag',
+  'dragend',
+  'dragstart',
+  'mousedown',
+  'mousemove',
+  'mouseout',
+  'mouseover',
+  'mouseup',
+  'rightclick'
+]
+
+export default mapElementFactory({
+  mappedProps: props,
+  props: {
+    deepWatch: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  events,
+
+  name: 'polyline',
+  ctr: () => google.maps.Polyline,
+
+  afterCreate (inst) {
+    var clearEvents = () => {}
+
+    this.$watch('path', (path) => {
+      if (path) {
+        clearEvents()
+
+        this.$polylineObject.setPath(path)
+
+        const mvcPath = this.$polylineObject.getPath()
+        const eventListeners = []
+
+        const updatePaths = () => {
+          this.$emit('path_changed', this.$polylineObject.getPath())
+        }
+
+        eventListeners.push([mvcPath, mvcPath.addListener('insert_at', updatePaths)])
+        eventListeners.push([mvcPath, mvcPath.addListener('remove_at', updatePaths)])
+        eventListeners.push([mvcPath, mvcPath.addListener('set_at', updatePaths)])
+
+        clearEvents = () => {
+          eventListeners.map(([obj, listenerHandle]) => // eslint-disable-line no-unused-vars
+            google.maps.event.removeListener(listenerHandle))
+        }
+      }
+    }, {
+      deep: this.deepWatch,
+      immediate: true,
+    })
+  }
+})
diff --git a/src/components/rectangle.js b/src/components/rectangle.js
new file mode 100644
index 0000000..62f403e
--- /dev/null
+++ b/src/components/rectangle.js
@@ -0,0 +1,41 @@
+import mapElementFactory from './mapElementFactory.js'
+
+const props = {
+  bounds: {
+    type: Object,
+    twoWay: true
+  },
+  draggable: {
+    type: Boolean,
+    default: false,
+  },
+  editable: {
+    type: Boolean,
+    default: false,
+  },
+  options: {
+    type: Object,
+    twoWay: false
+  }
+}
+
+const events = [
+  'click',
+  'dblclick',
+  'drag',
+  'dragend',
+  'dragstart',
+  'mousedown',
+  'mousemove',
+  'mouseout',
+  'mouseover',
+  'mouseup',
+  'rightclick'
+]
+
+export default mapElementFactory({
+  mappedProps: props,
+  name: 'rectangle',
+  ctr: () => google.maps.Rectangle,
+  events,
+})
diff --git a/src/components/streetViewPanorama.vue b/src/components/streetViewPanorama.vue
new file mode 100644
index 0000000..92c60d1
--- /dev/null
+++ b/src/components/streetViewPanorama.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="vue-street-view-pano-container">
+    <div ref="vue-street-view-pano" class="vue-street-view-pano"></div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default (function (x) { return x.default || x })(require('./streetViewPanoramaImpl.js'))
+</script>
+
+<style lang="css">
+.vue-street-view-pano-container {
+  position: relative;
+}
+
+.vue-street-view-pano-container .vue-street-view-pano {
+  left: 0; right: 0; top: 0; bottom: 0;
+  position: absolute;
+}
+</style>
diff --git a/src/components/streetViewPanoramaImpl.js b/src/components/streetViewPanoramaImpl.js
new file mode 100644
index 0000000..f8dfc5e
--- /dev/null
+++ b/src/components/streetViewPanoramaImpl.js
@@ -0,0 +1,147 @@
+import bindEvents from '../utils/bindEvents.js'
+import {bindProps, getPropsValues} from '../utils/bindProps.js'
+import mountableMixin from '../utils/mountableMixin.js'
+
+import TwoWayBindingWrapper from '../utils/TwoWayBindingWrapper.js'
+import WatchPrimitiveProperties from '../utils/WatchPrimitiveProperties.js'
+import { mappedPropsToVueProps } from './mapElementFactory.js'
+
+const props = {
+  zoom: {
+    twoWay: true,
+    type: Number
+  },
+  pov: {
+    twoWay: true,
+    type: Object,
+    trackProperties: ['pitch', 'heading']
+  },
+  position: {
+    twoWay: true,
+    type: Object,
+    noBind: true,
+  },
+  pano: {
+    twoWay: true,
+    type: String
+  },
+  motionTracking: {
+    twoWay: false,
+    type: Boolean
+  },
+  visible: {
+    twoWay: true,
+    type: Boolean,
+    default: true,
+  },
+  options: {
+    twoWay: false,
+    type: Object,
+    default () { return {} }
+  }
+}
+
+const events = [
+  'closeclick',
+  'status_changed',
+]
+
+export default {
+  mixins: [mountableMixin],
+  props: mappedPropsToVueProps(props),
+  replace: false, // necessary for css styles
+  methods: {
+    resize () {
+      if (this.$panoObject) {
+        google.maps.event.trigger(this.$panoObject, 'resize')
+      }
+    },
+  },
+
+  provide () {
+    const promise = new Promise((resolve, reject) => {
+      this.$panoPromiseDeferred = {resolve, reject}
+    })
+    return {
+      '$panoPromise': promise,
+      '$mapPromise': promise, // so that we can use it with markers
+    }
+  },
+
+  computed: {
+    finalLat () {
+      return this.position &&
+        (typeof this.position.lat === 'function') ? this.position.lat() : this.position.lat
+    },
+    finalLng () {
+      return this.position &&
+        (typeof this.position.lng === 'function') ? this.position.lng() : this.position.lng
+    },
+    finalLatLng () {
+      return {
+        lat: this.finalLat,
+        lng: this.finalLng,
+      }
+    }
+  },
+
+  watch: {
+    zoom (zoom) {
+      if (this.$panoObject) {
+        this.$panoObject.setZoom(zoom)
+      }
+    }
+  },
+
+  mounted () {
+    return this.$gmapApiPromiseLazy().then(() => {
+      // getting the DOM element where to create the map
+      const element = this.$refs['vue-street-view-pano']
+
+      // creating the map
+      const options = {
+        ...this.options,
+        ...getPropsValues(this, props),
+      }
+      delete options.options
+
+      this.$panoObject = new google.maps.StreetViewPanorama(element, options)
+
+      // binding properties (two and one way)
+      bindProps(this, this.$panoObject, props)
+      // binding events
+      bindEvents(this, this.$panoObject, events)
+
+      // manually trigger position
+      TwoWayBindingWrapper((increment, decrement, shouldUpdate) => {
+        // Panos take a while to load
+        increment()
+
+        this.$panoObject.addListener('position_changed', () => {
+          if (shouldUpdate()) {
+            this.$emit('position_changed', this.$panoObject.getPosition())
+          }
+          decrement()
+        })
+
+        const updateCenter = () => {
+          increment()
+          this.$panoObject.setPosition(this.finalLatLng)
+        }
+
+        WatchPrimitiveProperties(
+          this,
+          ['finalLat', 'finalLng'],
+          updateCenter
+        )
+      })
+
+      this.$panoPromiseDeferred.resolve(this.$panoObject)
+
+      return this.$panoPromise
+    })
+    .catch((error) => {
+      throw error
+    })
+  },
+}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..7341638
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,126 @@
+import lazy from './utils/lazyValue'
+import {loadGmapApi} from './manager'
+import {createApp} from 'vue'
+import Marker from './components/marker'
+import Polyline from './components/polyline'
+import Polygon from './components/polygon'
+import Circle from './components/circle'
+import Rectangle from './components/rectangle'
+import GmapCluster from './components/cluster'
+
+// Vue component imports
+import InfoWindow from './components/infoWindow.vue'
+import Map from './components/map.vue'
+import StreetViewPanorama from './components/streetViewPanorama.vue'
+import PlaceInput from './components/placeInput.vue'
+import Autocomplete from './components/autocomplete.vue'
+
+import MapElementMixin from './components/mapElementMixin'
+import MapElementFactory from './components/mapElementFactory'
+import MountableMixin from './utils/mountableMixin'
+
+// HACK: Cluster should be loaded conditionally
+// However in the web version, it's not possible to write
+// `import 'vue2-google-maps/src/components/cluster'`, so we need to
+// import it anyway (but we don't have to register it)
+// Therefore we use babel-plugin-transform-inline-environment-variables to
+// set BUILD_DEV to truthy / falsy
+const Cluster = (process.env.BUILD_DEV === '1')
+  ? undefined
+  : (s => s.default || s)(require('./components/cluster'))
+
+let GmapApi = null
+
+// export everything
+export {loadGmapApi, Marker, Polyline, Polygon, Circle, Cluster, Rectangle,
+  InfoWindow, Map, PlaceInput, MapElementMixin, MapElementFactory, Autocomplete,
+  MountableMixin, StreetViewPanorama}
+
+export function install (Vue, options) {
+  // Set defaults
+  options = {
+    installComponents: true,
+    autobindAllEvents: false,
+    ...options
+  }
+
+  // Update the global `GmapApi`. This will allow
+  // components to use the `google` global reactively
+  // via:
+  //   import {gmapApi} from 'vue2-google-maps'
+  //   export default {  computed: { google: gmapApi }  }
+  GmapApi = createApp({data: {gmapApi: null}});
+
+  const defaultResizeBus = createApp()
+
+  // Use a lazy to only load the API when
+  // a VGM component is loaded
+  let gmapApiPromiseLazy = makeGmapApiPromiseLazy(options)
+
+  Vue.mixin({
+    created () {
+      this.$gmapDefaultResizeBus = defaultResizeBus
+      this.$gmapOptions = options
+      this.$gmapApiPromiseLazy = gmapApiPromiseLazy
+    }
+  })
+  Vue.$gmapDefaultResizeBus = defaultResizeBus
+  Vue.$gmapApiPromiseLazy = gmapApiPromiseLazy
+
+  if (options.installComponents) {
+    Vue.component('GmapMap', Map)
+    Vue.component('GmapMarker', Marker)
+    Vue.component('GmapInfoWindow', InfoWindow)
+    Vue.component('GmapCluster', GmapCluster)
+    Vue.component('GmapPolyline', Polyline)
+    Vue.component('GmapPolygon', Polygon)
+    Vue.component('GmapCircle', Circle)
+    Vue.component('GmapRectangle', Rectangle)
+    Vue.component('GmapAutocomplete', Autocomplete)
+    Vue.component('GmapPlaceInput', PlaceInput)
+    Vue.component('GmapStreetViewPanorama', StreetViewPanorama)
+  }
+}
+
+function makeGmapApiPromiseLazy (options) {
+  // Things to do once the API is loaded
+  function onApiLoaded () {
+    GmapApi.gmapApi = {}
+    return window.google
+  }
+
+  if (options.load) { // If library should load the API
+    return lazy(() => { // Load the
+      // This will only be evaluated once
+      if (typeof window === 'undefined') { // server side -- never resolve this promise
+        return new Promise(() => {}).then(onApiLoaded)
+      } else {
+        return new Promise((resolve, reject) => {
+          try {
+            window['vueGoogleMapsInit'] = resolve
+            loadGmapApi(options.load, options.loadCn)
+          } catch (err) {
+            reject(err)
+          }
+        })
+        .then(onApiLoaded)
+      }
+    })
+  } else { // If library should not handle API, provide
+    // end-users with the global `vueGoogleMapsInit: () => undefined`
+    // when the Google Maps API has been loaded
+    const promise = new Promise((resolve) => {
+      if (typeof window === 'undefined') {
+        // Do nothing if run from server-side
+        return
+      }
+      window['vueGoogleMapsInit'] = resolve
+    }).then(onApiLoaded)
+
+    return lazy(() => promise)
+  }
+}
+
+export function gmapApi () {
+  return GmapApi.gmapApi && window.google
+}
diff --git a/src/manager.js b/src/manager.js
new file mode 100644
index 0000000..1ece1f5
--- /dev/null
+++ b/src/manager.js
@@ -0,0 +1,73 @@
+let isApiSetUp = false
+
+/**
+ * @param apiKey    API Key, or object with the URL parameters. For example
+ *                  to use Google Maps Premium API, pass
+ *                    `{ client: <YOUR-CLIENT-ID> }`.
+ *                  You may pass the libraries and/or version (as `v`) parameter into
+ *                  this parameter and skip the next two parameters
+ * @param version   Google Maps version
+ * @param libraries Libraries to load (@see
+ *                  https://developers.google.com/maps/documentation/javascript/libraries)
+ * @param loadCn    Boolean. If set to true, the map will be loaded from google maps China
+ *                  (@see https://developers.google.com/maps/documentation/javascript/basics#GoogleMapsChina)
+ *
+ * Example:
+ * ```
+ *      import {load} from 'vue-google-maps'
+ *
+ *      load(<YOUR-API-KEY>)
+ *
+ *      load({
+ *              key: <YOUR-API-KEY>,
+ *      })
+ *
+ *      load({
+ *              client: <YOUR-CLIENT-ID>,
+ *              channel: <YOUR CHANNEL>
+ *      })
+ * ```
+ */
+export const loadGmapApi = (options, loadCn) => {
+  if (typeof document === 'undefined') {
+    // Do nothing if run from server-side
+    return
+  }
+  if (!isApiSetUp) {
+    isApiSetUp = true
+
+    const googleMapScript = document.createElement('SCRIPT')
+
+    // Allow options to be an object.
+    // This is to support more esoteric means of loading Google Maps,
+    // such as Google for business
+    // https://developers.google.com/maps/documentation/javascript/get-api-key#premium-auth
+    if (typeof options !== 'object') {
+      throw new Error('options should  be an object')
+    }
+
+    // libraries
+    if (Array.prototype.isPrototypeOf(options.libraries)) {
+      options.libraries = options.libraries.join(',')
+    }
+    options['callback'] = 'vueGoogleMapsInit'
+
+    let baseUrl = 'https://maps.googleapis.com/'
+
+    if (typeof loadCn === 'boolean' && loadCn === true) {
+      baseUrl = 'https://maps.google.cn/'
+    }
+
+    let url = baseUrl + 'maps/api/js?' +
+      Object.keys(options)
+        .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(options[key]))
+        .join('&')
+
+    googleMapScript.setAttribute('src', url)
+    googleMapScript.setAttribute('async', '')
+    googleMapScript.setAttribute('defer', '')
+    document.head.appendChild(googleMapScript)
+  } else {
+    throw new Error('You already started the loading of google maps')
+  }
+}
diff --git a/src/utils/TwoWayBindingWrapper.js b/src/utils/TwoWayBindingWrapper.js
new file mode 100644
index 0000000..a07d31c
--- /dev/null
+++ b/src/utils/TwoWayBindingWrapper.js
@@ -0,0 +1,48 @@
+/**
+ * When you have two-way bindings, but the actual bound value will not equal
+ * the value you initially passed in, then to avoid an infinite loop you
+ * need to increment a counter every time you pass in a value, decrement the
+ * same counter every time the bound value changed, but only bubble up
+ * the event when the counter is zero.
+ *
+Example:
+
+Let's say DrawingRecognitionCanvas is a deep-learning backed canvas
+that, when given the name of an object (e.g. 'dog'), draws a dog.
+But whenever the drawing on it changes, it also sends back its interpretation
+of the image by way of the @newObjectRecognized event.
+
+<input
+  type="text"
+  placeholder="an object, e.g. Dog, Cat, Frog"
+  v-model="identifiedObject" />
+<DrawingRecognitionCanvas
+  :object="identifiedObject"
+  @newObjectRecognized="identifiedObject = $event"
+  />
+
+new TwoWayBindingWrapper((increment, decrement, shouldUpdate) => {
+  this.$watch('identifiedObject', () => {
+    // new object passed in
+    increment()
+  })
+  this.$deepLearningBackend.on('drawingChanged', () => {
+    recognizeObject(this.$deepLearningBackend)
+      .then((object) => {
+        decrement()
+        if (shouldUpdate()) {
+          this.$emit('newObjectRecognized', object.name)
+        }
+      })
+  })
+})
+ */
+export default function TwoWayBindingWrapper (fn) {
+  let counter = 0
+
+  fn(
+    () => { counter += 1 },
+    () => { counter = Math.max(0, counter - 1) },
+    () => counter === 0,
+  )
+}
diff --git a/src/utils/WatchPrimitiveProperties.js b/src/utils/WatchPrimitiveProperties.js
new file mode 100644
index 0000000..a62ec9a
--- /dev/null
+++ b/src/utils/WatchPrimitiveProperties.js
@@ -0,0 +1,24 @@
+/**
+ * Watch the individual properties of a PoD object, instead of the object
+ * per se. This is different from a deep watch where both the reference
+ * and the individual values are watched.
+ *
+ * In effect, it throttles the multiple $watch to execute at most once per tick.
+ */
+export default function WatchPrimitiveProperties (vueInst, propertiesToTrack, handler, immediate = false) {
+  let isHandled = false
+
+  function requestHandle () {
+    if (!isHandled) {
+      isHandled = true
+      vueInst.$nextTick(() => {
+        isHandled = false
+        handler()
+      })
+    }
+  }
+
+  for (let prop of propertiesToTrack) {
+    vueInst.$watch(prop, requestHandle, {immediate})
+  }
+}
diff --git a/src/utils/bindEvents.js b/src/utils/bindEvents.js
new file mode 100644
index 0000000..a0c9048
--- /dev/null
+++ b/src/utils/bindEvents.js
@@ -0,0 +1,10 @@
+export default (vueInst, googleMapsInst, events) => {
+  for (let eventName of events) {
+    if (vueInst.$gmapOptions.autobindAllEvents ||
+        vueInst.$attrs[eventName]) {
+      googleMapsInst.addListener(eventName, (ev) => {
+        vueInst.$emit(eventName, ev)
+      })
+    }
+  }
+}
diff --git a/src/utils/bindProps.js b/src/utils/bindProps.js
new file mode 100644
index 0000000..d849909
--- /dev/null
+++ b/src/utils/bindProps.js
@@ -0,0 +1,74 @@
+import WatchPrimitiveProperties from '../utils/WatchPrimitiveProperties'
+
+function capitalizeFirstLetter (string) {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+export function getPropsValues (vueInst, props) {
+  return Object.keys(props)
+    .reduce(
+      (acc, prop) => {
+        if (vueInst[prop] !== undefined) {
+          acc[prop] = vueInst[prop]
+        }
+        return acc
+      },
+      {}
+    )
+}
+
+/**
+  * Binds the properties defined in props to the google maps instance.
+  * If the prop is an Object type, and we wish to track the properties
+  * of the object (e.g. the lat and lng of a LatLng), then we do a deep
+  * watch. For deep watch, we also prevent the _changed event from being
+  * $emitted if the data source was external.
+  */
+export function bindProps (vueInst, googleMapsInst, props, options) {
+  for (let attribute in props) {
+    let {twoWay, type, trackProperties, noBind} = props[attribute]
+
+    if (noBind) continue
+
+    const setMethodName = 'set' + capitalizeFirstLetter(attribute)
+    const getMethodName = 'get' + capitalizeFirstLetter(attribute)
+    const eventName = attribute.toLowerCase() + '_changed'
+    const initialValue = vueInst[attribute]
+
+    if (typeof googleMapsInst[setMethodName] === 'undefined') {
+      throw new Error(`${setMethodName} is not a method of (the Maps object corresponding to) ${vueInst.$options._componentTag}`)
+    }
+
+    // We need to avoid an endless
+    // propChanged -> event $emitted -> propChanged -> event $emitted loop
+    // although this may really be the user's responsibility
+    if (type !== Object || !trackProperties) {
+      // Track the object deeply
+      vueInst.$watch(attribute, () => {
+        const attributeValue = vueInst[attribute]
+
+        googleMapsInst[setMethodName](attributeValue)
+      }, {
+        immediate: typeof initialValue !== 'undefined',
+        deep: type === Object
+      })
+    } else {
+      WatchPrimitiveProperties(
+        vueInst,
+        trackProperties.map(prop => `${attribute}.${prop}`),
+        () => {
+          googleMapsInst[setMethodName](vueInst[attribute])
+        },
+        vueInst[attribute] !== undefined
+      )
+    }
+
+    if (twoWay &&
+        (vueInst.$gmapOptions.autobindAllEvents ||
+        vueInst.$attrs[eventName])) {
+      googleMapsInst.addListener(eventName, (ev) => { // eslint-disable-line no-unused-vars
+        vueInst.$emit(eventName, googleMapsInst[getMethodName]())
+      })
+    }
+  }
+}
diff --git a/src/utils/lazyValue.js b/src/utils/lazyValue.js
new file mode 100644
index 0000000..ac03cab
--- /dev/null
+++ b/src/utils/lazyValue.js
@@ -0,0 +1,16 @@
+// This piece of code was orignally written by sindresorhus and can be seen here
+// https://github.com/sindresorhus/lazy-value/blob/master/index.js
+
+export default fn => {
+  let called = false
+  let ret
+
+  return () => {
+    if (!called) {
+      called = true
+      ret = fn()
+    }
+
+    return ret
+  }
+}
diff --git a/src/utils/mountableMixin.js b/src/utils/mountableMixin.js
new file mode 100644
index 0000000..1bbb52e
--- /dev/null
+++ b/src/utils/mountableMixin.js
@@ -0,0 +1,55 @@
+/*
+Mixin for objects that are mounted by Google Maps
+Javascript API.
+
+These are objects that are sensitive to element resize
+operations so it exposes a property which accepts a bus
+
+*/
+
+export default {
+  props: ['resizeBus'],
+
+  data () {
+    return {
+      _actualResizeBus: null,
+    }
+  },
+
+  created () {
+    if (typeof this.resizeBus === 'undefined') {
+      this.$data._actualResizeBus = this.$gmapDefaultResizeBus
+    } else {
+      this.$data._actualResizeBus = this.resizeBus
+    }
+  },
+
+  methods: {
+    _resizeCallback () {
+      this.resize()
+    },
+    _delayedResizeCallback () {
+      this.$nextTick(() => this._resizeCallback())
+    }
+  },
+
+  watch: {
+    resizeBus (newVal, oldVal) { // eslint-disable-line no-unused-vars
+      this.$data._actualResizeBus = newVal
+    },
+    '$data._actualResizeBus' (newVal, oldVal) {
+      if (oldVal) {
+        oldVal.$off('resize', this._delayedResizeCallback)
+      }
+      if (newVal) {
+      //  newVal.$on('resize', this._delayedResizeCallback)
+      }
+    }
+  },
+
+  unmounted () {
+    if (this.$data._actualResizeBus) {
+      this.$data._actualResizeBus.$off('resize', this._delayedResizeCallback)
+    }
+  }
+}
diff --git a/src/utils/simulateArrowDown.js b/src/utils/simulateArrowDown.js
new file mode 100644
index 0000000..f572157
--- /dev/null
+++ b/src/utils/simulateArrowDown.js
@@ -0,0 +1,28 @@
+// This piece of code was orignally written by amirnissim and can be seen here
+// http://stackoverflow.com/a/11703018/2694653
+// This has been ported to Vanilla.js by GuillaumeLeclerc
+export default (input) => {
+  var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent
+
+  function addEventListenerWrapper (type, listener) {
+    // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
+    // and then trigger the original listener.
+    if (type === 'keydown') {
+      var origListener = listener
+      listener = function (event) {
+        var suggestionSelected = document.getElementsByClassName('pac-item-selected').length > 0
+        if (event.which === 13 && !suggestionSelected) {
+          var simulatedEvent = document.createEvent('Event')
+          simulatedEvent.keyCode = 40
+          simulatedEvent.which = 40
+          origListener.apply(input, [simulatedEvent])
+        }
+        origListener.apply(input, [event])
+      }
+    }
+    _addEventListener.apply(input, [type, listener])
+  }
+
+  input.addEventListener = addEventListenerWrapper
+  input.attachEvent = addEventListenerWrapper
+}
diff --git a/test/.eslintrc.json b/test/.eslintrc.json
new file mode 100644
index 0000000..0ff926e
--- /dev/null
+++ b/test/.eslintrc.json
@@ -0,0 +1,26 @@
+{
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": "standard",
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "rules": {
+    "comma-dangle": 0
+  },
+  "globals": {
+    "google": true,
+    "Vue": true,
+    "VueGoogleMaps": true
+  },
+  "plugins": [
+    "html"
+  ],
+  "settings": {
+    "html/html-extensions": [".html", ".vue"]
+  }
+}
diff --git a/test/basic.js b/test/basic.js
new file mode 100644
index 0000000..5f56ae5
--- /dev/null
+++ b/test/basic.js
@@ -0,0 +1,95 @@
+import Lab from 'lab'
+import assert from 'assert'
+import fs from 'fs'
+import path from 'path'
+import {getPage, loadFile} from './test-setup/test-common'
+
+export const lab = Lab.script()
+
+lab.experiment('Basic tests', {timeout: 15000}, function () {
+  let page = null
+
+  async function loadPage () {
+    return loadFile(page, './test-pages/test-plain-map.html', {
+      waitUntil: 'domcontentloaded'
+    })
+  }
+
+  async function mountVue () {
+    return page.evaluateHandle(() =>
+      new Promise((resolve) => {
+        new Vue({
+          created () {
+            resolve(this)
+          },
+        }).$mount('#test1')
+      }))
+  }
+
+  lab.before({timeout: 15000}, getPage(p => { page = p }))
+
+  lab.test('Maps API is loaded', async function () {
+    await loadPage()
+    const vue = await mountVue()
+
+    assert(await page.evaluate(
+      (vue) =>
+        vue.$refs.map.$mapPromise
+          .then(() => vue.$refs.map.$mapObject instanceof google.maps.Map),
+      vue), '$mapPromise is defined')
+
+    assert(await page.evaluate(
+      (vue) =>
+        vue.$refs.map.$mapObject
+          .getDiv().parentNode.classList.contains('map-container'),
+      vue),
+    'Parent of $mapObject.div is a .map-container')
+  })
+
+  lab.test('Panning of map works', {timeout: 30000}, async function () {
+    await loadPage()
+    const vue = await mountVue()
+
+    const [top, right, bottom, left] = await page.evaluate(() => {
+      const el = document.querySelector('.map-container')
+      const top = el.offsetTop
+      const right = el.offsetLeft + el.offsetWidth
+      const bottom = el.offsetTop + el.offsetHeight
+      const left = el.offsetLeft
+
+      return [top, right, bottom, left]
+    })
+
+    // Wait for map to load first...
+    await page.evaluate((vue) =>
+      vue.$refs.map.$mapPromise
+        .then(() => new Promise(resolve => setTimeout(resolve, 500))),
+      vue)
+
+    // Then try to pan the page
+    await page.mouse.move(right - 4, top + 4)
+    await page.mouse.down()
+    await page.mouse.move(left + 4, bottom - 4, {steps: 20})
+    await new Promise(resolve => setTimeout(resolve, 100))
+    await page.mouse.up()
+
+    const {lat, lng} = await page.evaluate((vue) => {
+      const c = vue.$refs.map.$mapObject.getCenter()
+      return {lat: c.lat(), lng: c.lng()}
+    }, vue)
+    assert(lat > 1.45, 'Lat greater than 1.45')
+    assert(lng > 103.9, 'Lng greater than 103.9')
+  })
+
+  lab.test('Lodash library is not bloating up the library', async () => {
+    const libraryOutput = fs.readFileSync(
+      path.join(__dirname, '../dist/vue-google-maps.js'),
+      'utf-8'
+    )
+
+    if (/Lodash <http(.*)>/.test(libraryOutput)) {
+      assert(false,
+        'Lodash found! This is bad because you are bloating up the library')
+    }
+  })
+})
diff --git a/test/gmapApi-guard.js b/test/gmapApi-guard.js
new file mode 100644
index 0000000..59f4052
--- /dev/null
+++ b/test/gmapApi-guard.js
@@ -0,0 +1,38 @@
+import Lab from 'lab'
+import assert from 'assert'
+import {getPage, loadFile} from './test-setup/test-common'
+
+export const lab = Lab.script()
+
+lab.experiment('Effectiveness of gmapApi guard', {timeout: 15000}, function () {
+  let page = null
+  let isError = false
+
+  async function loadPage () {
+    return loadFile(page, './test-pages/test-gmapApi.html', {
+      waitUntil: 'networkidle0'
+    })
+  }
+
+  lab.before({timeout: 15000}, getPage(p => {
+    isError = false
+    page = p
+
+    page.on('error', (err) => {
+      isError = err
+    })
+    page.on('pageerror', (err) => {
+      isError = err
+    })
+    return p
+  }))
+
+  lab.test('gmapGuard prevents errors', async function () {
+    await loadPage()
+
+    assert(!isError)
+    assert(await page.evaluate(() => {
+      return google && (window.vue.$refs.myMarker.position instanceof google.maps.LatLng)
+    }), 'Marker is loaded with a position')
+  })
+})
diff --git a/test/maps-not-loaded.js b/test/maps-not-loaded.js
new file mode 100644
index 0000000..bb88150
--- /dev/null
+++ b/test/maps-not-loaded.js
@@ -0,0 +1,65 @@
+import Lab from 'lab'
+import assert from 'assert'
+import {getPage, loadFile} from './test-setup/test-common'
+
+export const lab = Lab.script()
+
+lab.experiment('On-demand API loading', {timeout: 15000}, function () {
+  let page = null
+
+  async function loadPage () {
+    return loadFile(page, './test-pages/test-page-without-maps.html', {
+      waitUntil: 'networkidle0'
+    })
+  }
+
+  async function mountVue () {
+    return page.evaluateHandle(() =>
+      new Promise((resolve) => {
+        new Vue({
+          data: {
+            loadMap: false,
+          },
+          mounted () {
+            resolve(this)
+          },
+        }).$mount('#test1')
+      }))
+  }
+
+  lab.before({timeout: 15000}, getPage(p => { page = p }))
+
+  lab.test('Maps API is loaded only on demand', async function () {
+    await loadPage()
+    const vue = await mountVue()
+
+    assert(await page.evaluate(
+      (vue) => {
+        const allScriptElements = Array.prototype.slice.call(document.getElementsByTagName('SCRIPT'), 0)
+        return (
+          allScriptElements.every(s => !s.src.toLowerCase().includes('maps.googleapis.com')) &&
+          !window.google
+        )
+      },
+      vue), 'Google APIs are not loaded')
+
+    assert(await page.evaluate(
+      (vue) => {
+        return Promise.resolve(null)
+        .then(() => {
+          vue.loadMap = true
+
+          return new Promise((resolve) => setTimeout(resolve, 100))
+        })
+        .then(() => vue.$refs.gmap.$mapPromise.then(() => !!window.google))
+        .then((isGoogleLoaded) => {
+          const allScriptElements = Array.prototype.slice.call(document.getElementsByTagName('SCRIPT'), 0)
+          return (
+            isGoogleLoaded &&
+            allScriptElements.some(s => s.src.toLowerCase().includes('maps.googleapis.com'))
+          )
+        })
+      },
+      vue), 'Google APIs are loaded')
+  })
+})
diff --git a/test/marker-with-infowindow.js b/test/marker-with-infowindow.js
new file mode 100644
index 0000000..e993413
--- /dev/null
+++ b/test/marker-with-infowindow.js
@@ -0,0 +1,84 @@
+import Lab from 'lab'
+import assert from 'assert'
+import {getPage, loadFile} from './test-setup/test-common'
+
+export const lab = Lab.script()
+
+lab.experiment('Marker / Infowindow tests', {timeout: 15000}, function () {
+  let page = null
+
+  async function loadPage () {
+    return loadFile(page, './test-pages/test-marker-with-infowindow.html', {
+      waitUntil: 'domcontentloaded'
+    })
+  }
+
+  lab.before({timeout: 15000}, getPage(p => { page = p }))
+
+  lab.test('Clicking the marker triggers the infowindow', async function () {
+    await loadPage()
+
+    await page.evaluate(() => {
+      // Ensure that the map has been created
+      return window.theVue.$refs.map.$mapPromise
+      .then(() => {
+        // Give some more time for the marker to initialize
+        return new Promise(resolve => setTimeout(resolve, 100))
+      })
+    })
+
+    // Is the infowindow hidden?
+    assert(await page.evaluate(() => {
+      return !document.getElementById('thediv') || (
+        document.getElementById('thediv').offsetWidth === 0 &&
+        document.getElementById('thediv').offsetHeight === 0
+      )
+    }),
+    'infowindow is hidden')
+
+    // Clicked is false
+    assert(await page.evaluate(() => {
+      return !window.theVue.clicked
+    }),
+    'marker is not clicked')
+
+    // Obtain the center
+    const [x, y] = await page.evaluate(() => {
+      const el = window.theVue.$refs.map.$el
+
+      return Promise.resolve([
+        el.offsetLeft + 0.5 * el.offsetWidth,
+        el.offsetTop + 0.5 * el.offsetHeight,
+      ])
+    })
+
+    await page.mouse.click(x, y - 20)
+
+    // Clicked is now true!
+    assert(await page.evaluate(() => {
+      return new Promise(resolve => setTimeout(resolve, 100))
+      .then(() => {
+        return window.theVue.clicked
+      })
+    }),
+    'marker is clicked')
+
+    // Infowindow is now open!
+    assert(await page.evaluate(() => {
+      return document.getElementById('thediv').offsetWidth > 10
+    }),
+    '#thediv is visible')
+
+    // shut the infowindow
+    assert(await page.evaluate(() => {
+      window.theVue.infoWindow.open = false
+      return new Promise(resolve => setTimeout(resolve, 100))
+      .then(() => {
+        return !document.getElementById('thediv') || (
+          document.getElementById('thediv').offsetWidth === 0 &&
+          document.getElementById('thediv').offsetHeight === 0
+        )
+      })
+    }), 'setting open=false closes #thediv')
+  })
+})
diff --git a/test/test-all-examples.js b/test/test-all-examples.js
new file mode 100644
index 0000000..7e19f6b
--- /dev/null
+++ b/test/test-all-examples.js
@@ -0,0 +1,40 @@
+import Lab from 'lab'
+import assert from 'assert'
+import fs from 'fs'
+import path from 'path'
+import {getPage, loadFile} from './test-setup/test-common'
+
+export const lab = Lab.script()
+
+lab.experiment('Examples test', {timeout: 15000}, function () {
+  let page = null
+
+  async function loadPage (f) {
+    return loadFile(page, f, {
+      waitUntil: 'networkidle0'
+    })
+  }
+
+  lab.before({timeout: 15000}, getPage(p => { page = p }))
+
+  lab.test('Test all examples pages load without errors (does not test functionality)', {timeout: 50000}, async function () {
+    const files = fs.readdirSync(path.join(__dirname, '../examples')).filter(f => f.endsWith('.html'))
+    let isErrored = false
+
+    page.on('error', (err) => {
+      isErrored = err
+    })
+    page.on('pageerror', (err) => {
+      isErrored = err
+    })
+
+    assert(!isErrored)
+
+    for (let file of files) {
+      await loadPage('../examples/' + file)
+      if (isErrored) {
+        throw new Error(`The example file ../examples/${file} threw an error ${isErrored}`)
+      }
+    }
+  })
+})
diff --git a/test/test-pages/test-gmapApi.html b/test/test-pages/test-gmapApi.html
new file mode 100644
index 0000000..8c76ab7
--- /dev/null
+++ b/test/test-pages/test-gmapApi.html
@@ -0,0 +1,39 @@
+<head>
+  <style>
+  .map-container {
+    width: 400px;
+    height: 400px;
+  }
+  </style>
+</head>
+<body>
+  <div id="test">
+    <h2>Test 1</h2>
+    <gmap-map
+      :center="{lat: 1.38, lng: 103.8}"
+      :zoom="12"
+      class="map-container"
+      ref="map">
+      <gmap-marker ref="myMarker" :position="google && new google.maps.LatLng(1.38, 103.8)"></gmap-marker>
+    </gmap-map>
+  </div>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
+  <script src="../../dist/vue-google-maps.js"></script>
+
+  <script>
+    Vue.use(VueGoogleMaps, {
+      load: {
+        key: 'AIzaSyDf43lPdwlF98RCBsJOFNKOkoEjkwxb5Sc',
+      }
+    })
+    document.addEventListener('DOMContentLoaded', () => {
+      window.vue = new Vue({
+        computed: {
+          google: VueGoogleMaps.gmapApi
+        },
+        el: '#test',
+      })
+    })
+  </script>
+</body>
diff --git a/test/test-pages/test-marker-with-infowindow.html b/test/test-pages/test-marker-with-infowindow.html
new file mode 100644
index 0000000..7523e4c
--- /dev/null
+++ b/test/test-pages/test-marker-with-infowindow.html
@@ -0,0 +1,71 @@
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+  <div id="app">
+    <gmap-map
+      :center="randomInitialLatLng"
+      :zoom="7"
+      style="height: 400px; width: 100%;"
+      ref="map"
+      id="themap">
+
+      <gmap-marker
+        :position="randomInitialLatLng"
+        :clickable="true"
+        @click="openInfoWindowTemplate(randomInitialLatLng)"
+        ref="markers">
+      </gmap-marker>
+
+      <gmap-info-window
+        :options="{maxWidth: 300}"
+        :position="infoWindow.position"
+        :opened="infoWindow.open"
+        @closeclick="infoWindow.open = false">
+        <div id="thediv">hello</div>
+      </gmap-info-window>
+    </gmap-map>
+  </div>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
+  <script src="../../dist/vue-google-maps.js"></script>
+
+  <script>
+    Vue.use(VueGoogleMaps, {
+      load: {
+        key: 'AIzaSyDf43lPdwlF98RCBsJOFNKOkoEjkwxb5Sc',
+      }
+    })
+
+    document.addEventListener('DOMContentLoaded', () => {
+      window.theVue = new Vue({
+        el: '#app',
+        data () {
+          return {
+            infoWindow: {
+              position: {lat: 50, lng: 90},
+              open: false,
+              template: ''
+            },
+            clicked: false,
+          }
+        },
+        computed: {
+          randomInitialLatLng () {
+            return ({lat: 50 + Math.random(), lng: 90 + Math.random()})
+          }
+        },
+        methods: {
+          openInfoWindowTemplate (pos) {
+            this.infoWindow.position = pos
+            this.infoWindow.open = true
+
+            this.clicked = true
+          }
+        }
+      })
+    })
+  </script>
+</body>
+</html>
diff --git a/test/test-pages/test-page-without-maps.html b/test/test-pages/test-page-without-maps.html
new file mode 100644
index 0000000..263f957
--- /dev/null
+++ b/test/test-pages/test-page-without-maps.html
@@ -0,0 +1,28 @@
+<head>
+  <style>
+  .map-container {
+    width: 400px;
+    height: 400px;
+  }
+  </style>
+</head>
+<body>
+  <div id="test1">
+    <h2>Test 1</h2>
+
+    <gmap-map v-if="loadMap" ref="gmap"></gmap-map>
+  </div>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
+  <script src="../../dist/vue-google-maps.js"></script>
+
+  <script>
+    // This page does not have maps, but we use Vue2-google-maps
+    // Must ensure that Google Maps library is NEVER loaded
+    Vue.use(VueGoogleMaps, {
+      load: {
+        key: 'AIzaSyDf43lPdwlF98RCBsJOFNKOkoEjkwxb5Sc',
+      }
+    })
+  </script>
+</body>
diff --git a/test/test-pages/test-plain-map.html b/test/test-pages/test-plain-map.html
new file mode 100644
index 0000000..3a8cf9c
--- /dev/null
+++ b/test/test-pages/test-plain-map.html
@@ -0,0 +1,30 @@
+<head>
+  <style>
+  .map-container {
+    width: 400px;
+    height: 400px;
+  }
+  </style>
+</head>
+<body>
+  <div id="test1">
+    <h2>Test 1</h2>
+    <gmap-map
+      :center="{lat: 1.38, lng: 103.8}"
+      :zoom="12"
+      class="map-container"
+      ref="map">
+    </gmap-map>
+  </div>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
+  <script src="../../dist/vue-google-maps.js"></script>
+
+  <script>
+    Vue.use(VueGoogleMaps, {
+      load: {
+        key: 'AIzaSyDf43lPdwlF98RCBsJOFNKOkoEjkwxb5Sc',
+      }
+    })
+  </script>
+</body>
diff --git a/test/test-setup/babel-transform.js b/test/test-setup/babel-transform.js
new file mode 100644
index 0000000..7f45fc6
--- /dev/null
+++ b/test/test-setup/babel-transform.js
@@ -0,0 +1,30 @@
+// Adapted from https://github.com/nlf/lab-babel/blob/master/lib/index.js
+require('babel-polyfill')
+var Babel = require('babel-core')
+
+var internals = {}
+internals.transform = function (content, filename) {
+  if (/^node_modules/.test(filename)) {
+    return content
+  }
+
+  var transformed = Babel.transform(content, {
+    filename: filename,
+    sourceMap: 'inline',
+    sourceFileName: filename,
+    auxiliaryCommentBefore: '$lab:coverage:off$',
+    auxiliaryCommentAfter: '$lab:coverage:on$',
+    presets: ['es2015'],
+    plugins: ['transform-object-rest-spread'],
+  })
+
+  return transformed.code
+}
+
+internals.extensions = ['js', 'jsx', 'es', 'es6']
+internals.methods = []
+for (var i = 0, il = internals.extensions.length; i < il; ++i) {
+  internals.methods.push({ ext: internals.extensions[i], transform: internals.transform })
+}
+
+module.exports = internals.methods
diff --git a/test/test-setup/compile-standalone.js b/test/test-setup/compile-standalone.js
new file mode 100644
index 0000000..1da7dba
--- /dev/null
+++ b/test/test-setup/compile-standalone.js
@@ -0,0 +1,25 @@
+import webpack from 'webpack'
+import * as shell from 'shelljs'
+import path from 'path'
+
+export default new Promise((resolve, reject) => {
+  const webpackConfig = require('../../webpack.config.js')[0]
+
+  webpack(
+    {
+      ...webpackConfig,
+      mode: 'development',
+    },
+    (err, status) => {
+      if (!err) {
+        shell.cp(
+          path.resolve(__dirname, '../../dist/vue-google-maps.js'),
+          path.resolve(__dirname, '../../examples/vue-google-maps.js')
+        )
+        resolve()
+      } else {
+        reject(err)
+      }
+    }
+  )
+})
diff --git a/test/test-setup/test-common.js b/test/test-setup/test-common.js
new file mode 100644
index 0000000..e41fd77
--- /dev/null
+++ b/test/test-setup/test-common.js
@@ -0,0 +1,23 @@
+import Puppeteer from 'puppeteer'
+import CompileStandalone from './compile-standalone'
+import path from 'path'
+
+const puppeteerPromise = CompileStandalone.then(() => {
+  let options = {}
+
+  if (process.env['THIS_IS_ON_TRAVIS_AND_SANDBOX_IS_NOT_ALLOWED'] === 'true') {
+    options.args = ['--no-sandbox', '--disable-setuid-sandbox']
+  }
+
+  return Puppeteer.launch(options)
+})
+
+export function getPage (p) {
+  return async () => {
+    p(await puppeteerPromise.then(browser => browser.newPage()))
+  }
+}
+
+export async function loadFile (page, relpath, options) {
+  return page.goto('file:///' + path.join(__dirname, '../', relpath), options)
+}
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..48dcd81
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,53 @@
+/* vim: set softtabstop=2 shiftwidth=2 expandtab : */
+const webpack = require('webpack');
+const path = require('path')
+
+const baseConfig = {
+  entry: [
+    path.resolve('./src/main.js')
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: { target: 'node' }
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: [
+          /node_modules/,
+        ]
+      },
+      {
+        test: /\.(png|jpg|gif)$/,
+        use: [{
+          loader: 'file-loader?name=[name].[ext]?[hash]',
+        }]
+      },
+    ],
+  },
+  mode: process.env.NODE_ENV || 'development'
+}; /* baseConfig */
+
+/**
+ * Web config uses a global Vue and Lodash object.
+ * */
+const webConfig = {
+  ...baseConfig,
+  externals: {
+    vue: 'Vue',
+    'marker-clusterer-plus': 'MarkerClusterer'
+  },
+  output: {
+  	path: path.resolve(__dirname, 'dist'),
+    filename: "vue-google-maps.js",
+    library: ["VueGoogleMaps"],
+    libraryTarget: "umd"
+  }
+}
+
+module.exports = [
+  webConfig
+];