vue2-google-maps custom control

README.md

Usage example

<GmapMap
  ref="map"
  style="..."
  :center="..."
  :zoom="..."
  :options="..."
>
  <CustomControl position="TOP_CENTER">
    <button @click="method">Example</button>
  </CustomControl>
</GmapMap>

Prop position:

• is optional
• defaults to "TOP_CENTER"
• must be a string as in control positions.

References

• https://developers.google.com/maps/documentation/javascript/controls#CustomControls
• https://www.npmjs.com/package/vue2-google-maps#adding-your-own-components

GMapCustomControl.vue

<template>
  <div :id="id">
    <slot>
      CustomControl
    </slot>
  </div>
</template>

<script>
import { MapElementFactory } from 'vue2-google-maps';

class CustomControl {
  constructor({ map, position, id }) {
    this.map = map;
    this.position = position;
    this.id = id;
  }
  setOptions() {}
}

const GMapCustomControl = MapElementFactory({
  name: 'customControl',
  ctr: () => CustomControl,
  events: [],
  mappedProps: {
    options: { type: Object },
  },
  props: {
    position: { type: String, default: 'TOP_CENTER' },
    id: { type: String, default: (Date.now().toString()) }
  },
  beforeCreate(options) {
    // eslint-disable-next-line no-param-reassign
    options.position = this.position;
    options.id = this.id;
  },
  afterCreate({ map, position, id }, opts) {
    const element = document.getElementById(id);
    const pos = google.maps.ControlPosition[position];
    map.controls[pos].push(element);
  },
});

export default {
  extends: GMapCustomControl,
};
</script>