Add info window component

components/InfoWindow.vue

@@ -0,0 +1,3 @@
+<template>
+  <slot></slot>
+</template>

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 {};
   }
 };

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)
     }