Update readme

      :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 'vue2-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.

# Vue.js google maps

vue.js 3 components for Google maps

![Node.js Package](https://github.com/fawmi/vue-google-maps/workflows/Node.js%20Package/badge.svg)  

![CodeQL](https://github.com/fawmi/vue-google-maps/workflows/CodeQL/badge.svg)

## Still in development

This repo is still in active development. Most of the components are already implemeted, but some important parts are still missing. Documentations may not be fully upto date.

## Install

to install it via NPM 

```

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

```

You can also install via Yarn

```

yarn add @fawmi/vue-google-maps

```

## Example

Here is a basic example 

```

import { createApp } from 'vue'

import googleMap from '@fawmi/vue-google-maps'

import App from './App.vue';

const googleMapOption = {

    apiKey: 'here_comes_your_api_key',

}

const app = createApp(App);

app.use(googleMap, googleMapOption)

app.mount('#app')

```

## Documentation

Checkout [https://vue-map.netlify.app](https://vue-map.netlify.app/) for a detailed documentation