diff --git a/components/Map.vue b/components/Map.vue index 4bd0a84..815c1f1 100644 --- a/components/Map.vue +++ b/components/Map.vue @@ -23,14 +23,16 @@ export default { style: { default: [] }, + disableDefaultUI: { + type: Boolean, + }, options: { zoomControl: true, - mapTypeControl: false, - scaleControl: false, - streetViewControl: false, - rotateControl: false, + mapTypeControl: true, + scaleControl: true, + streetViewControl: true, + 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 { } }; - - diff --git a/docs/src/.vuepress/components/Foo/Bar.vue b/docs/src/.vuepress/components/Foo/Bar.vue deleted file mode 100755 index 7ee8286..0000000 --- a/docs/src/.vuepress/components/Foo/Bar.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/docs/src/.vuepress/components/OtherComponent.vue b/docs/src/.vuepress/components/OtherComponent.vue deleted file mode 100755 index 1d97c7c..0000000 --- a/docs/src/.vuepress/components/OtherComponent.vue +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/docs/src/.vuepress/components/demo-component.vue b/docs/src/.vuepress/components/demo-component.vue deleted file mode 100755 index 7d49de7..0000000 --- a/docs/src/.vuepress/components/demo-component.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/docs/src/components/map.md b/docs/src/components/map.md index 7638864..1a6cd18 100755 --- a/docs/src/components/map.md +++ b/docs/src/components/map.md @@ -2,30 +2,40 @@ ## Install -to install it via NPM -```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 +This is the base Map component. If no props are provided, it shows an empty map component with default controls. ```javascript -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') - + ``` + +## 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 + +``` + +## Disable ui elements +You can disable all ui components at once +```javascript + +``` +You can also disable specific UI components + +```vue + +``` \ No newline at end of file