Create how-to-access-google-maps-object.md

2022-05-10 15:14:56 +02:00
parent 12da2342de
commit e5a889ffb9
1 changed files with 81 additions and 0 deletions
--- a/docs/src/examples/how-to-access-google-maps-object.md
+++ b/docs/src/examples/how-to-access-google-maps-object.md
@@ -0,0 +1,81 @@
+# How to access Google Maps object. 
+
+[Interactive example on Condesandbox](https://stackblitz.com/edit/vue-google-maps-marker-khyhfk?file=src/components/ComponentWithMap.vue)
+
+
+To access Google maps object, or do something when map is loaded, use a ref on the `GMapMap` object.
+
+
+## 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((mapObject) => {
+      console.log('map is loaded now', mapObject);
+    });
+  },
+  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>
+
+
+```