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

Update docs

Browse Source
This commit is contained in:
Fawad Mirzad
2021-02-14 10:16:55 +01:00
parent c4b05d252f
commit d31bff5ab7
2 changed files with 19 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/src/components/info-window.md
View File

@@ -1,11 +1,8 @@
# Info Window # Info Window
You can create info window by passing custom HTML or Vue components as the child of `Marker` component.
## Create
You can create info window by passing custom HTML or Vue components as the child of `Marker` component.
```vue ```vue
<GoogleMap> <GmapMap>
<Marker <GmapMarker
:geoCoordinates="[ :geoCoordinates="[
{ {
lat: 51.2432981, lat: 51.2432981,
@@ -14,8 +11,8 @@ You can create info window by passing custom HTML or Vue components as the child
]" ]"
> >
<div>I am info window. I appear, when you click a marker</div> <div>I am info window. I appear, when you click a marker</div>
</Marker> </GmapMarker>
</GoogleMap> </GmapMap>
``` ```
## Center markers automatically ## Center markers automatically

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

@@ -4,31 +4,31 @@
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 ```vue
<GoogleMap /> <GmapMap />
``` ```
## Provide your own style ## Provide your own style
You can provide custom map styling as prop. You can provide custom map styling as prop.
You can generate custom map styles at [https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/) You can generate custom map styles at [https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/)
```javascript ```vue
<GoogleMap <GmapMap
:style="mapStyles" :style="mapStyles"
/> />
``` ```
## Disable ui elements ## Disable ui elements
You can disable all ui components at once You can disable all ui components at once
```javascript ```vue
<GoogleMap <GmapMap
:disableDefaultUI="true" :disableDefaultUI="true"
/> />
``` ```
You can also disable specific UI components You can also disable specific UI components
```vue ```vue
<GoogleMap <GmapMap
:options="{ :options="{
zoomControl: true, zoomControl: true,
mapTypeControl: true, mapTypeControl: true,
@@ -36,25 +36,21 @@ You can also disable specific UI components
streetViewControl: true, streetViewControl: true,
rotateControl: true, rotateControl: true,
fullscreenControl: true, fullscreenControl: true,
}" }"
/> />
``` ```
## 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 accessing map ref in your component.
```javascript ```vue
const loadMap = inject( <GmapMap
"mapPromise" ref="myMapRef"
); :disableDefaultUI="true"
/>
loadMap.then(map=> {
console.log( {map})
})
``` ```
## Add custom button ## Add custom button
You can use the map instance to add custom buttons to your map You can use the map instance to add custom buttons to your map
```js ```js