cnx-public/vue-google-maps-community-fork
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changed all stackblitz for playcode examples.

Browse Source
This commit is contained in:
NathanAP
2022-12-20 09:11:56 -03:00
parent 2cba776dc8
commit 7f400c6f3d
6 changed files with 61 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/src/components/map.md
View File

@@ -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
:center="center"
:options="options"
:zoom="10"
map-type-id="terrain"
style="width: 100vw; height: 20rem"
>
<GMapCluster :zoomOnClick="true">
<GMapMap :center="center" :zoom="7" style="width: 500px; height: 300px">
<GMapCluster :maxZoom="12">
<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

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

@@ -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
:center="center"
ref="myMapRef"
:zoom="10"
map-type-id="terrain"
style="width: 100vw; height: 20rem"
>
<GMapCluster :zoomOnClick="true">
<GMapMap ref="myMapRef" :center="center" :zoom="7" style="width: 500px; height: 300px">
<GMapCluster :maxZoom="12">
<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>
```

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

@@ -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>
```

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

@@ -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>
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>
<style scoped>
body {
margin: 0;
}

2
docs/src/examples/points-in-polygon.md
View File

@@ -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

11
docs/src/index.md
View File

@@ -8,13 +8,10 @@ actionLink: /docs/
<div style="display: flex; align-content: center;justify-content: center;">
<a target="_blank"
style="display: inline-block;
font-size: 1.2rem;
padding: .8rem 1.6rem;
border-radius: 4px;
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>
style="display: inline-block; font-size: 1.2rem; padding: .8rem 1.6rem; border-radius: 4px;box-sizing: border-box; border: 1px solid #000;"
href="https://playcode.io/1041241">
View example
</a>
</div>
## Before starting