Update docs

components/Map.vue

@@ -23,14 +23,16 @@ export default {
     style: {
       default: []
     },
+    disableDefaultUI: {
+      type: Boolean,
+    },
     options: {
       zoomControl: true,
-      mapTypeControl: false,
+      mapTypeControl: true,
-      scaleControl: false,
+      scaleControl: true,
-      streetViewControl: false,
+      streetViewControl: true,
-      rotateControl: false,
+      rotateControl: true,
       fullscreenControl: true,
-      disableDefaultUI: false
     }
   },
   setup: function(props) {
@@ -52,12 +54,25 @@ export default {
       ]
     });
 
+    let uiOptions = {}
+
+    if(props.disableDefaultUI) {
+      uiOptions = {
+        disableDefaultUI: true
+      }
+    } else {
+      uiOptions = props.options
+    }
+
+    const additionalOptions = {...props.options};
+
     const mapPromise = mapsLoader.load().then(() => {
       const map = new google.maps.Map(mapContainer.value, {
         zoom: props.zoom,
         style: props.style,
         center: new google.maps.LatLng(38.423733, 27.142826),
-        mapTypeId: "terrain"
+        mapTypeId: "terrain",
+        ...uiOptions
       });
       return map;
     });
@@ -70,9 +85,3 @@ export default {
   }
 };
 </script>
-
-<style>
-#map {
-  height: 80vh;
-}
-</style>

docs/src/.vuepress/components/Foo/Bar.vue

@@ -1,15 +0,0 @@
-<template>
-  <p class="demo">
-    {{ msg }}
-  </p>
-</template>
-
-<script>
-  export default {
-    data () {
-      return {
-        msg: 'Hello this is <Foo-Bar>'
-      }
-    }
-  }
-</script>

docs/src/.vuepress/components/OtherComponent.vue

@@ -1,3 +0,0 @@
-<template>
-  <p class="demo">This is another component</p>
-</template>

docs/src/.vuepress/components/demo-component.vue

@@ -1,15 +0,0 @@
-<template>
-  <p class="demo">
-    {{ msg }}
-  </p>
-</template>
-
-<script>
-  export default {
-    data() {
-      return {
-        msg: 'Hello this is <demo-component>'
-      }
-    }
-  }
-</script>

docs/src/components/map.md

@@ -2,30 +2,40 @@
 
 ## Install
 
-to install it via NPM 
+This is the base Map component. If no props are provided, it shows an empty map component with default controls. 
-```bash
-npm install -S @fawmi/vue-google-maps
-```
-You can also install via Yarn
-```bash
-yarn add @fawmi/vue-google-maps
-```
-
-## Example
-Here is a basic example 
 
 ```javascript
-import { createApp } from 'vue'
+  <GoogleMap />
-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')
-
 ```
+
+## Provide your own style
+You can provide custom map styling as prop.
+
+You can generate custom map styles at  [https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/)
+```javascript
+  <GoogleMap
+      :style="mapStyles"
+  />
+```
+
+## Disable ui elements
+You can disable all ui components at once 
+```javascript
+  <GoogleMap
+      :disableDefaultUI="true"
+  />
+```
+You can also disable specific UI components
+
+```vue
+  <GoogleMap
+      :options="{
+                      zoomControl: true,
+                      mapTypeControl: true,
+                      scaleControl: true,
+                      streetViewControl: true,
+                      rotateControl: true,
+                      fullscreenControl: true,
+                    }"
+  />
+```