Fix center maps not working properly

docs/src/components/map.md

@@ -38,4 +38,40 @@ You can also disable specific UI components
                       fullscreenControl: true,
                     }"
   />
+```
+
+
+## Access google maps instance
+You can easily access Map instance by injecting it in your component. 
+
+```javascript
+    const loadMap = inject(
+        "mapPromise"
+    );
+
+    loadMap.then(map=> {
+        console.log( {map})
+      })
+```
+
+
+## Add custom button
+You can use the map instance to add custom buttons to your map
+```js
+export function addMyButton(map) {
+    const controlDiv = document.createElement("div");
+    const controlUI = document.createElement("button");
+    controlUI.title = "Click to zoom the map";
+    controlDiv.appendChild(controlUI);
+    const controlText = document.createElement("div");
+    controlText.innerHTML = `Center`;
+    controlUI.appendChild(controlText);
+    controlUI.style.position = "relative"
+    controlUI.style.bottom = "80px"
+    controlUI.addEventListener("click", () => {
+        map.setZoom(map.getZoom() + 1);
+    });
+
+    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv); // eslint-disable-line no-undef
+}
 ```

docs/src/components/marker.md

@@ -19,7 +19,8 @@ With marker you can show specific locations on the map
 ## Center markers automatically
 To center markers so that all the markers are visible, use:
 ```vue
-  <GoogleMap>
+  <GoogleMap
+    :centerGeoCoordinates="geoCoordinates">
     <Marker
         :centerAutomatically="false"
         :geoCoordinates="[
@@ -30,4 +31,4 @@ To center markers so that all the markers are visible, use:
       ]"
     />
   </GoogleMap>
-```
+```

docs/src/docs/getting-started.md

@@ -29,3 +29,10 @@ app.use(googleMap, googleMapOption)
 app.mount('#app')
 
 ```
+
+## Options
+apiKey is required option to load maps, you may provide following additional options if you want.
+
+###`mapIds`
+Allows you to style the map using google cloud map styling
+