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

Merge branch 'main' of https://github.com/fawmi/vue-google-maps 

# Conflicts:
#	docs/package-lock.json
parents 6ca80a73 70d4c74b

docs/src/.vuepress/config.js

+6 −5
Original line number Diff line number Diff line
@@ -47,30 +47,31 @@ module.exports = { 
      {

        title: 'Getting started',

        path: '/docs/',

        sidebarDepth: 2,

        sidebarDepth: 0,

        collapsable: false,

        children: [

          '/docs/introduction',

          '/docs/getting-started',

        ]

      },

      {

        title: 'Components',

        collapsable: false,

        path: '/components/',

        sidebarDepth: 2,

        sidebarDepth: 0,

        children: [

          '/components/introduction',

          '/components/map',

          '/components/marker',

          '/components/info-window',

          '/components/cluster',

          '/components/polygon',

          '/components/rectangle',

        ]

      },

      {

        title: 'Advanced',

        collapsable: false,

        path: '/advanced/',

        sidebarDepth: 2,

        sidebarDepth: 0,

        children: [

          '/advanced/introduction',

        ]

docs/src/components/README.md

+13 −4
Original line number Diff line number Diff line 
# List

# Components



`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.



Currently `Map`, `Marker`, `InfoWindow`,  `Polygon` and `Rectangle` are supported.

Currently `Map`, `Marker`, `InfoWindow`,  `Cluster`, `Polygon` and `Rectangle` are supported.



Other components are still under development. 

Checkout the docs page for each component to see how to use it.



[Map](./map.md)



Checkout getting started to read, how to install and use vue-google-maps
 
 No newline at end of file
 
[Marker](./marker.md)



[InfoWindow](./info-window.md)



[Cluster](./cluster.md)



[Polygon](./polygon.md)



[Rectangle](./rectangle.md)

docs/src/components/cluster.md

0 → 100644
+44 −0
Original line number Diff line number Diff line 
# Cluster

To cluster objects you simply wrap your markers with the cluster component.





```vue

<template>

  <GmapMap

      :center="center"

      :zoom="7"

      map-type-id="terrain"

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

  >

    <GmapCluster>

      <GmapMarker

          :key="index"

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

          :position="m.position"

          :clickable="true"

          :draggable="true"

          @click="center=m.position"

      />

    </GmapCluster>

  </GmapMap>

</template>

<script>

export default {

  name: 'App',

  data() {

    return {

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

      markers: [

        {

          position: {

            lat: 51.093048, lng: 6.842120

          },

        }

        , // Along list of clusters

      ]

    }

  }

}

</script>

```

docs/src/components/introduction.md

+13 −4
Original line number Diff line number Diff line 
# Component list

# Components



`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.



Currently `Map`, `Marker`, `InfoWindow`,  `Polygon` and `Rectangle` are supported.

Currently `Map`, `Marker`, `InfoWindow`,  `Cluster`, `Polygon` and `Rectangle` are supported.



Other components are still under development. 

Checkout the docs page for each component to see how to use it.



[Map](./map.md)



Checkout getting started to read, how to install and use vue-google-maps
 
 No newline at end of file
 
[Marker](./marker.md)



[InfoWindow](./info-window.md)



[Cluster](./cluster.md)



[Polygon](./polygon.md)



[Rectangle](./rectangle.md)

docs/src/components/polygon.md

0 → 100644
+2 −0
Original line number Diff line number Diff line 
# Polygon

Polygon is a simple wrapper around google's polygon component.