feat: info windows

src/components/CustomControl.vue

@@ -10,7 +10,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, watch, ref, inject, Ref, onBeforeUnmount } from "vue";
-import { apiSymbol, mapSymbol, mapWasLoadedSymbol } from "../shared/index";
+import { apiSymbol, mapSymbol, mapTilesLoadedSymbol } from "../shared/index";
 import { IControlPosition } from "../@types/index";
 
 type ControlRef = HTMLElement & { index: number };
@@ -34,13 +34,13 @@ export default defineComponent({
 
     const map = inject(mapSymbol, ref(null));
     const api = inject(apiSymbol, ref(null));
-    const mapWasLoaded = inject(mapWasLoadedSymbol, ref(false));
+    const mapTilesLoaded = inject(mapTilesLoadedSymbol, ref(false));
 
     const showContent = ref(false);
 
     // To avoid rendering the content outside the map we need to wait for the map AND the api to fully load
     const stopWatchingOnMapLoad = watch(
-      [mapWasLoaded, api, controlRef],
+      [mapTilesLoaded, api, controlRef],
       ([newMapLoadedStatus, newApi, newControlRef]) => {
         const contentRef = newControlRef as unknown as Ref<HTMLElement | null>;
         const mapLoadedStatus = newMapLoadedStatus as boolean;

src/components/GoogleMap.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, onMounted, onBeforeUnmount, watch, toRef, provide } from "vue";
-import { mapSymbol, apiSymbol, loaderInstance, mapWasLoadedSymbol } from "../shared/index";
+import { mapSymbol, apiSymbol, loaderInstance, mapTilesLoadedSymbol } from "../shared/index";
 import { Loader } from "@googlemaps/js-api-loader";
 import { IControlPosition } from "../@types/index";
 
@@ -217,11 +217,11 @@ export default defineComponent({
     const map = ref<google.maps.Map | null>(null);
     const api = ref<typeof google.maps | null>(null);
 
-    const mapWasLoaded = ref(false);
+    const mapTilesLoaded = ref(false);
 
     provide(mapSymbol, map);
     provide(apiSymbol, api);
-    provide(mapWasLoadedSymbol, mapWasLoaded);
+    provide(mapTilesLoadedSymbol, mapTilesLoaded);
 
     const resolveOptions = (): google.maps.MapOptions => {
       const options: google.maps.MapOptions = { ...props };
@@ -243,7 +243,7 @@ export default defineComponent({
         rotateControlOptions: createControlOptionsWithPosition(props.rotateControlPosition),
         streetViewControlOptions: createControlOptionsWithPosition(props.streetViewControlPosition),
         fullscreenControlOptions: createControlOptionsWithPosition(props.fullscreenControlPosition),
-        disableDefaultUI: props.disableDefaultUi
+        disableDefaultUI: props.disableDefaultUi,
       };
 
       return { ...options, ...otherOptions };
@@ -257,7 +257,7 @@ export default defineComponent({
 
         if (api && map) {
           api.event.addListenerOnce(map, "tilesloaded", () => {
-            mapWasLoaded.value = true;
+            mapTilesLoaded.value = true;
           });
           // As the watcher is imediately invoked if the api and the map was already loaded
           // the watchStopHandler wasnt created because this function has not fully executed
@@ -314,19 +314,19 @@ export default defineComponent({
     });
 
     onBeforeUnmount(() => {
-      mapWasLoaded.value = false;
+      mapTilesLoaded.value = false;
       if (map.value) api.value?.event.clearInstanceListeners(map.value);
     });
 
-    return { mapRef, ready, map, api };
+    return { mapRef, ready, map, api, mapTilesLoaded };
   },
 });
 </script>
 
 <template>
   <div>
     <div ref="mapRef" class="mapdiv" />
-    <slot />
+    <slot v-bind="{ ready, map, api, mapTilesLoaded }" />
   </div>
 </template>
 

src/components/InfoWindow.vue

@@ -0,0 +1,76 @@
+<template>
+  <div ref="infoWindowRef" v-if="hasSlotContent" v-show="mapTilesLoaded">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, watch, ref, computed, inject, onBeforeUnmount, Comment } from "vue";
+import { apiSymbol, mapSymbol, mapTilesLoadedSymbol } from "../shared/index";
+
+const infoWindowEvents = ["closeclick", "content_changed", "domready", "position_changed", "visible", "zindex_changed"];
+
+export default defineComponent({
+  props: {
+    options: {
+      type: Object as PropType<google.maps.InfoWindowOptions>,
+      required: true,
+    },
+  },
+
+  emits: infoWindowEvents,
+
+  setup(props, { slots, emit }) {
+    let _infoWindow: google.maps.InfoWindow;
+    const infoWindow = ref<google.maps.InfoWindow>();
+    const infoWindowRef = ref<HTMLElement>();
+
+    const map = inject(mapSymbol, ref(null));
+    const api = inject(apiSymbol, ref(null));
+    const mapTilesLoaded = inject(mapTilesLoadedSymbol, ref(false));
+
+    const hasSlotContent = computed(() => slots.default?.().some((vnode) => vnode.type !== Comment));
+
+    watch(
+      [map, () => props.options, mapTilesLoaded],
+      ([_, options, newMapTilesLoaded], [oldMap, oldOptions, oldMapTilesLoaded]) => {
+        const checkIfChanged = JSON.stringify(options) !== JSON.stringify(oldOptions) || map.value !== oldMap;
+
+        if (map.value && api.value && (checkIfChanged || (newMapTilesLoaded && !oldMapTilesLoaded))) {
+          if (_infoWindow) {
+            _infoWindow.setOptions({
+              ...options,
+              content: hasSlotContent.value ? infoWindowRef.value : options.content,
+            });
+
+            if (!hasSlotContent.value || mapTilesLoaded.value) _infoWindow.open({ map: map.value });
+          } else {
+            infoWindow.value = _infoWindow = new api.value.InfoWindow({
+              ...options,
+              content: hasSlotContent.value ? infoWindowRef.value : options.content,
+            });
+
+            if (!hasSlotContent.value || mapTilesLoaded.value) _infoWindow.open({ map: map.value });
+
+            infoWindowEvents.forEach((event) => {
+              _infoWindow?.addListener(event, (e: unknown) => emit(event, e));
+            });
+          }
+        }
+      },
+      {
+        immediate: true,
+      }
+    );
+
+    onBeforeUnmount(() => {
+      if (_infoWindow) {
+        api.value?.event.clearInstanceListeners(_infoWindow);
+        _infoWindow.close();
+      }
+    });
+
+    return { infoWindow, infoWindowRef, hasSlotContent, mapTilesLoaded };
+  },
+});
+</script>

src/components/index.ts

@@ -5,3 +5,4 @@ export { default as Polygon } from "./Polygon";
 export { default as Rectangle } from "./Rectangle";
 export { default as Circle } from "./Circle";
 export { default as CustomControl } from "./CustomControl.vue";
+export { default as InfoWindow } from "./InfoWindow.vue";

src/shared/index.ts

@@ -7,7 +7,7 @@ export const apiSymbol: InjectionKey<Ref<typeof google.maps | null>> = Symbol("a
  * Utilitary flag for components that need to know the map
  * was fully loaded (including its tiles) to decide their behavior
  */
-export const mapWasLoadedSymbol: InjectionKey<Ref<boolean>> = Symbol("mapwasloaded");
+export const mapTilesLoadedSymbol: InjectionKey<Ref<boolean>> = Symbol("mapTilesLoaded");
 export const loaderInstance = ref<Loader | null>(null);
 
 export const polylineEvents = [