@mptw/skylens-ui 1.4.99 → 1.4.100

package/components/SLHeatMap.vue

@@ -27,7 +27,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { LatLngBounds, LatLng, AdvancedMarkerElement, Map } = useNuxtApp();
+    const { $LatLngBounds, $LatLng, $AdvancedMarkerElement, $Map } = useNuxtApp();
     const { latlons, weights, isShowMarker } = toRefs(props);
 
     const mapEl = shallowRef<HTMLElement | null>(null);
@@ -40,7 +40,8 @@ export default defineComponent({
       if (!mapEl.value) return;
 
       if (!map) {
-        map = Map(mapEl.value, {
+        map = new $Map(mapEl.value, {
+          center: { lat: 37.77325660358167, lng: -122.41712341793448 },
           disableDefaultUI: true,
           styles: [
             {
@@ -55,7 +56,6 @@ export default defineComponent({
         });
       }
 
-      map.setCenter({ lat: 23.586114913594802, lng: 120.87814086119803 });
       overlay = new GoogleMapsOverlay({});
       overlay.setMap(map);
 
@@ -63,19 +63,19 @@ export default defineComponent({
     }
 
     function setupMarkers() {
-      const bounds = new LatLngBounds();
+      const bounds = new $LatLngBounds();
       markers.forEach((marker) => marker.setMap(null));
       markers = [];
 
       latlons.value.forEach((latlon) => {
-        const position = new LatLng(
+        const position = new $LatLng(
           Number(latlon.lat),
           Number(latlon.lon)
         );
         bounds.extend(position);
 
         markers.push(
-          new AdvancedMarkerElement({
+          new $AdvancedMarkerElement({
             position,
             map: isShowMarker.value ? map : null,
           })
@@ -140,7 +140,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
+<style lang="stylus" scoped>
 .heat-map
   @apply w-full h-full
 </style>

package/nuxt.config.ts

@@ -11,7 +11,7 @@ export default defineNuxtConfig({
     public: {
       defaultMobileEndDateBeforeNow: 4,
       icoUrl: 'https://skylens-mng-dev-1087511617183.asia-east1.run.app',
-      googleMapsApiKey: 'AIzaSyDFNjeGBtbW-BdLKMb78cUR4F_OtUl0tlg',
+      googleMapsApiKey: 'AIzaSyDMNNizDMizdxJd3oAhsbkx1kL5Gyicnns',
     },
   },
   components: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.4.99",
+  "version": "1.4.100",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

package/pages/index.vue

@@ -0,0 +1,15 @@
+<template lang="pug">
+.container
+  SLHeatMap
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: 'IndexPage',
+});
+</script>
+
+<style lang="stylus" scoped>
+.container
+  @apply s('w-[600px]') s('h-[480px]')
+</style>

package/plugins/googlemap.ts

@@ -2,15 +2,17 @@ import { setOptions, importLibrary } from '@googlemaps/js-api-loader';
 
 declare module '#app' {
   interface NuxtApp {
-    LatLngBounds: google.maps.LatLngBounds;
-    LatLng: google.maps.LatLng;
-    Map: google.maps.Map;
-    AdvancedMarkerElement: google.maps.AdvancedMarkerElement;
+    $LatLngBounds: google.maps.LatLngBounds;
+    $LatLng: google.maps.LatLng;
+    $Map: google.maps.Map;
+    $AdvancedMarkerElement: google.maps.AdvancedMarkerElement;
   }
 }
 
 
 export default defineNuxtPlugin(async (nuxtApp) => {
+  if (!import.meta.client) return;
+
   const runtimeConfig = useRuntimeConfig();
   setOptions({
     key: runtimeConfig.public.googleMapsApiKey,