Update readme

README.md

@@ -41,4 +41,149 @@ app.use(VueGoogleMaps, {
       :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.