From 54daa72b3ca12bb2e90b0be10d3bd0bf185693eb Mon Sep 17 00:00:00 2001 From: Damian Glowala Date: Wed, 16 Oct 2024 20:52:14 +0200 Subject: [PATCH 01/15] feat(googleMaps): add composable SFCs --- eslint.config.js | 1 + package.json | 1 + pnpm-lock.yaml | 117 ++++++----------- src/runtime/components/ScriptGoogleMaps.vue | 15 ++- .../components/ScriptGoogleMapsCircle.vue | 78 ++++++++++++ .../ScriptGoogleMapsHeatmapLayer.vue | 32 +++++ .../components/ScriptGoogleMapsInfoWindow.vue | 91 ++++++++++++++ .../components/ScriptGoogleMapsMarker.vue | 119 ++++++++++++++++++ .../ScriptGoogleMapsMarkerClusterer.vue | 65 ++++++++++ .../components/ScriptGoogleMapsPolygon.vue | 75 +++++++++++ .../components/ScriptGoogleMapsPolyline.vue | 75 +++++++++++ .../components/ScriptGoogleMapsRectangle.vue | 76 +++++++++++ 12 files changed, 660 insertions(+), 85 deletions(-) create mode 100644 src/runtime/components/ScriptGoogleMapsCircle.vue create mode 100644 src/runtime/components/ScriptGoogleMapsHeatmapLayer.vue create mode 100644 src/runtime/components/ScriptGoogleMapsInfoWindow.vue create mode 100644 src/runtime/components/ScriptGoogleMapsMarker.vue create mode 100644 src/runtime/components/ScriptGoogleMapsMarkerClusterer.vue create mode 100644 src/runtime/components/ScriptGoogleMapsPolygon.vue create mode 100644 src/runtime/components/ScriptGoogleMapsPolyline.vue create mode 100644 src/runtime/components/ScriptGoogleMapsRectangle.vue diff --git a/eslint.config.js b/eslint.config.js index 44406c9a..8c20720a 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -36,6 +36,7 @@ export default createConfigForNuxt({ 'vue/no-multiple-template-root': 'off', // NOTE: Disable this style rules if stylistic is not enabled 'vue/max-attributes-per-line': 'off', + 'vue/valid-template-root': 'off', }, }) .append({ diff --git a/package.json b/package.json index 4856e9cb..52222b08 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ ] }, "dependencies": { + "@googlemaps/markerclusterer": "^2.5.3", "@nuxt/devtools-kit": "^1.5.1", "@nuxt/devtools-ui-kit": "^1.5.1", "@nuxt/kit": "^3.13.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index de5d3ce8..d74dda05 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22,6 +22,9 @@ importers: .: dependencies: + '@googlemaps/markerclusterer': + specifier: ^2.5.3 + version: 2.5.3 '@nuxt/devtools-kit': specifier: ^1.5.1 version: 1.6.0(magicast@0.3.5)(rollup@4.21.3)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3) @@ -90,7 +93,7 @@ importers: version: 3.7.0 third-party-capital: specifier: 2.3.0 - version: 3.0.0 + version: 2.3.0 ufo: specifier: ^1.5.4 version: 1.5.4 @@ -175,7 +178,7 @@ importers: version: 1.6.0(magicast@0.3.5)(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3) '@nuxt/devtools-ui-kit': specifier: ^1.6.0 - version: 1.6.0(@nuxt/devtools@1.6.0(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3))(@unocss/webpack@0.63.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1)))(@vue/compiler-core@3.5.12)(fuse.js@7.0.0)(magicast@0.3.5)(nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.5)(eslint@9.12.0(jiti@2.3.3))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(terser@5.34.1)(typescript@5.6.3)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3))(postcss@8.4.47)(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)(webpack@5.95.0(esbuild@0.23.1)) + version: 1.6.0(@nuxt/devtools@1.6.0(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3))(@unocss/webpack@0.62.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1)))(@vue/compiler-core@3.5.12)(fuse.js@7.0.0)(magicast@0.3.5)(nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.5)(eslint@9.12.0(jiti@2.3.3))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(terser@5.34.1)(typescript@5.6.3)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3))(postcss@8.4.47)(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)(webpack@5.95.0(esbuild@0.23.1)) '@nuxt/kit': specifier: ^3.13.2 version: 3.13.2(magicast@0.3.5)(rollup@4.24.0)(webpack-sources@3.2.3) @@ -205,7 +208,7 @@ importers: version: 2.13.3(ioredis@5.4.1)(magicast@0.3.5)(nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.5)(eslint@9.12.0(jiti@2.3.3))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(terser@5.34.1)(typescript@5.6.3)(vite@5.4.9(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3))(rollup@4.24.0)(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3) '@nuxt/fonts': specifier: ^0.9.2 - version: 0.10.0(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.24.0)(vite@5.4.9(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3) + version: 0.9.2(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.24.0)(vite@5.4.9(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3) '@nuxt/image': specifier: ^1.8.0 version: 1.8.1(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.24.0)(webpack-sources@3.2.3) @@ -1321,6 +1324,9 @@ packages: resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==} engines: {node: '>=14'} + '@googlemaps/markerclusterer@2.5.3': + resolution: {integrity: sha512-x7lX0R5yYOoiNectr10wLgCBasNcXFHiADIBdmn7jQllF2B5ENQw5XtZK+hIw4xnV0Df0xhN4LN98XqA5jaiOw==} + '@headlessui/tailwindcss@0.2.1': resolution: {integrity: sha512-2+5+NZ+RzMyrVeCZOxdbvkUSssSxGvcUxphkIfSVLpRiKsj+/63T2TOL9dBYMXVfj/CGr6hMxSRInzXv6YY7sA==} engines: {node: '>=10'} @@ -1509,8 +1515,8 @@ packages: peerDependencies: eslint: ^8.57.0 || ^9.0.0 - '@nuxt/fonts@0.10.0': - resolution: {integrity: sha512-VoK/rssN1PzMeQOplap8UYnbKtI6IDaI+sj5BmbCCpXRYY84gH8m+zePGRo88Mi9ujRhd1HUOXfsCvHN88iGmQ==} + '@nuxt/fonts@0.9.2': + resolution: {integrity: sha512-RMekoJh5AIaKG3tu0YaCdru3eTqNdXn6v7ggh5cdG4rWugr59HzihZ6n4C2Pkkv6nxOP4DOhxxdOwcZwXZM5vQ==} '@nuxt/icon@1.5.6': resolution: {integrity: sha512-7l99CWc/laHphSsoLikh99Hkwjv+59cwAMJ0f9eZddBV+vO7zLGWwocH/TDNjlX0IACgVoG+AfbP/p1fqlLKpg==} @@ -2360,10 +2366,6 @@ packages: resolution: {integrity: sha512-XKudKxxW8P44JvlIdS6HBpfE3qZA9rhbemy6/sb8HyZjKYjgeM9jx5yjk+9+4hXNma/KlwDXwjAqY29z0S0SrA==} engines: {node: '>=14'} - '@unocss/config@0.63.4': - resolution: {integrity: sha512-LfAzM8z0r2comUW94KaSo4JaaEZjPkvrfyVWfO/hyaXa+/xSVIkCTW7+lfWh77hrg1e2SUY1HEvIFBg9Jvb1xQ==} - engines: {node: '>=14'} - '@unocss/core@0.62.4': resolution: {integrity: sha512-Cc+Vo6XlaQpyVejkJrrzzWtiK9pgMWzVVBpm9VCVtwZPUjD4GSc+g7VQCPXSsr7m03tmSuRySJx72QcASmauNQ==} @@ -2451,11 +2453,6 @@ packages: peerDependencies: webpack: ^4 || ^5 - '@unocss/webpack@0.63.4': - resolution: {integrity: sha512-voDSHXbhmaJzYRohHHhSvKc73O3vh4F140wFrxbvPL5ujIXEfrF5ItV7y/2Kl0XHp5J6ytl6PyCsubIetsMlKw==} - peerDependencies: - webpack: ^4 || ^5 - '@vercel/nft@0.26.5': resolution: {integrity: sha512-NHxohEqad6Ra/r4lGknO52uc/GrWILXAMs1BB4401GTqww0fw1bAqzpG1XHuDO+dprg4GvsD9ZLLSsdo78p9hQ==} engines: {node: '>=16'} @@ -4467,6 +4464,9 @@ packages: jsonfile@6.1.0: resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==} + kdbush@4.0.2: + resolution: {integrity: sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==} + keygrip@1.1.0: resolution: {integrity: sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==} engines: {node: '>= 0.6'} @@ -6048,6 +6048,9 @@ packages: engines: {node: '>=16 || 14 >=14.17'} hasBin: true + supercluster@8.0.1: + resolution: {integrity: sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==} + superjson@2.2.1: resolution: {integrity: sha512-8iGv75BYOa0xRJHK5vRLEjE2H/i4lulTjzpUXic3Eg8akftYjkmQDa8JARQ42rlczXyFR3IeRoeFCc7RxHsYZA==} engines: {node: '>=16'} @@ -6166,8 +6169,8 @@ packages: thenify@3.3.1: resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==} - third-party-capital@3.0.0: - resolution: {integrity: sha512-zCrYkb4lnFTpsz0cyZ7c3q9aqQ5zX4po1Gy4utqOf8UkIV9Jx45P8ty6kpF1gLVvfkfNB36nEKv3isQhJv7Ftw==} + third-party-capital@2.3.0: + resolution: {integrity: sha512-p4rGOF4JCkI18HH3a1Vfd89Mg37TLlAsGmePBt20MA52frviYSBE6ToGOmTpqRC4EIlS5/4Owv6TpegFJUSkOg==} tiny-inflate@1.0.3: resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==} @@ -6362,9 +6365,6 @@ packages: unified@11.0.5: resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==} - unifont@0.1.3: - resolution: {integrity: sha512-PZVkmHSUTgeinSIYEJ58lEzk4FTh8wZt9rd+5EapupFQLFXqOq9OPIp+e6a3JE404duS5qgSHvfGEg+cJ42lPA==} - unimport@3.12.0: resolution: {integrity: sha512-5y8dSvNvyevsnw4TBQkIQR1Rjdbb+XjVSwQwxltpnVZrStBvvPkMPcZrh1kg5kY77kpx6+D4Ztd3W6FOBH/y2Q==} @@ -7826,6 +7826,11 @@ snapshots: '@fastify/busboy@2.1.1': {} + '@googlemaps/markerclusterer@2.5.3': + dependencies: + fast-deep-equal: 3.1.3 + supercluster: 8.0.1 + '@headlessui/tailwindcss@0.2.1(tailwindcss@3.4.14)': dependencies: tailwindcss: 3.4.14 @@ -8185,7 +8190,7 @@ snapshots: - webpack - webpack-sources - '@nuxt/devtools-ui-kit@1.6.0(@nuxt/devtools@1.6.0(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3))(@unocss/webpack@0.63.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1)))(@vue/compiler-core@3.5.12)(fuse.js@7.0.0)(magicast@0.3.5)(nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.5)(eslint@9.12.0(jiti@2.3.3))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(terser@5.34.1)(typescript@5.6.3)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3))(postcss@8.4.47)(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)(webpack@5.95.0(esbuild@0.23.1))': + '@nuxt/devtools-ui-kit@1.6.0(@nuxt/devtools@1.6.0(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3))(@unocss/webpack@0.62.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1)))(@vue/compiler-core@3.5.12)(fuse.js@7.0.0)(magicast@0.3.5)(nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.5)(eslint@9.12.0(jiti@2.3.3))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.0)(terser@5.34.1)(typescript@5.6.3)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3))(postcss@8.4.47)(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1))(vue@3.5.12(typescript@5.6.3))(webpack-sources@3.2.3)(webpack@5.95.0(esbuild@0.23.1))': dependencies: '@iconify-json/carbon': 1.2.3 '@iconify-json/logos': 1.2.3 @@ -8206,7 +8211,7 @@ snapshots: defu: 6.1.4 focus-trap: 7.6.0 splitpanes: 3.1.5 - unocss: 0.62.4(@unocss/webpack@0.63.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1)))(postcss@8.4.47)(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1)) + unocss: 0.62.4(@unocss/webpack@0.62.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1)))(postcss@8.4.47)(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1)) v-lazy-show: 0.2.4(@vue/compiler-core@3.5.12) transitivePeerDependencies: - '@unocss/webpack' @@ -8531,7 +8536,7 @@ snapshots: - supports-color - typescript - '@nuxt/fonts@0.10.0(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.24.0)(vite@5.4.9(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3)': + '@nuxt/fonts@0.9.2(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.24.0)(vite@5.4.9(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3)': dependencies: '@nuxt/devtools-kit': 1.6.0(magicast@0.3.5)(rollup@4.24.0)(vite@5.4.9(@types/node@22.7.5)(terser@5.34.1))(webpack-sources@3.2.3) '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.0)(webpack-sources@3.2.3) @@ -8541,7 +8546,7 @@ snapshots: esbuild: 0.24.0 fontaine: 0.5.0(webpack-sources@3.2.3) h3: 1.13.0 - jiti: 2.3.3 + jiti: 1.21.6 magic-regexp: 0.8.0(webpack-sources@3.2.3) magic-string: 0.30.12 node-fetch-native: 1.6.4 @@ -8550,7 +8555,6 @@ snapshots: sirv: 2.0.4 tinyglobby: 0.2.9 ufo: 1.5.4 - unifont: 0.1.3 unplugin: 1.14.1(webpack-sources@3.2.3) unstorage: 1.12.0(ioredis@5.4.1) transitivePeerDependencies: @@ -10080,14 +10084,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@unocss/config@0.63.4': - dependencies: - '@unocss/core': 0.63.4 - unconfig: 0.5.5 - transitivePeerDependencies: - - supports-color - optional: true - '@unocss/core@0.62.4': {} '@unocss/core@0.63.4': {} @@ -10317,23 +10313,6 @@ snapshots: - rollup - supports-color - '@unocss/webpack@0.63.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1))': - dependencies: - '@ampproject/remapping': 2.3.0 - '@rollup/pluginutils': 5.1.2(rollup@4.24.0) - '@unocss/config': 0.63.4 - '@unocss/core': 0.63.4 - chokidar: 3.6.0 - magic-string: 0.30.12 - tinyglobby: 0.2.9 - unplugin: 1.14.1(webpack-sources@3.2.3) - webpack: 5.95.0(esbuild@0.23.1) - webpack-sources: 3.2.3 - transitivePeerDependencies: - - rollup - - supports-color - optional: true - '@vercel/nft@0.26.5': dependencies: '@mapbox/node-pre-gyp': 1.0.11 @@ -12870,6 +12849,8 @@ snapshots: optionalDependencies: graceful-fs: 4.2.11 + kdbush@4.0.2: {} + keygrip@1.1.0: dependencies: tsscmp: 1.0.6 @@ -15379,6 +15360,10 @@ snapshots: pirates: 4.0.6 ts-interface-checker: 0.1.13 + supercluster@8.0.1: + dependencies: + kdbush: 4.0.2 + superjson@2.2.1: dependencies: copy-anything: 3.0.5 @@ -15545,7 +15530,7 @@ snapshots: dependencies: any-promise: 1.3.0 - third-party-capital@3.0.0: + third-party-capital@2.3.0: dependencies: semver: 7.6.3 @@ -15745,11 +15730,6 @@ snapshots: trough: 2.2.0 vfile: 6.0.3 - unifont@0.1.3: - dependencies: - css-tree: 3.0.0 - ohash: 1.1.4 - unimport@3.12.0(rollup@4.21.3)(webpack-sources@3.2.3): dependencies: '@rollup/pluginutils': 5.1.0(rollup@4.21.3) @@ -15909,33 +15889,6 @@ snapshots: - rollup - supports-color - unocss@0.62.4(@unocss/webpack@0.63.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1)))(postcss@8.4.47)(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1)): - dependencies: - '@unocss/astro': 0.62.4(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1)) - '@unocss/cli': 0.62.4(rollup@4.24.0) - '@unocss/core': 0.62.4 - '@unocss/postcss': 0.62.4(postcss@8.4.47) - '@unocss/preset-attributify': 0.62.4 - '@unocss/preset-icons': 0.62.4 - '@unocss/preset-mini': 0.62.4 - '@unocss/preset-tagify': 0.62.4 - '@unocss/preset-typography': 0.62.4 - '@unocss/preset-uno': 0.62.4 - '@unocss/preset-web-fonts': 0.62.4 - '@unocss/preset-wind': 0.62.4 - '@unocss/transformer-attributify-jsx': 0.62.4 - '@unocss/transformer-compile-class': 0.62.4 - '@unocss/transformer-directives': 0.62.4 - '@unocss/transformer-variant-group': 0.62.4 - '@unocss/vite': 0.62.4(rollup@4.24.0)(vite@5.4.8(@types/node@22.7.5)(terser@5.34.1)) - optionalDependencies: - '@unocss/webpack': 0.63.4(rollup@4.24.0)(webpack@5.95.0(esbuild@0.23.1)) - vite: 5.4.8(@types/node@22.7.5)(terser@5.34.1) - transitivePeerDependencies: - - postcss - - rollup - - supports-color - unplugin-ast@0.10.0(rollup@4.24.0)(webpack-sources@3.2.3): dependencies: '@antfu/utils': 0.7.10 diff --git a/src/runtime/components/ScriptGoogleMaps.vue b/src/runtime/components/ScriptGoogleMaps.vue index 3a073c5f..55dcaaff 100644 --- a/src/runtime/components/ScriptGoogleMaps.vue +++ b/src/runtime/components/ScriptGoogleMaps.vue @@ -1,7 +1,7 @@ - + + diff --git a/src/runtime/components/ScriptGoogleMapsHeatmapLayer.vue b/src/runtime/components/ScriptGoogleMapsHeatmapLayer.vue new file mode 100644 index 00000000..b10507a6 --- /dev/null +++ b/src/runtime/components/ScriptGoogleMapsHeatmapLayer.vue @@ -0,0 +1,32 @@ + + + diff --git a/src/runtime/components/ScriptGoogleMapsInfoWindow.vue b/src/runtime/components/ScriptGoogleMapsInfoWindow.vue new file mode 100644 index 00000000..99a1b2be --- /dev/null +++ b/src/runtime/components/ScriptGoogleMapsInfoWindow.vue @@ -0,0 +1,91 @@ + + + diff --git a/src/runtime/components/ScriptGoogleMapsMarker.vue b/src/runtime/components/ScriptGoogleMapsMarker.vue new file mode 100644 index 00000000..6a734723 --- /dev/null +++ b/src/runtime/components/ScriptGoogleMapsMarker.vue @@ -0,0 +1,119 @@ + + + + + diff --git a/src/runtime/components/ScriptGoogleMapsMarkerClusterer.vue b/src/runtime/components/ScriptGoogleMapsMarkerClusterer.vue new file mode 100644 index 00000000..bbef03bd --- /dev/null +++ b/src/runtime/components/ScriptGoogleMapsMarkerClusterer.vue @@ -0,0 +1,65 @@ + + + + + diff --git a/src/runtime/components/ScriptGoogleMapsPolygon.vue b/src/runtime/components/ScriptGoogleMapsPolygon.vue new file mode 100644 index 00000000..8cf605a4 --- /dev/null +++ b/src/runtime/components/ScriptGoogleMapsPolygon.vue @@ -0,0 +1,75 @@ + + + diff --git a/src/runtime/components/ScriptGoogleMapsPolyline.vue b/src/runtime/components/ScriptGoogleMapsPolyline.vue new file mode 100644 index 00000000..dccbaf96 --- /dev/null +++ b/src/runtime/components/ScriptGoogleMapsPolyline.vue @@ -0,0 +1,75 @@ + + + diff --git a/src/runtime/components/ScriptGoogleMapsRectangle.vue b/src/runtime/components/ScriptGoogleMapsRectangle.vue new file mode 100644 index 00000000..34407ae7 --- /dev/null +++ b/src/runtime/components/ScriptGoogleMapsRectangle.vue @@ -0,0 +1,76 @@ + + + From c4f49da21060eebfc4349d9a556c9022915bda40 Mon Sep 17 00:00:00 2001 From: Damian Glowala Date: Thu, 17 Oct 2024 16:11:08 +0200 Subject: [PATCH 02/15] feat: make SFC's options reactive --- src/runtime/components/ScriptGoogleMapsCircle.vue | 6 ++++++ src/runtime/components/ScriptGoogleMapsHeatmapLayer.vue | 6 ++++++ src/runtime/components/ScriptGoogleMapsInfoWindow.vue | 6 ++++++ src/runtime/components/ScriptGoogleMapsMarker.vue | 6 ++++++ src/runtime/components/ScriptGoogleMapsPolygon.vue | 6 ++++++ src/runtime/components/ScriptGoogleMapsPolyline.vue | 6 ++++++ src/runtime/components/ScriptGoogleMapsRectangle.vue | 6 ++++++ 7 files changed, 42 insertions(+) diff --git a/src/runtime/components/ScriptGoogleMapsCircle.vue b/src/runtime/components/ScriptGoogleMapsCircle.vue index 23c17f6d..675ca88f 100644 --- a/src/runtime/components/ScriptGoogleMapsCircle.vue +++ b/src/runtime/components/ScriptGoogleMapsCircle.vue @@ -43,6 +43,12 @@ whenever(() => mapContext?.map.value, (map) => { ...props.options, }) + whenever(() => props.options, (options) => { + circle?.setOptions(options) + }, { + deep: true, + }) + circleEventListeners.push(...setupCircleEventListeners(circle)) }, { immediate: true, diff --git a/src/runtime/components/ScriptGoogleMapsHeatmapLayer.vue b/src/runtime/components/ScriptGoogleMapsHeatmapLayer.vue index b10507a6..e5afc6f3 100644 --- a/src/runtime/components/ScriptGoogleMapsHeatmapLayer.vue +++ b/src/runtime/components/ScriptGoogleMapsHeatmapLayer.vue @@ -21,6 +21,12 @@ whenever(() => mapContext?.map.value && mapContext.mapsApi.value, async () => { map: mapContext!.map.value!, ...props.options, }) + + whenever(() => props.options, (options) => { + heatmapLayer?.setOptions(options) + }, { + deep: true, + }) }, { immediate: true, once: true, diff --git a/src/runtime/components/ScriptGoogleMapsInfoWindow.vue b/src/runtime/components/ScriptGoogleMapsInfoWindow.vue index 99a1b2be..5d23cfb1 100644 --- a/src/runtime/components/ScriptGoogleMapsInfoWindow.vue +++ b/src/runtime/components/ScriptGoogleMapsInfoWindow.vue @@ -50,6 +50,12 @@ whenever( ...props.options, }) + whenever(() => props.options, (options) => { + infoWindow?.setOptions(options) + }, { + deep: true, + }) + infoWindowContainer.value!.parentElement?.removeChild(infoWindowContainer.value!) infoWindowListeners.push(...setupInfoWindowEventListeners(infoWindow)) diff --git a/src/runtime/components/ScriptGoogleMapsMarker.vue b/src/runtime/components/ScriptGoogleMapsMarker.vue index 6a734723..2da3279e 100644 --- a/src/runtime/components/ScriptGoogleMapsMarker.vue +++ b/src/runtime/components/ScriptGoogleMapsMarker.vue @@ -60,6 +60,12 @@ whenever(() => mapContext?.map.value, (map) => { markerEventListeners.push(...setupMarkerEventListeners(marker)) + whenever(() => props.options, (options) => { + marker?.setOptions(options) + }, { + deep: true, + }) + if (markerClustererContext?.markerClusterer.value) { markerClustererContext.markerClusterer.value.addMarker(marker) } diff --git a/src/runtime/components/ScriptGoogleMapsPolygon.vue b/src/runtime/components/ScriptGoogleMapsPolygon.vue index 8cf605a4..d31928f4 100644 --- a/src/runtime/components/ScriptGoogleMapsPolygon.vue +++ b/src/runtime/components/ScriptGoogleMapsPolygon.vue @@ -42,6 +42,12 @@ whenever(() => mapContext?.map.value, (map) => { ...props.options, }) + whenever(() => props.options, (options) => { + polygon?.setOptions(options) + }, { + deep: true, + }) + polygonEventListeners.push(...setupPolygonEventListeners(polygon)) }, { immediate: true, diff --git a/src/runtime/components/ScriptGoogleMapsPolyline.vue b/src/runtime/components/ScriptGoogleMapsPolyline.vue index dccbaf96..d6605e27 100644 --- a/src/runtime/components/ScriptGoogleMapsPolyline.vue +++ b/src/runtime/components/ScriptGoogleMapsPolyline.vue @@ -42,6 +42,12 @@ whenever(() => mapContext?.map.value, (map) => { ...props.options, }) + whenever(() => props.options, (options) => { + polyline?.setOptions(options) + }, { + deep: true, + }) + polylineEventListeners.push(...setupPolylineEventListeners(polyline)) }, { immediate: true, diff --git a/src/runtime/components/ScriptGoogleMapsRectangle.vue b/src/runtime/components/ScriptGoogleMapsRectangle.vue index 34407ae7..e3798eb1 100644 --- a/src/runtime/components/ScriptGoogleMapsRectangle.vue +++ b/src/runtime/components/ScriptGoogleMapsRectangle.vue @@ -43,6 +43,12 @@ whenever(() => mapContext?.map.value, (map) => { }) rectangleEventListeners.push(...setupRectangleEventListeners(rectangle)) + + whenever(() => props.options, (options) => { + rectangle?.setOptions(options) + }, { + deep: true, + }) }, { immediate: true, once: true, From 5d990f846184a1eb708f1e39a02d94ff3b9ada87 Mon Sep 17 00:00:00 2001 From: Damian Glowala Date: Fri, 18 Oct 2024 16:38:05 +0200 Subject: [PATCH 03/15] fix: address reactivity issues by using `shallowRef` --- src/runtime/components/ScriptGoogleMaps.vue | 8 +++--- .../components/ScriptGoogleMapsMarker.vue | 28 +++++++++---------- .../ScriptGoogleMapsMarkerClusterer.vue | 18 ++++++------ 3 files changed, 26 insertions(+), 28 deletions(-) diff --git a/src/runtime/components/ScriptGoogleMaps.vue b/src/runtime/components/ScriptGoogleMaps.vue index 55dcaaff..7fe19f27 100644 --- a/src/runtime/components/ScriptGoogleMaps.vue +++ b/src/runtime/components/ScriptGoogleMaps.vue @@ -1,7 +1,7 @@ @@ -135,7 +135,7 @@ const options = computed(() => { }) const ready = ref(false) -const map: Ref = ref() +const map: ShallowRef = shallowRef() const mapMarkers: Ref>> = ref(new Map()) function isLocationQuery(s: string | any) { diff --git a/src/runtime/components/ScriptGoogleMapsMarker.vue b/src/runtime/components/ScriptGoogleMapsMarker.vue index 2da3279e..8db8546b 100644 --- a/src/runtime/components/ScriptGoogleMapsMarker.vue +++ b/src/runtime/components/ScriptGoogleMapsMarker.vue @@ -1,16 +1,16 @@ @@ -51,26 +51,26 @@ const emit = defineEmits<{ const mapContext = inject(MAP_INJECTION_KEY, undefined) const markerClustererContext = inject(MARKER_CLUSTERER_INJECTION_KEY, undefined) -let marker: google.maps.Marker | undefined = undefined +const marker = shallowRef(undefined) const markerEventListeners: google.maps.MapsEventListener[] = [] whenever(() => mapContext?.map.value, (map) => { - marker = new google.maps.Marker(props.options) + marker.value = new google.maps.Marker(props.options) - markerEventListeners.push(...setupMarkerEventListeners(marker)) + markerEventListeners.push(...setupMarkerEventListeners(marker.value)) whenever(() => props.options, (options) => { - marker?.setOptions(options) + marker.value?.setOptions(options) }, { deep: true, }) if (markerClustererContext?.markerClusterer.value) { - markerClustererContext.markerClusterer.value.addMarker(marker) + markerClustererContext.markerClusterer.value.addMarker(marker.value) } else { - marker.setMap(map) + marker.value.setMap(map) } }, { immediate: true, @@ -78,21 +78,21 @@ whenever(() => mapContext?.map.value, (map) => { }) onUnmounted(() => { - if (!marker) { + if (!marker.value) { return } markerEventListeners.forEach(listener => listener.remove()) if (markerClustererContext) { - markerClustererContext.markerClusterer.value?.removeMarker(marker) + markerClustererContext.markerClusterer.value?.removeMarker(marker.value) } else { - marker.setMap(null) + marker.value.setMap(null) } }) -provide(MARKER_INJECTION_KEY, { marker: ref(marker) }) +provide(MARKER_INJECTION_KEY, { marker }) function setupMarkerEventListeners(marker: google.maps.Marker): google.maps.MapsEventListener[] { const listeners: google.maps.MapsEventListener[] = [] diff --git a/src/runtime/components/ScriptGoogleMapsMarkerClusterer.vue b/src/runtime/components/ScriptGoogleMapsMarkerClusterer.vue index bbef03bd..5f087c76 100644 --- a/src/runtime/components/ScriptGoogleMapsMarkerClusterer.vue +++ b/src/runtime/components/ScriptGoogleMapsMarkerClusterer.vue @@ -1,15 +1,15 @@ @@ -27,17 +27,17 @@ const emit = defineEmits<{ const mapContext = inject(MAP_INJECTION_KEY, undefined) -let markerClusterer: MarkerClusterer | undefined = undefined +const markerClusterer = shallowRef(undefined) const markerClustererEventListeners: google.maps.MapsEventListener[] = [] whenever(() => mapContext?.map.value, (map) => { - markerClusterer = new MarkerClusterer({ + markerClusterer.value = new MarkerClusterer({ map, ...props.options, }) - markerClustererEventListeners.push(...setupMarkerClustererEventListeners(markerClusterer)) + markerClustererEventListeners.push(...setupMarkerClustererEventListeners(markerClusterer.value)) }, { immediate: true, once: true, @@ -46,12 +46,10 @@ whenever(() => mapContext?.map.value, (map) => { onUnmounted(() => { markerClustererEventListeners.forEach(listener => listener.remove()) - markerClusterer?.setMap(null) + markerClusterer.value?.setMap(null) }) -provide(MARKER_CLUSTERER_INJECTION_KEY, { - markerClusterer: ref(markerClusterer), -}) +provide(MARKER_CLUSTERER_INJECTION_KEY, { markerClusterer }) function setupMarkerClustererEventListeners(markerClusterer: MarkerClusterer): google.maps.MapsEventListener[] { const listeners: google.maps.MapsEventListener[] = [] From f811c93f56f724e7d199efe68a0effcc26c9040e Mon Sep 17 00:00:00 2001 From: Damian Glowala Date: Fri, 18 Oct 2024 16:59:40 +0200 Subject: [PATCH 04/15] feat: add SFCs playground --- .../pages/third-parties/google-maps/sfcs.vue | 215 ++++++++++++++++++ 1 file changed, 215 insertions(+) create mode 100644 playground/pages/third-parties/google-maps/sfcs.vue diff --git a/playground/pages/third-parties/google-maps/sfcs.vue b/playground/pages/third-parties/google-maps/sfcs.vue new file mode 100644 index 00000000..9ab28f7a --- /dev/null +++ b/playground/pages/third-parties/google-maps/sfcs.vue @@ -0,0 +1,215 @@ + + + From 23dfd260d084b7cf09d3914ac7f949c763a8d5f3 Mon Sep 17 00:00:00 2001 From: Damian Glowala Date: Fri, 18 Oct 2024 17:11:03 +0200 Subject: [PATCH 05/15] fix: allow mounting info window to map when not within marker --- .../pages/third-parties/google-maps/sfcs.vue | 16 ++++++++++++++++ .../components/ScriptGoogleMapsInfoWindow.vue | 5 +++++ 2 files changed, 21 insertions(+) diff --git a/playground/pages/third-parties/google-maps/sfcs.vue b/playground/pages/third-parties/google-maps/sfcs.vue index 9ab28f7a..a59a5e59 100644 --- a/playground/pages/third-parties/google-maps/sfcs.vue +++ b/playground/pages/third-parties/google-maps/sfcs.vue @@ -2,6 +2,8 @@ import { whenever } from '@vueuse/core' import { ref, useTemplateRef } from 'vue' +const isInfoWindowShown = ref(false) + const isMarkerShown = ref(false) const markerOptions = ref({ @@ -65,6 +67,13 @@ whenever(() => googleMapsRef.value?.googleMaps, (googleMaps) => { zoom: 8, }" > + + info window content + + googleMapsRef.value?.googleMaps, (googleMaps) => {
+ + + + + +