Add info window support

components/Marker.vue

@@ -1,11 +1,18 @@
 <template>
-  <div>marker</div>
+  <div>
+    <slot>marker</slot>
+    <div ref="commentContainerRef" v-if="defaultSlot" :is="defaultSlot">
+      <component :is="defaultSlot"></component>
+    </div>
+  </div>
+
 </template>
 
 <script>
-import { inject } from "vue";
+import { inject, ref } from "vue";
 import {fitMapToMarkers} from "@fawmi/vue-google-maps/utils/center-markers";
 
+const commentContainerRef = ref(null);
 export default {
   props: {
     geoCoordinates: {
@@ -17,7 +24,7 @@ export default {
       default: false
     }
   },
-  setup(props) {
+  setup(props, { slots }) {
     const mapPromise = inject(
         "mapPromise"
     );
@@ -25,8 +32,7 @@ export default {
     if (mapPromise) {
       mapPromise.then((googleMap) => {
         const infoWindow = new google.maps.InfoWindow();
-
-        props.geoCoordinates.forEach(geoCoordinate=> {
+        props.geoCoordinates.forEach( geoCoordinate => {
           let marker = new google.maps.Marker({
             position: new google.maps.LatLng(
                 geoCoordinate.lat,
@@ -36,8 +42,10 @@ export default {
           });
 
           marker.addListener("click", (event) => {
-            infoWindow.setContent(`hallo`);
+            if (slots.default) {
+              infoWindow.setContent(commentContainerRef.value.innerHTML);
               infoWindow.open(googleMap, marker);
+            }
           });
         });
 
@@ -47,7 +55,10 @@ export default {
       });
     }
 
-    return {};
+    return {
+      defaultSlot: slots.default,
+      commentContainerRef
+    };
   }
 };
 </script>

docs/src/components/infow-window.md

@@ -0,0 +1,35 @@
+# Info Window
+
+## Create
+
+You can create info window by passing custom HTML or Vue components as the child of `Marker` component. 
+```vue
+  <GoogleMap>
+    <Marker
+        :geoCoordinates="[
+          {
+            lat: 51.2432981,
+            lng: 6.7950981
+          }
+      ]"
+    >
+    <div>I am info window. I appear, when you click a marker</div>
+  </Marker>
+  </GoogleMap>
+```
+
+## Center markers automatically
+To center markers so that all the markers are visible, use:
+```vue
+  <GoogleMap>
+    <Marker
+        :centerAutomatically="false"
+        :geoCoordinates="[
+          {
+            lat: 51.2432981,
+            lng: 6.7950981
+          }
+      ]"
+    />
+  </GoogleMap>
+```