From 74dc164c816166aaf82018afb5d8c16bd5558201 Mon Sep 17 00:00:00 2001
From: Fawad Mirzad <mirzad@arndtteunissen.de>
Date: Wed, 27 Jan 2021 12:33:33 +0100
Subject: [PATCH] Add info window component

---
 components/InfoWindow.vue |  3 +++
 components/Marker.vue     | 17 ++++++++++++-----
 index.js                  |  2 ++
 3 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 components/InfoWindow.vue

diff --git a/components/InfoWindow.vue b/components/InfoWindow.vue
new file mode 100644
index 0000000..5ae3c51
--- /dev/null
+++ b/components/InfoWindow.vue
@@ -0,0 +1,3 @@
+<template>
+  <slot></slot>
+</template>
\ No newline at end of file
diff --git a/components/Marker.vue b/components/Marker.vue
index d7e224b..41ac159 100644
--- a/components/Marker.vue
+++ b/components/Marker.vue
@@ -1,9 +1,11 @@
 <template>
-  <div>marker</div>
+  <div ref="markerRef" >
+    <slot></slot>
+  </div>
 </template>
 
 <script>
-import { inject } from "vue";
+import {inject, ref} from "vue";
 
 export default {
   props: {
@@ -19,6 +21,8 @@ export default {
     }
   },
   setup(props) {
+    const markerRef = ref();
+
     const mapPromise = inject(
         "mapPromise"
     );
@@ -26,8 +30,6 @@ export default {
     if (mapPromise) {
       mapPromise.then((googleMap) => {
         const infoWindow = new google.maps.InfoWindow();
-        console.log(props.location.lat)
-        console.log(props.location.lng)
         const options = {
           position: new google.maps.LatLng(
               props.location.lat,
@@ -43,12 +45,17 @@ export default {
           ...options,
         });
         marker.addListener("click", (event) => {
-          infoWindow.setContent(props.infoWindow);
+          infoWindow.setContent(markerRef.value.innerHTML);
           infoWindow.open(googleMap, marker);
         });
       });
     }
 
+    return {
+      markerRef,
+    };
+
+
     return {};
   }
 };
diff --git a/index.js b/index.js
index dea00b3..f686db8 100644
--- a/index.js
+++ b/index.js
@@ -3,6 +3,7 @@ import Marker from './components/Marker'
 import Circle from './components/Circle'
 import Polygon from './components/Polygon'
 import Rectangle from './components/Rectangle'
+import InfoWindow from './components/InfoWindow'
 
 export default {
     install: (app, options) => {
@@ -11,6 +12,7 @@ export default {
         app.component('Circle', Circle)
         app.component('Polygon', Polygon)
         app.component('Rectangle', Rectangle)
+        app.component('InfoWindow', InfoWindow)
         app.provide('apiKey', options.apiKey)
         app.provide('mapIds', options.mapIds)
     }