Initial commit

.gitignore

@@ -0,0 +1 @@
+.idea

components/Circle.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>Cirlce</div>
+</template>
+
+<script >
+import { inject } from "vue";
+export default {
+  props: {
+    position: {
+      required: true
+    },
+    radius: {
+      required: true
+    }
+  },
+  setup(props) {
+    const mapPromise = inject(
+      "mapPromise"
+    );
+
+    if (mapPromise) {
+      mapPromise.then((googleMap) => {
+        new google.maps.Circle({
+          strokeColor: "red",
+          strokeOpacity: 0.8,
+          strokeWeight: 2,
+          fillColor: "#FF0000",
+          fillOpacity: 0.35,
+          map: googleMap,
+          center: new google.maps.LatLng(props.position.lat, props.position.lng),
+          radius: props.radius
+        });
+      });
+    }
+
+    return {};
+  }
+};
+</script>

components/Map.vue

@@ -0,0 +1,72 @@
+<template>
+  <div id="map" ref="mapContainer">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { Loader } from "../utils/load-google-maps";
+import { ref, provide } from "vue";
+export default {
+  props: {
+    center: {
+      required: false
+    },
+    zoom: {
+      type: Number,
+      default: 12
+    },
+    mapTypeId: {
+      default: "terrain"
+    },
+    style: {
+      default: "width: 500px; height: 300px"
+    },
+    options: {
+      zoomControl: true,
+      mapTypeControl: false,
+      scaleControl: false,
+      streetViewControl: false,
+      rotateControl: false,
+      fullscreenControl: true,
+      disableDefaultUI: false
+    }
+  },
+  setup: function(props) {
+    const mapContainer = ref(null);
+
+    const mapsLoader = new Loader({
+      apiKey: "",
+      version: "weekly",
+      libraries: [
+        "places",
+        "drawing",
+        "geometry",
+        "visualization",
+        "localContext"
+      ]
+    });
+
+    const mapPromise = mapsLoader.load().then(() => {
+      const map = new google.maps.Map(mapContainer.value, {
+        zoom: props.zoom,
+        center: new google.maps.LatLng(38.423733, 27.142826),
+        mapTypeId: "terrain"
+      });
+      return map;
+    });
+
+    provide("mapPromise", mapPromise);
+
+    return {
+      mapContainer
+    };
+  }
+};
+</script>
+
+<style>
+#map {
+  height: 80vh;
+}
+</style>

components/Marker.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>marker</div>
+</template>
+
+<script>
+import { inject } from "vue";
+
+export default {
+  props: {
+    location: {
+      required: true
+    }
+  },
+  setup(props) {
+    const mapPromise = inject(
+        "mapPromise"
+    );
+
+    if (mapPromise) {
+      mapPromise.then((googleMap) => {
+        const infoWindow = new google.maps.InfoWindow();
+
+        console.log(props.location)
+        const marker = new google.maps.Marker({
+          position: new google.maps.LatLng(
+              props.location.lat,
+              props.location.lng
+          ),
+          map: googleMap
+        });
+
+        marker.addListener("click", (event) => {
+          infoWindow.setContent(`hallo`);
+          infoWindow.open(googleMap, marker);
+        });
+      });
+    }
+
+    return {};
+  }
+};
+</script>

components/Polygon.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>marker</div>
+</template>
+
+<script >
+import { inject } from "vue";
+export default {
+  props: {
+    coords: {
+    }
+  },
+  setup(props) {
+
+    const mapPromise = inject(
+      "mapPromise"
+    );
+
+    if (mapPromise) {
+      mapPromise.then((googleMap) => {
+        const bermudaTriangle = new google.maps.Polygon({
+          paths: props.coords,
+          strokeColor: "#FF0000",
+          strokeOpacity: 0.8,
+          strokeWeight: 2,
+          fillColor: "#FF0000",
+          fillOpacity: 0.35
+        });
+        bermudaTriangle.setMap(googleMap);
+      });
+    }
+
+    return {};
+  }
+};
+</script>

components/Rectangle.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    auto complete
+  </div>
+</template>
+
+<script >
+import { inject } from "vue";
+
+export default {
+  props: {
+    bounds: {
+      required: true
+    },
+  },
+  setup(props) {
+    const mapPromise = inject(
+      "mapPromise"
+    );
+
+    if (mapPromise) {
+      mapPromise.then((map) => {
+        const rectangle = new google.maps.Rectangle({
+          strokeColor: "#FF0000",
+          strokeOpacity: 0.8,
+          strokeWeight: 2,
+          fillColor: "#FF0000",
+          fillOpacity: 0.35,
+          map,
+          bounds: props.bounds
+        });
+      });
+    }
+
+    return {};
+  }
+};
+</script>

index.js

@@ -0,0 +1,16 @@
+import GoogleMap from './components/Map'
+import Marker from './components/Marker'
+import Circle from './components/Circle'
+import Polygon from './components/Polygon'
+import Rectangle from './components/Rectangle'
+
+export default {
+    install: (app, options) => {
+        app.component('GoogleMap', GoogleMap)
+        app.component('Marker', Marker)
+        app.component('Circle', Circle)
+        app.component('Polygon', Polygon)
+        app.component('Rectangle', Rectangle)
+        app.provide('apiKey', options.apiKey)
+    }
+}

package-lock.json

@@ -0,0 +1,5 @@
+{
+  "name": "@fawmi/vue-google-maps",
+  "version": "0.0.34",
+  "lockfileVersion": 1
+}

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@fawmi/vue-google-maps",
+  "description": "Google Map components for Vue.js 3",
+  "version": "0.0.34",
+  "private": false,
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fawmi/vue-google-maps.git"
+  },
+  "author": "Fawad Mirzad",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/fawmi/vue-google-maps/issues"
+  },
+  "homepage": "https://vue-map.netlify.app",
+  "dependencies": {}
+}

utils/load-google-maps.js

@@ -0,0 +1,143 @@
+export class Loader {
+    constructor({
+                    apiKey,
+                    libraries = [],
+                    language,
+                    region,
+                    version,
+                    mapIds
+                }) {
+        // @ts-ignore
+        this.callbacks = [];
+        this.CALLBACK = "__googleMapsCallback";
+        this.version = version;
+        this.apiKey = apiKey;
+        this.libraries = libraries;
+        // @ts-ignore
+        this.language = language;
+        // @ts-ignore
+        this.region = region;
+        this.URL = 'https://maps.googleapis.com/maps/api/js';
+        // @ts-ignore
+        this.mapIds = mapIds;
+    }
+    /**
+     * CreateUrl returns the Google Maps JavaScript API script url given the [[LoaderOptions]].
+     *
+     * @ignore
+     */
+    createUrl() {
+        let url = this.URL;
+        console.log(this.URL)
+
+        url += `?callback=${this.CALLBACK}`;
+
+        if (this.apiKey) {
+            url += `&key=${this.apiKey}`;
+        }
+
+        if (this.libraries.length > 0) {
+            url += `&libraries=${this.libraries.join(",")}`;
+        }
+
+        if (this.language) {
+            url += `&language=${this.language}`;
+        }
+
+        if (this.region) {
+            url += `&region=${this.region}`;
+        }
+
+        if (this.version) {
+            url += `&v=${this.version}`;
+        }
+
+        if (this.mapIds) {
+            url += `&map_ids=${this.mapIds.join(",")}`;
+        }
+
+        return url;
+    }
+
+    /**
+     * Load the Google Maps JavaScript API script and return a Promise.
+     */
+    load() {
+        return this.loadPromise();
+    }
+
+    /**
+     * Load the Google Maps JavaScript API script and return a Promise.
+     *
+     * @ignore
+     */
+    loadPromise() {
+        return new Promise((resolve, reject) => {
+            this.loadCallback((err) => {
+                if (!err) {
+                    resolve();
+                } else {
+                    reject(err);
+                }
+            });
+        });
+    }
+
+    /**
+     * Load the Google Maps JavaScript API script with a callback.
+     */
+    loadCallback(fn) {
+        this.callbacks.push(fn);
+        this.execute();
+    }
+
+    /**
+     * Set the script on document.
+     */
+    setScript() {
+        const url = this.createUrl();
+        const script = document.createElement("script");
+
+        script.type = "text/javascript";
+        script.src = url;
+        // @ts-ignore
+        script.onerror = this.loadErrorCallback.bind(this);
+        script.defer = true;
+        script.async = true;
+        document.head.appendChild(script);
+    }
+
+    loadErrorCallback(e) {
+        this.onerrorEvent = e;
+        this.callback();
+    }
+
+    setCallback() {
+        window.__googleMapsCallback = this.callback.bind(this);
+    }
+
+    callback() {
+        this.done = true;
+        this.loading = false;
+
+        this.callbacks.forEach(cb => {
+            cb(this.onerrorEvent);
+        });
+
+        this.callbacks = [];
+    }
+
+    execute() {
+        if (this.done) {
+            this.callback();
+        } else {
+            if (this.loading) {
+                // do nothing but wait
+            } else {
+                this.loading = true;
+                this.setCallback();
+                this.setScript();
+            }
+        }
+    }
+}