- Adding min-zoom to the map object (we already have max-zoom)

- Adding the details to the readme file

docs/src/components/map.md

@@ -104,6 +104,22 @@ You can also disable specific UI components:
 />
 ```
 
+## Max and Min Zoom
+
+You can set the maximum and minimum zoom levels for the map:
+
+```html
+<GMapMap
+  :center="{lat: 51.093048, lng: 6.842120}"
+  :zoom="7"
+  :maxZoom="10"
+  :minZoom="5" />
+```
+
+- Max zoom specifies how far the user can zoom in, 18-20 is normally the max.
+- Min zoom is how far they can zoom out, 0-3 is normally the min.
+
+
 ## Access Google Maps instance
 
 You can easily access the Map instance by accessing `ref` in your component:

src/components/map.vue

@@ -36,6 +36,12 @@ const props = {
     type: Number,
     noBind: true,
   },
+  minZoom: {
+    required: false,
+    twoWay: true,
+    type: Number,
+    noBind: true,
+  },
   heading: {
     type: Number,
     twoWay: true,

src/main.js

@@ -17,8 +17,10 @@ import buildComponent from './components/build-component'
 import MountableMixin from './utils/mountableMixin'
 import { Env } from './utils/env'
 let GMapApi = null
+let googleMapsObject = null
 
 export {
+  googleMapsObject,
   loadGMapApi,
   Marker,
   Polyline,
@@ -82,6 +84,7 @@ function makeGMapApiPromiseLazy(options) {
   // Things to do once the API is loaded
   function onApiLoaded() {
     GMapApi.gmapApi = {}
+    googleMapsObject = window.google
     return window.google
   }