From 664dba173b9941c80750a8a5998de6185284c9aa Mon Sep 17 00:00:00 2001
From: Fawad Mirzad <mirzad@arndtteunissen.de>
Date: Sat, 13 Feb 2021 17:53:02 +0100
Subject: [PATCH] Update readme

---
 README.md | 147 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 readme.md |  46 -----------------
 2 files changed, 146 insertions(+), 47 deletions(-)
 delete mode 100644 readme.md

diff --git a/README.md b/README.md
index e83ca96..0232d6b 100644
--- a/README.md
+++ b/README.md
@@ -41,4 +41,149 @@ app.use(VueGoogleMaps, {
       :center="{lat: 51.093048, lng: 6.842120}"
       :zoom="7"
       map-type-id="terrain"
-  
\ No newline at end of file
+      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.
diff --git a/readme.md b/readme.md
deleted file mode 100644
index 49110ff..0000000
--- a/readme.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# 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 
-
-