Merge pull request #34 from NathanAP/fix-stackblitz-references

Changed all stackblitz for playcode examples.

docs/src/components/map.md

@@ -13,7 +13,7 @@ You can create a Google Map component using `GMapMap`:
 <GMapMap :center="{ lat: 51.093048, lng: 6.84212 }" :zoom="7" />
 ```
 
-Example on [stackblitz](https://stackblitz.com/edit/vue-google-maps-basic-example)
+Example on [Playcode](https://playcode.io/1041241)
 
 ## Styling your Google Maps component
 
@@ -22,15 +22,16 @@ You can generate custom map styles at [https://mapstyle.withgoogle.com/](https:/
 You can provide custom styles by providing `style` property to the `options` prop:
 
 ```html
+<script setup>
+  import { ref } from 'vue'
+
+  const center = ref({ lat: 51.093048, lng: 6.84212 })
+  const markers = ref([{ position: { lat: 51.093048, lng: 6.84212 } }])
+</script>
+
 <template>
-  <GMapMap
+  <GMapMap :center="center" :zoom="7" style="width: 500px; height: 300px">
-    :center="center"
+    <GMapCluster :maxZoom="12">
-    :options="options"
-    :zoom="10"
-    map-type-id="terrain"
-    style="width: 100vw; height: 20rem"
-  >
-    <GMapCluster :zoomOnClick="true">
       <GMapMarker
         :key="index"
         v-for="(m, index) in markers"
@@ -42,24 +43,9 @@ You can provide custom styles by providing `style` property to the `options` pro
     </GMapCluster>
   </GMapMap>
 </template>
-
-<script>
-  export default {
-    data() {
-      return {
-        center: { lat: 51.093048, lng: 6.84212 },
-        options: {
-          styles: [
-            // here comes the styles your
-          ],
-        },
-      }
-    },
-  }
-</script>
 ```
 
-Example on [stackblitz](https://stackblitz.com/edit/vue-google-maps-marker-ssnfbn?file=src/components/ComponentWithMap.vue)
+Example on [Playcode](https://playcode.io/1041245)
 
 ### Cloud-based styles with Map ID
 

docs/src/examples/how-to-access-google-maps-object.md

@@ -1,21 +1,26 @@
 # How to access Google Maps object
 
-[Interactive example on CodeSandbox](https://stackblitz.com/edit/vue-google-maps-marker-khyhfk?file=src/components/ComponentWithMap.vue)
+[Interactive example on Playcode](https://playcode.io/1041251)
 
 To access Google maps object, or do something when map is loaded, use a ref on the `GMapMap` object.
 
 ## Example
 
 ```html
+<script setup>
+  import { ref, watch } from 'vue'
+
+  const center = ref({ lat: 51.093048, lng: 6.84212 })
+  const markers = ref([{ position: { lat: 51.093048, lng: 6.84212 } }])
+
+  const myMapRef = ref(null)
+
+  watch(myMapRef, (newValue) => console.log(newValue))
+</script>
+
 <template>
-  <GMapMap
+  <GMapMap ref="myMapRef" :center="center" :zoom="7" style="width: 500px; height: 300px">
-    :center="center"
+    <GMapCluster :maxZoom="12">
-    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"
@@ -27,51 +32,4 @@ To access Google maps object, or do something when map is loaded, use a ref on t
     </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>
 ```

docs/src/examples/how-to-add-custom-controls.md

@@ -1,6 +1,6 @@
 # How to add custom controls
 
-[Interactive example on CodeSandbox](https://stackblitz.com/edit/vue-google-maps-marker-ry3zf7?file=src/components/ComponentWithMap.vue)
+[Interactive example on Playcode](https://playcode.io/1041257)
 
 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 CodeSandbox above.
 
@@ -92,10 +92,4 @@ To add custom controls, you can access google maps object and add controls to it
     },
   }
 </script>
-
-<style>
-  body {
-    margin: 0;
-  }
-</style>
 ```

docs/src/examples/how-to-open-or-close-info-window-on-event.md

@@ -1,12 +1,39 @@
 # How to open or close an info window on event
 
-[Interactive example on CodeSandbox](https://stackblitz.com/edit/vue-google-maps-marker-w4hxvd?file=src/components/ComponentWithMap.vue).
+[Interactive example on Playcode](https://playcode.io/1041264).
 
 To open or close info windows after marker click, you can modify the `:opened` prop and maintain a state variable containing ID of the opened marker.
 
 ```html
+<script setup>
+  import { ref } from 'vue'
+
+  const openedMarkerID = ref(null)
+  const center = ref({ lat: 51.093048, lng: 6.84212 })
+  const markers = ref([
+    {
+      id: 1,
+      position: {
+        lat: 51.093048,
+        lng: 6.84212,
+      },
+    },
+    {
+      id: 2,
+      position: {
+        lat: 51.198429,
+        lng: 6.69529,
+      },
+    },
+  ])
+
+  function openMarker(id) {
+    openedMarkerID.value = id
+  }
+</script>
+
 <template>
-  <GMapMap :center="center" :zoom="10" map-type-id="terrain" style="width: 100vw; height: 20rem">
+  <GMapMap :center="center" :zoom="7" style="width: 500px; height: 300px">
     <GMapMarker
       :key="index"
       v-for="(m, index) in markers"
@@ -26,39 +53,7 @@ To open or close info windows after marker click, you can modify the `:opened` p
   </GMapMap>
 </template>
 
-<script>
+<style scoped>
-  export default {
-    data() {
-      return {
-        openedMarkerID: null,
-        center: { lat: 51.093048, lng: 6.84212 },
-        markers: [
-          {
-            id: 1,
-            position: {
-              lat: 51.093048,
-              lng: 6.84212,
-            },
-          },
-          {
-            id: 2,
-            position: {
-              lat: 51.198429,
-              lng: 6.69529,
-            },
-          },
-        ],
-      }
-    },
-    methods: {
-      openMarker(id) {
-        this.openedMarkerID = id
-      },
-    },
-  }
-</script>
-
-<style>
   body {
     margin: 0;
   }

docs/src/examples/points-in-polygon.md

@@ -1,6 +1,6 @@
 # How to get if a clicked area is within polygon in Google Maps
 
-[Interactive example on CodeSandbox](https://stackblitz.com/edit/vue-google-maps-marker-fnzw4j?file=src%2Fcomponents%2FComponentWithMap.vue)
+[Interactive example on Playcode](https://playcode.io/1041268)
 
 ## Example
 

docs/src/index.md

@@ -8,13 +8,10 @@ actionLink: /docs/
 
 <div style="display: flex; align-content: center;justify-content: center;">
     <a target="_blank"
-        style="display: inline-block;
+        style="display: inline-block; font-size: 1.2rem; padding: .8rem 1.6rem; border-radius: 4px;box-sizing: border-box; border: 1px solid #000;"
-                font-size: 1.2rem;
+        href="https://playcode.io/1041241">
-                padding: .8rem 1.6rem;
+        View example
-                border-radius: 4px;
+    </a>
-                box-sizing: border-box;
-                border: 1px solid #000;"
-href="https://stackblitz.com/edit/vue-google-maps-marker?file=src%2Fcomponents%2FComponentWithMap.vue">View example</a>
 </div>
 
 ## Before starting