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

Improve docs for markers

Browse Source
This commit is contained in:
Fawad Mirzad
2021-02-14 10:11:35 +01:00
parent bf97099979
commit c4b05d252f
3 changed files with 46 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
## Install ## Install
This is the base Map component. If no props are provided, it shows an empty map component with default controls. This is the base Map component. If no props are provided, it shows an empty map component with default controls.
```javascript ```javascript
<GoogleMap /> <GoogleMap />
@@ -19,7 +19,7 @@ You can generate custom map styles at [https://mapstyle.withgoogle.com/](https:
``` ```
## Disable ui elements ## Disable ui elements
You can disable all ui components at once You can disable all ui components at once
```javascript ```javascript
<GoogleMap <GoogleMap
:disableDefaultUI="true" :disableDefaultUI="true"
@@ -42,7 +42,7 @@ You can also disable specific UI components
## Access google maps instance ## Access google maps instance
You can easily access Map instance by injecting it in your component. You can easily access Map instance by injecting it in your component.
```javascript ```javascript
const loadMap = inject( const loadMap = inject(
@@ -74,4 +74,4 @@ export function addMyButton(map) {
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv); // eslint-disable-line no-undef map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv); // eslint-disable-line no-undef
} }
``` ```

67
docs/src/components/marker.md
View File

@@ -1,34 +1,49 @@
# Marker # Marker
## Install With a marker, you can show specific locations on the map
With marker you can show specific locations on the map
```vue ```vue
<GoogleMap> <template>
<Marker <GmapMap>
:geoCoordinates="[ <GmapMarker
{ :key="index"
lat: 51.2432981, v-for="(m, index) in markers"
lng: 6.7950981
}
]"
/> />
</GoogleMap> </GmapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
markers: [
{
position: {
lat: 51.093048, lng: 6.842120
},
}
]
}
},
}
</script>
``` ```
## Center markers automatically ## Enable/Disable events
To center markers so that all the markers are visible, use: You can enable or disable map events by passing props.
```vue ```vue
<GoogleMap <template>
:centerGeoCoordinates="geoCoordinates"> <GmapMap
<Marker ref="myMarker"
:centerAutomatically="false" >
:geoCoordinates="[ <GmapMarker
{ :key="index"
lat: 51.2432981, v-for="(m, index) in markers"
lng: 6.7950981 :position="m.position"
} :clickable="true"
]" :draggable="true"
/> />
</GoogleMap> </GmapMap>
``` </template>
```

2
package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "@fawmi/vue-google-maps", "name": "@fawmi/vue-google-maps",
"description": "Google Map components for Vue.js 3", "description": "Google Map components for Vue.js 3",
"version": "0.7.0", "version": "0.7.1",
"private": false, "private": false,
"main": "src/main.js", "main": "src/main.js",
"keywords": [ "keywords": [