Skip to content

Commit

Permalink
feat(docs): update and improve documentation
Browse files Browse the repository at this point in the history
I also add a new section to document the API of every component fo the
plugin
  • Loading branch information
diegoazh committed Nov 23, 2021
1 parent c2df328 commit f3f999d
Show file tree
Hide file tree
Showing 49 changed files with 635 additions and 23,557 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
50 changes: 50 additions & 0 deletions packages/documentation/docs/.vuepress/components/eg-circle.vue
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
:polyline-options="polylineOptions"
:polygon-options="polygonOptions"
:shapes="shapes"
@update:shapes="shapes = $event"
>
<template v-slot="on">
<eg-custom-drawing-toolbar
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
:circle-options="circleOptions"
:polyline-options="polylineOptions"
:shapes="shapes"
@update:shapes="shapes = $event"
/>
</template>
</gmap-map>
Expand Down
25 changes: 16 additions & 9 deletions packages/documentation/docs/.vuepress/components/eg-kml-layer.vue
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -49,8 +51,8 @@ export default {
data() {
return {
reportedMapCenter: {
lat: 1.32,
lng: 103.8,
lat: 52.201272,
lng: 0.118720
},
mapCenter: null,
pov: {
Expand All @@ -59,8 +61,9 @@ export default {
},
}
},
created() {
async created() {
this.sync()
await this.$gmapApiPromiseLazy();
},
methods: {
updateCenter(latLng) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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="{
Expand Down
Loading

0 comments on commit f3f999d

Please sign in to comment.