Add info window component

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