Initial commit

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>