Commit 67413ba7 authored by Fawad Mirzad's avatar Fawad Mirzad
Browse files

Update docs

parent 9fc2b36f

docs/src/.vuepress/config.js

+3 −22
Original line number Diff line number Diff line 
const { description } = require('../../package.json')



module.exports = {

  /**

   * Ref：https://v1.vuepress.vuejs.org/config/#title

   */

  title: 'Vue 3 Google maps',

  /**

   * Ref：https://v1.vuepress.vuejs.org/config/#description

   */

  description: description,

  base: '/',

  /**

   * Extra tags to be injected to the page HTML `<head>`

   *

   * ref：https://v1.vuepress.vuejs.org/config/#head

   */

  head: [

    ['meta', { name: 'theme-color', content: '#000' }],

    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],

    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }]

  ],



  /**

   * Theme configuration, here is the default theme configuration for VuePress.

   *

   * ref：https://v1.vuepress.vuejs.org/theme/default-theme-config.html

   */

  themeConfig: {

    repo: '',

    repo: 'fawmi/vue-google-maps',

    editLinks: false,

    docsDir: '',

    editLinkText: '',

    docsDir: 'docs',

    editLinkText: 'Edit on github',

    lastUpdated: false,

    logo: '/assets/logo.jpg',

    nav: [

docs/src/index.md

+69 −14
Original line number Diff line number Diff line 
---

home: true

heroImage: 'assets/logo.jpg'

tagline: Google maps components for Vue.js

actionText: Quick Start →

tagline: Vue 3 Google maps components

actionText: Read Docs →

actionLink: /docs/

features:

- title: Lots of utilities

  details: Center markers, add Cluster, add custom buttons, and a lot more with just props

- title: Supports most maps components

  details: Most common Google map Components are implemented and are reactive out of box.

- title: Well documented

  details: All the components come with documentations and examples, making it extremely easy to use.

- title: Well maintained

  details: We heavily rely on this library in workplace. So this library is actively developed and improved.

- title: Well tested

  details: The library is used in production in many apps and comes with automated test, more automated test is coming.

footer: Made by Fawad Mirzad with ❤️

---





## Installation

You can install it using npm

```

npm install -S @fawmi/vue-google-maps

```



## Basic usage

You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).



### Configure Vue to use the Components



In your `main.js` or inside a Nuxt plugin:



```js

import { createApp } from 'vue'

import * as VueGoogleMaps from '@fawmi/vue-google-maps'



const app = createApp(App);

app.use(VueGoogleMaps, {

    load: {

        key: 'YOUR_API_KEY_COMES_HERE',

    },

}).mount('#app')



```

### Use it anywhere in your components

```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>

```

readme.md

deleted100644 → 0
+0 −189
Original line number Diff line number Diff line 
# Google maps Components for Vue.js 3



Set of mostly used Google Maps components for Vue.js.



#### Why this library exists?

We heavily use Google Maps in our projects, so I wanted to have a well maintained Google Maps library.



## Documentation

Checkout https://vue-map.netlify.app for a detailed documentation



## Installation

You can install it using npm

```

npm install -S @fawmi/vue-google-maps

```



## Basic usage

You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).



### Configure Vue to use the Components



In your `main.js` or inside a Nuxt plugin:



```js

import { createApp } from 'vue'

import * as VueGoogleMaps from '@fawmi/vue-google-maps'



const app = createApp(App);

app.use(VueGoogleMaps, {

    load: {

        key: 'YOUR_API_KEY_COMES_HERE',

    },

}).mount('#app')



```

## Use it anywhere in your components



```vue

<template>

  <GmapMap

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

      :zoom="7"

      map-type-id="terrain"

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

  >

  </GmapMap>

</template>



<script >

export default {

  name: 'App',

  data() {

    return {

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

    }

  }

}

</script>

```



### Markers



If you need to gain access to the `Map` instance (e.g. to call `panToBounds`, `panTo`):

```vue

<template>

  <GmapMap

      :center="center"

      :zoom="7"

      map-type-id="terrain"

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

  >

    <GmapMarker

        :key="index"

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

        :position="m.position"

        :clickable="true"

        :draggable="true"

        @click="center=m.position"

    />

  </GmapMap>

</template>

<script>

export default {

  name: 'App',

  data() {

    return {

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

      markers: [

        {

          position: {

            lat: 51.093048, lng: 6.842120

          },

        }

      ]

    }

  }

}

```

### Cluster

If you have too many markers, it is helpfull to cluster markers. You can easily cluster maps by wrapping your markers with 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

      ]

    }

  }

}

```

If you need to gain access to the `google` object, you can access it by getting ref of the map object.

```vue

<template>

  <GmapMarker ref="myMarker"

    />

</template>

<script>

import {gmapApi} from '@fawmi/vue-google-maps'



export default {

  mounted() {

    console.log(this.$refs.myMarker)

  }

}

</script>

```

### Map options

You can pass Map options using options property:



See [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) for a complete list of available options.

 ```vue

 <GmapMap

  :options="{

    zoomControl: true,

    mapTypeControl: false,

    scaleControl: false,

    streetViewControl: false,

    rotateControl: false,

    fullscreenControl: true,

    disableDefaultUi: false

  }"

>

</GmapMap>

```



Add region and language localization:



Example for [Localization](https://developers.google.com/maps/documentation/javascript/localization):

```vue

Vue.use(VueGoogleMaps, {

  load: {

    region: 'VI',

    language: 'vi',

  },

})

```



## Contributions

The best way to contribute is to report reproducible bugs, but feature requests and improvement suggestions are always welcome too. And definitely bug fixes and PR are welcome.