Commit d31bff5a authored by Fawad Mirzad's avatar Fawad Mirzad
Browse files

Update docs

parent c4b05d25

docs/src/components/info-window.md

+5 −8
Original line number Diff line number Diff line 
# Info Window



## Create



You can create info window by passing custom HTML or Vue components as the child of `Marker` component.

```vue

  <GoogleMap>

    <Marker

  <GmapMap>

    <GmapMarker

        :geoCoordinates="[

          {

            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>

  </Marker>

  </GoogleMap>

  </GmapMarker>

  </GmapMap>

```



## Center markers automatically

docs/src/components/map.md

+14 −18
Original line number Diff line number Diff line
@@ -4,31 +4,31 @@ 


This is the base Map component. If no props are provided, it shows an empty map component with default controls.



```javascript

  <GoogleMap />

```vue

    <GmapMap />

```



## Provide your own style

You can provide custom map styling as prop.



You can generate custom map styles at  [https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/)

```javascript

  <GoogleMap

```vue

  <GmapMap

      :style="mapStyles"

  />

```



## Disable ui elements

You can disable all ui components at once

```javascript

  <GoogleMap

```vue

  <GmapMap

      :disableDefaultUI="true"

  />

```

You can also disable specific UI components



```vue

  <GoogleMap

  <GmapMap

      :options="{

                      zoomControl: true,

                      mapTypeControl: true,
@@ -42,19 +42,15 @@ You can also disable specific UI components 




## Access google maps instance

You can easily access Map instance by injecting it in your component.



```javascript

    const loadMap = inject(

        "mapPromise"

    );

You can easily access Map instance by accessing map ref in your component.



    loadMap.then(map=> {

        console.log( {map})

      })

```vue

<GmapMap

  ref="myMapRef"

  :disableDefaultUI="true"

/>

```





## Add custom button

You can use the map instance to add custom buttons to your map

```js