Commit 16ad627d authored by Fawad Mirzad's avatar Fawad Mirzad
Browse files

Improve code

parent 880e8219

docs/src/components/cluster.md

+5 −5
Original line number Diff line number Diff line
@@ -4,14 +4,14 @@ To cluster objects you simply wrap your markers with the cluster component. 


```vue

<template>

  <GmapMap

  <GMapMap

      :center="center"

      :zoom="7"

      map-type-id="terrain"

      style="width: 500px; height: 300px"

  >

    <GmapCluster>

      <GmapMarker

    <GMapCluster>

      <GMapMarker

          :key="index"

          v-for="(m, index) in markers"

          :position="m.position"
@@ -19,8 +19,8 @@ To cluster objects you simply wrap your markers with the cluster component. 
          :draggable="true"

          @click="center=m.position"

      />

    </GmapCluster>

  </GmapMap>

    </GMapCluster>

  </GMapMap>

</template>

<script>

export default {

docs/src/components/info-window.md

+12 −12
Original line number Diff line number Diff line 
# Info Window

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

```vue

  <GmapMap>

    <GmapMarker

  <GMapMap>

    <GMapMarker

      :key="index"

      v-for="(m, index) in markers"

    >

      <GmapInfoWindow>

      <GMapInfoWindow>

        <div>I am in info window <MyComponent/>

        </div>

      </GmapInfoWindow>

    </GmapMarker>

</GmapMap>

      </GMapInfoWindow>

    </GMapMarker>

</GMapMap>

```



## Open/close info window

You can pass `opened` prop to open and close InfoWindows.



```vue{7}

  <GmapMap>

    <GmapMarker

  <GMapMap>

    <GMapMarker

      :key="index"

      v-for="(m, index) in markers"

    >

      <GmapInfoWindow

      <GMapInfoWindow

        :opened="true"

      >

        <div>I am in info window <MyComponent/>

        </div>

      </GmapInfoWindow>

    </GmapMarker>

</GmapMap>

      </GMapInfoWindow>

    </GMapMarker>

</GMapMap>

```

docs/src/components/map.md

+5 −5
Original line number Diff line number Diff line
@@ -5,7 +5,7 @@ 
This is the base Map component. If no props are provided, it shows an empty map component with default controls.



```vue

    <GmapMap />

    <GMapMap />

```



## Provide your own style
@@ -13,7 +13,7 @@ You can provide custom map styling as prop. 


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

```vue

  <GmapMap

  <GMapMap

      :style="mapStyles"

  />

```
@@ -21,14 +21,14 @@ You can generate custom map styles at [https://mapstyle.withgoogle.com/](https: 
## Disable ui elements

You can disable all ui components at once

```vue

  <GmapMap

  <GMapMap

      :disableDefaultUI="true"

  />

```

You can also disable specific UI components



```vue

  <GmapMap

  <GMapMap

      :options="{

                      zoomControl: true,

                      mapTypeControl: true,
@@ -45,7 +45,7 @@ You can also disable specific UI components 
You can easily access Map instance by accessing map ref in your component.



```vue

<GmapMap

<GMapMap

  ref="myMapRef"

  :disableDefaultUI="true"

/>

docs/src/components/marker.md

+6 −6
Original line number Diff line number Diff line
@@ -3,12 +3,12 @@ 
With a marker, you can show specific locations on the map

```vue

<template>

  <GmapMap>

    <GmapMarker

  <GMapMap>

    <GMapMarker

      :key="index"

      v-for="(m, index) in markers"

    />

  </GmapMap>

  </GMapMap>

</template>

<script>

export default {
@@ -34,16 +34,16 @@ You can enable or disable map events by passing props. 


```vue

<template>

  <GmapMap

  <GMapMap

    ref="myMarker"

  >

    <GmapMarker

    <GMapMarker

      :key="index"

      v-for="(m, index) in markers"

      :position="m.position"

      :clickable="true"

      :draggable="true"

    />

  </GmapMap>

  </GMapMap>

</template>

```

docs/src/docs/README.md

+2 −2
Original line number Diff line number Diff line
@@ -38,13 +38,13 @@ app.use(VueGoogleMaps, { 


```vue

<template>

  <GmapMap

  <GMapMap

      :center="{lat: 51.093048, lng: 6.842120}"

      :zoom="7"

      map-type-id="terrain"

      style="width: 100vw; height: 900px"

  >

  </GmapMap>

  </GMapMap>

</template>



<script >