From 16ad627d9bdd197a320f5694c42e641fe2e4f57e Mon Sep 17 00:00:00 2001
From: Fawad Mirzad <mirzad@arndtteunissen.de>
Date: Sun, 14 Feb 2021 11:12:14 +0100
Subject: [PATCH] Improve code

---
 docs/src/components/cluster.md     | 10 ++++-----
 docs/src/components/info-window.md | 24 ++++++++++----------
 docs/src/components/map.md         | 10 ++++-----
 docs/src/components/marker.md      | 12 +++++-----
 docs/src/docs/README.md            |  4 ++--
 docs/src/docs/getting-started.md   |  4 ++--
 docs/src/docs/introduction.md      |  4 ++--
 package.json                       |  2 +-
 src/main.js                        | 36 +++++++++++++-----------------
 9 files changed, 51 insertions(+), 55 deletions(-)

diff --git a/docs/src/components/cluster.md b/docs/src/components/cluster.md
index f4e19fe..dd2a9e5 100644
--- a/docs/src/components/cluster.md
+++ b/docs/src/components/cluster.md
@@ -4,14 +4,14 @@ To cluster objects you simply wrap your markers with the cluster component.
 
 ```vue
 <template>
-  <GmapMap
+  <GMapMap
       :center="center"
       :zoom="7"
       map-type-id="terrain"
       style="width: 500px; height: 300px"
   >
-    <GmapCluster>
-      <GmapMarker
+    <GMapCluster>
+      <GMapMarker
           :key="index"
           v-for="(m, index) in markers"
           :position="m.position"
@@ -19,8 +19,8 @@ To cluster objects you simply wrap your markers with the cluster component.
           :draggable="true"
           @click="center=m.position"
       />
-    </GmapCluster>
-  </GmapMap>
+    </GMapCluster>
+  </GMapMap>
 </template>
 <script>
 export default {
diff --git a/docs/src/components/info-window.md b/docs/src/components/info-window.md
index fb47f1c..80c916e 100755
--- a/docs/src/components/info-window.md
+++ b/docs/src/components/info-window.md
@@ -1,34 +1,34 @@
 # Info Window
 You can create info window by passing custom HTML or Vue components as the child of `Marker` component.
 ```vue
-  <GmapMap>
-    <GmapMarker
+  <GMapMap>
+    <GMapMarker
       :key="index"
       v-for="(m, index) in markers"
     >
-      <GmapInfoWindow>
+      <GMapInfoWindow>
         <div>I am in info window <MyComponent/>
         </div>
-      </GmapInfoWindow>
-    </GmapMarker>
-</GmapMap>
+      </GMapInfoWindow>
+    </GMapMarker>
+</GMapMap>
 ```
 
 ## Open/close info window
 You can pass `opened` prop to open and close InfoWindows.
 
 ```vue{7}
-  <GmapMap>
-    <GmapMarker
+  <GMapMap>
+    <GMapMarker
       :key="index"
       v-for="(m, index) in markers"
     >
-      <GmapInfoWindow
+      <GMapInfoWindow
         :opened="true"
       >
         <div>I am in info window <MyComponent/>
         </div>
-      </GmapInfoWindow>
-    </GmapMarker>
-</GmapMap>
+      </GMapInfoWindow>
+    </GMapMarker>
+</GMapMap>
 ```
diff --git a/docs/src/components/map.md b/docs/src/components/map.md
index 1713614..1dd9106 100644
--- a/docs/src/components/map.md
+++ b/docs/src/components/map.md
@@ -5,7 +5,7 @@
 This is the base Map component. If no props are provided, it shows an empty map component with default controls.
 
 ```vue
-    <GmapMap />
+    <GMapMap />
 ```
 
 ## Provide your own style
@@ -13,7 +13,7 @@ You can provide custom map styling as prop.
 
 You can generate custom map styles at  [https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/)
 ```vue
-  <GmapMap
+  <GMapMap
       :style="mapStyles"
   />
 ```
@@ -21,14 +21,14 @@ You can generate custom map styles at  [https://mapstyle.withgoogle.com/](https:
 ## Disable ui elements
 You can disable all ui components at once
 ```vue
-  <GmapMap
+  <GMapMap
       :disableDefaultUI="true"
   />
 ```
 You can also disable specific UI components
 
 ```vue
-  <GmapMap
+  <GMapMap
       :options="{
                       zoomControl: true,
                       mapTypeControl: true,
@@ -45,7 +45,7 @@ You can also disable specific UI components
 You can easily access Map instance by accessing map ref in your component.
 
 ```vue
-<GmapMap
+<GMapMap
   ref="myMapRef"
   :disableDefaultUI="true"
 />
diff --git a/docs/src/components/marker.md b/docs/src/components/marker.md
index 6fd77f2..f98ec0d 100644
--- a/docs/src/components/marker.md
+++ b/docs/src/components/marker.md
@@ -3,12 +3,12 @@
 With a marker, you can show specific locations on the map
 ```vue
 <template>
-  <GmapMap>
-    <GmapMarker
+  <GMapMap>
+    <GMapMarker
       :key="index"
       v-for="(m, index) in markers"
     />
-  </GmapMap>
+  </GMapMap>
 </template>
 <script>
 export default {
@@ -34,16 +34,16 @@ You can enable or disable map events by passing props.
 
 ```vue
 <template>
-  <GmapMap
+  <GMapMap
     ref="myMarker"
   >
-    <GmapMarker
+    <GMapMarker
       :key="index"
       v-for="(m, index) in markers"
       :position="m.position"
       :clickable="true"
       :draggable="true"
     />
-  </GmapMap>
+  </GMapMap>
 </template>
 ```
diff --git a/docs/src/docs/README.md b/docs/src/docs/README.md
index 6061da6..2266a50 100644
--- a/docs/src/docs/README.md
+++ b/docs/src/docs/README.md
@@ -38,13 +38,13 @@ app.use(VueGoogleMaps, {
 
 ```vue
 <template>
-  <GmapMap
+  <GMapMap
       :center="{lat: 51.093048, lng: 6.842120}"
       :zoom="7"
       map-type-id="terrain"
       style="width: 100vw; height: 900px"
   >
-  </GmapMap>
+  </GMapMap>
 </template>
 
 <script >
diff --git a/docs/src/docs/getting-started.md b/docs/src/docs/getting-started.md
index 6061da6..2266a50 100644
--- a/docs/src/docs/getting-started.md
+++ b/docs/src/docs/getting-started.md
@@ -38,13 +38,13 @@ app.use(VueGoogleMaps, {
 
 ```vue
 <template>
-  <GmapMap
+  <GMapMap
       :center="{lat: 51.093048, lng: 6.842120}"
       :zoom="7"
       map-type-id="terrain"
       style="width: 100vw; height: 900px"
   >
-  </GmapMap>
+  </GMapMap>
 </template>
 
 <script >
diff --git a/docs/src/docs/introduction.md b/docs/src/docs/introduction.md
index 6061da6..2266a50 100644
--- a/docs/src/docs/introduction.md
+++ b/docs/src/docs/introduction.md
@@ -38,13 +38,13 @@ app.use(VueGoogleMaps, {
 
 ```vue
 <template>
-  <GmapMap
+  <GMapMap
       :center="{lat: 51.093048, lng: 6.842120}"
       :zoom="7"
       map-type-id="terrain"
       style="width: 100vw; height: 900px"
   >
-  </GmapMap>
+  </GMapMap>
 </template>
 
 <script >
diff --git a/package.json b/package.json
index 27d43d0..00be498 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fawmi/vue-google-maps",
   "description": "Google Map components for Vue.js 3",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "private": false,
   "main": "src/main.js",
   "keywords": [
diff --git a/src/main.js b/src/main.js
index 64e473a..7437729 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,7 +6,7 @@ import Polygon from './components/polygon'
 import Circle from './components/circle'
 import Rectangle from './components/rectangle'
 import Marker from './components/marker.vue'
-import GmapCluster from './components/cluster.vue'
+import GMapCluster from './components/cluster.vue'
 import InfoWindow from './components/infoWindow.vue'
 import Map from './components/map.vue'
 import Autocomplete from './components/autocomplete.vue'
@@ -15,7 +15,7 @@ import MapElementMixin from './components/mapElementMixin'
 import buildComponent from './components/build-component'
 import MountableMixin from './utils/mountableMixin'
 import {Env} from "./utils/env";
-let GmapApi = null
+let GMapApi = null;
 
 export {
   loadGMapApi,
@@ -23,7 +23,7 @@ export {
   Polyline,
   Polygon,
   Circle,
-  GmapCluster,
+  GMapCluster,
   Rectangle,
   InfoWindow,
   Map,
@@ -40,7 +40,7 @@ export function install(Vue, options) {
     ...options,
   }
 
-  GmapApi = createApp({
+  GMapApi = createApp({
     data: function () {
       return { gmapApi: null }
     },
@@ -50,7 +50,7 @@ export function install(Vue, options) {
 
   // Use a lazy to only load the API when
   // a VGM component is loaded
-  let gmapApiPromiseLazy = makeGmapApiPromiseLazy(options)
+  let gmapApiPromiseLazy = makeGMapApiPromiseLazy(options)
 
   Vue.mixin({
     created() {
@@ -63,22 +63,22 @@ export function install(Vue, options) {
   Vue.$gmapApiPromiseLazy = gmapApiPromiseLazy
 
   if (options.installComponents) {
-    Vue.component('GmapMap', Map)
-    Vue.component('GmapMarker', Marker)
-    Vue.component('GmapInfoWindow', InfoWindow)
-    Vue.component('GmapCluster', GmapCluster)
-    Vue.component('GmapPolyline', Polyline)
-    Vue.component('GmapPolygon', Polygon)
-    Vue.component('GmapCircle', Circle)
-    Vue.component('GmapRectangle', Rectangle)
-    Vue.component('GmapAutocomplete', Autocomplete)
+    Vue.component('GMapMap', Map)
+    Vue.component('GMapMarker', Marker)
+    Vue.component('GMapInfoWindow', InfoWindow)
+    Vue.component('GMapCluster', GMapCluster)
+    Vue.component('GMapPolyline', Polyline)
+    Vue.component('GMapPolygon', Polygon)
+    Vue.component('GMapCircle', Circle)
+    Vue.component('GMapRectangle', Rectangle)
+    Vue.component('GMapAutocomplete', Autocomplete)
   }
 }
 
-function makeGmapApiPromiseLazy(options) {
+function makeGMapApiPromiseLazy(options) {
   // Things to do once the API is loaded
   function onApiLoaded() {
-    GmapApi.gmapApi = {}
+    GMapApi.gmapApi = {}
     return window.google
   }
 
@@ -114,7 +114,3 @@ function makeGmapApiPromiseLazy(options) {
     return lazy(() => promise)
   }
 }
-
-export function gmapApi() {
-  return GmapApi.gmapApi && window.google
-}