Add example for creating custom controls

2022-05-10 15:57:42 +02:00
parent a23f5453bb
commit 8296d74f45
1 changed files with 105 additions and 0 deletions
--- a/docs/src/examples/how-to-add-custom-controls.md
+++ b/docs/src/examples/how-to-add-custom-controls.md
@@ -0,0 +1,105 @@
+# How to add custom controls
+
+[Interactive example on Condesandbox](https://stackblitz.com/edit/vue-google-maps-marker-ry3zf7?file=src/components/ComponentWithMap.vue)
+
+
+To add custom controls, you can access google maps object and add controls to it, look at this example or follow the interactive example on condesandbox above. 
+
+
+## Example
+
+```bash
+<template>
+  <GMapMap
+    :center="center"
+    ref="myMapRef"
+    :zoom="10"
+    map-type-id="terrain"
+    style="width: 100vw; height: 20rem"
+  >
+    <GMapCluster :zoomOnClick="true">
+      <GMapMarker
+        :key="index"
+        v-for="(m, index) in markers"
+        :position="m.position"
+        :clickable="true"
+        :draggable="true"
+        @click="center = m.position"
+      />
+    </GMapCluster>
+  </GMapMap>
+</template>
+
+<script>
+export default {
+  mounted() {
+    this.$refs.myMapRef.$mapPromise.then((map) => {
+      // Create the DIV to hold the control and call the CenterControl()
+      // constructor passing in this DIV.
+      const centerControlDiv = document.createElement('div');
+      this.addCenterControl(centerControlDiv, map);
+      map.controls[google.maps.ControlPosition.TOP_CENTER].push(
+        centerControlDiv
+      );
+    });
+  },
+  methods: {
+    addCenterControl(controlDiv, map) {
+      const controlUI = document.createElement('div');
+
+      controlUI.innerHTML = `
+        <div style="color: white; background: red; padding: 1rem;">
+          You can click me, i can also be a vue component
+        </div>
+      `;
+
+      controlDiv.appendChild(controlUI);
+      controlUI.addEventListener('click', () => {
+        // Do what ever you want to happen on click event
+        map.setCenter({
+          lat: 53.57532,
+          lng: 10.01534,
+        });
+      });
+    },
+  },
+  data() {
+    return {
+      center: { lat: 51.093048, lng: 6.84212 },
+      markers: [
+        {
+          position: {
+            lat: 51.093048,
+            lng: 6.84212,
+          },
+        },
+        {
+          position: {
+            lat: 51.198429,
+            lng: 6.69529,
+          },
+        },
+        {
+          position: {
+            lat: 51.165218,
+            lng: 7.067116,
+          },
+        },
+        {
+          position: {
+            lat: 51.09256,
+            lng: 6.84074,
+          },
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style>
+body {
+  margin: 0;
+}
+</style>
+```