feat(docs): update and improve documentation

I also add a new section to document the API of every component fo the plugin
diegoazh · Nov 23, 2021 · f3f999d · f3f999d
1 parent c2df328
commit f3f999d
Show file tree

Hide file tree

Showing 49 changed files with 635 additions and 23,557 deletions.
diff --git a/packages/documentation/docs/.vuepress/components/eg-basic-autocomplete.vue b/packages/documentation/docs/.vuepress/components/eg-basic-autocomplete.vue
@@ -59,8 +59,6 @@ export default {
     setPlace(place) {
       if (!place) return
 
-      console.log(place)
-
       this.latLng = {
         lat: place.geometry.location.lat(),
         lng: place.geometry.location.lng(),

diff --git a/packages/documentation/docs/.vuepress/components/eg-basic-marker-cluster.vue b/packages/documentation/docs/.vuepress/components/eg-basic-marker-cluster.vue
@@ -2,38 +2,48 @@
   <div>
     <gmap-map :center="center" :zoom="7" style="width: 100%; height: 500px">
       <gmap-cluster>
-        <gmap-marker v-for="(m, index) in markers"
+        <gmap-marker
+          v-for="(m, index) in markers"
           :position="m.position"
-          :clickable="true" :draggable="true"
-          @click="center=m.position"
+          :clickable="true"
+          :draggable="true"
+          @click="center = m.position"
           :key="index"
-          ></gmap-marker>
+        ></gmap-marker>
       </gmap-cluster>
     </gmap-map>
   </div>
 </template>
 
 <script>
+import { components } from "gmap-vue";
+
 export default {
-  name: 'eg-basic-marker-cluster',
-  data () {
+  name: "eg-basic-marker-cluster",
+  data() {
     return {
       center: {
         lat: 10.0,
         lng: 10.0
       },
-      markers: [{
-        position: {
-          lat: 10.0,
-          lng: 10.0
-        }
-      }, {
-        position: {
-          lat: 11.0,
-          lng: 11.0
+      markers: [
+        {
+          position: {
+            lat: 10.0,
+            lng: 10.0
+          }
+        },
+        {
+          position: {
+            lat: 11.0,
+            lng: 11.0
+          }
         }
-      }]
-    }
+      ]
+    };
   },
-}
+  components: {
+    "gmap-cluster": components.Cluster
+  }
+};
 </script>
diff --git a/packages/documentation/docs/.vuepress/components/eg-circle.vue b/packages/documentation/docs/.vuepress/components/eg-circle.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <gmap-map
+      :center="center"
+      :zoom="4"
+      style="width: 100%; height: 500px"
+      ref="map"
+    >
+      <gmap-circle
+        v-if="radius"
+        :editable="editable"
+        :draggable="draggable"
+        :radius="radius"
+        :center="circleCenter"
+        :options="options"
+        ref="circle"
+      >
+      </gmap-circle>
+    </gmap-map>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "eg-circle",
+  data() {
+    return {
+      center: { lat: 40.714, lng: -74.005 },
+      editable: true,
+      draggable: true,
+      population: 8405837,
+      circleCenter: { lat: 40.714, lng: -74.005 },
+      options: {
+        strokeColor: "#FF0000",
+        strokeOpacity: 0.8,
+        strokeWeight: 2,
+        fillColor: "#FF0000",
+        fillOpacity: 0.35,
+      },
+    };
+  },
+  computed: {
+    radius() {
+      return Math.sqrt(this.population) * 100;
+    },
+  },
+};
+</script>
+
+<style lang="css" scoped></style>
diff --git a/packages/documentation/docs/.vuepress/components/eg-drawing-manager-with-slot.vue b/packages/documentation/docs/.vuepress/components/eg-drawing-manager-with-slot.vue
@@ -38,6 +38,7 @@
           :polyline-options="polylineOptions"
           :polygon-options="polygonOptions"
           :shapes="shapes"
+          @update:shapes="shapes = $event"
         >
           <template v-slot="on">
             <eg-custom-drawing-toolbar

diff --git a/packages/documentation/docs/.vuepress/components/eg-drawing-manager.vue b/packages/documentation/docs/.vuepress/components/eg-drawing-manager.vue
@@ -44,6 +44,7 @@
           :circle-options="circleOptions"
           :polyline-options="polylineOptions"
           :shapes="shapes"
+          @update:shapes="shapes = $event"
         />
       </template>
     </gmap-map>

diff --git a/packages/documentation/docs/.vuepress/components/eg-kml-layer.vue b/packages/documentation/docs/.vuepress/components/eg-kml-layer.vue
@@ -1,24 +1,31 @@
 <template>
   <div>
     <gmap-map :center="center" :zoom="7" style="width: 100%; height: 500px">
-      <google-kml-layer v-for="l in kmlLayers" :url="l.url" :clickable="true"></google-kml-layer>
+      <gmap-kml-layer
+        v-for="(l, index) of kmlLayers"
+        :key="index"
+        :url="l.url"
+        :clickable="true"
+      ></gmap-kml-layer>
     </gmap-map>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'eg-kml-layer',
-  data () {
+  name: "eg-kml-layer",
+  data() {
     return {
       center: {
         lat: -19.257753,
-        lng: 146.823688
+        lng: 146.823688,
       },
-      kmlLayers: [{
-        url: 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml'
-      }],
-    }
+      kmlLayers: [
+        {
+          url: "https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml",
+        },
+      ],
+    };
   },
-}
+};
 </script>
diff --git a/packages/documentation/docs/.vuepress/components/eg-map-center-twoway.vue b/packages/documentation/docs/.vuepress/components/eg-map-center-twoway.vue
@@ -23,7 +23,9 @@
 
     <div class="flex-container">
       <div>
-        <gmap-map :center="mapCenter" :zoom="12"
+        <gmap-map
+          :center="mapCenter"
+          :zoom="12"
           ref="map"
           @center_changed="updateCenter"
           @idle="sync"
@@ -49,8 +51,8 @@ export default {
   data() {
     return {
       reportedMapCenter: {
-        lat: 1.32,
-        lng: 103.8,
+        lat: 52.201272,
+        lng: 0.118720
       },
       mapCenter: null,
       pov: {
@@ -59,8 +61,9 @@ export default {
       },
     }
   },
-  created() {
+  async created() {
     this.sync()
+    await this.$gmapApiPromiseLazy();
   },
   methods: {
     updateCenter(latLng) {

diff --git a/packages/documentation/docs/.vuepress/components/eg-map-center.vue b/packages/documentation/docs/.vuepress/components/eg-map-center.vue
@@ -4,7 +4,9 @@
       <h2>Test 1</h2>
       <small><strong>Passes if:</strong> You can pan around this map without it being snapped back to the center</small>
       <br><br>
-      <gmap-map :center="{lat: 1.38, lng: 103.8}" :zoom="12"
+      <gmap-map
+        :center="{lat: 1.38, lng: 103.8}"
+        :zoom="12"
         class="map-container">
       </gmap-map>
     </div>

diff --git a/packages/documentation/docs/.vuepress/components/eg-overlay.vue b/packages/documentation/docs/.vuepress/components/eg-overlay.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <p>Please move the map in order to see the limits of the overlay image</p>
-    <gmap-map :center="{lat: 1.38, lng: 103.8}" :zoom="12" style="width: 100%; height: 500px">
+    <gmap-map :center="{lat: 1.38, lng: 103.8}" :zoom="11" style="width: 100%; height: 500px">
       <ground-overlay
         source="/images/overlay.png"
         :bounds="{