feat(core): support custom language

fix #5
CofCat456 · Mar 20, 2024 · 4fe80bf · 4fe80bf
1 parent 52d5f1f
commit 4fe80bf
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 587 deletions.
diff --git a/docs/api/map.md b/docs/api/map.md
@@ -97,6 +97,7 @@ Currently, the coordinates for Taiwan are hardcoded, and in the future, we may c
     zoom?: number;
     zoomControl?: boolean;
     zoomControlOptions?: ZoomControlOptions;
+    language?: string
   }
   ```
 
@@ -122,6 +123,7 @@ const center = reactive<google.maps.LatLngLiteral>({
     :zoom="11"
     :max-zoom="20"
     :min-zoom="10"
+    language="zh-TW
   />
 </template>
 ```

diff --git a/docs/core/useSearch.md b/docs/core/useSearch.md
@@ -31,3 +31,10 @@ const { isLoading, coordinates, getCoordinates } = useSearch(YOUR_GOOGLE_MAPS_AP
 ::: warning Important
 Please remember to enable the `Geocoding API`
 :::
+
+### language
+
+[list of supported languages](https://developers.google.com/maps/faq#languagesupport)
+
+- Type `string`
+- Default: `en`
diff --git a/packages/core/src/composables/useMap.ts b/packages/core/src/composables/useMap.ts
@@ -1,11 +1,11 @@
 import { Loader } from '@googlemaps/js-api-loader';
 
-export function useMap(apiKey: string) {
+export function useMap(apiKey: string, language?: string) {
   const loader: Loader = new Loader({
     apiKey,
     version: 'weekly',
     libraries: ['places'],
-    language: 'zh-TW',
+    language,
   });
 
   return {

diff --git a/packages/core/src/composables/useSearch.ts b/packages/core/src/composables/useSearch.ts
@@ -2,7 +2,7 @@ import type { Ref } from 'vue';
 import { markRaw, onMounted, reactive, ref, toValue } from 'vue';
 import { useMap } from './useMap';
 
-export function useSearch(apiKey: string) {
+export function useSearch(apiKey: string, language: string = 'en') {
   const isLoading = ref(false);
   const cGoogle = ref<typeof google>();
   const cApi = ref<typeof google.maps>();
@@ -59,7 +59,7 @@ export function useSearch(apiKey: string) {
   };
 
   onMounted(async () => {
-    const { loader } = useMap(apiKey);
+    const { loader } = useMap(apiKey, language);
     cGoogle.value = markRaw(await loader.load());
     cApi.value = markRaw(cGoogle.value.maps);
     cGeocoder.value = markRaw(new cApi.value.Geocoder());

diff --git a/packages/map/src/components/GoogleMap/src/index.vue b/packages/map/src/components/GoogleMap/src/index.vue
@@ -69,6 +69,7 @@ interface MapOptions {
   zoom?: number
   zoomControl?: boolean
   zoomControlOptions?: ZoomControlOptions
+  language?: string
 }
 
 interface Props extends MapOptions {
@@ -89,6 +90,7 @@ const props = withDefaults(defineProps<Props>(), {
   scrollwheel: true,
   zoom: 11,
   zoomControl: true,
+  language: 'en',
 });
 
 const emit = defineEmits<{
@@ -160,7 +162,7 @@ const getMapOption = computed<MapOptions>(() => {
 });
 
 async function initMap() {
-  const { loader } = useMap(props.apiKey);
+  const { loader } = useMap(props.apiKey, props.language);
   cofMap.cGoogle = markRaw(await loader.load());
   cofMap.cApi = markRaw(cofMap.cGoogle.maps);
 

diff --git a/packages/map/src/composables/useMap.ts b/packages/map/src/composables/useMap.ts
@@ -1,8 +1,15 @@
-import type { Ref } from 'vue';
 import { computed, inject, onBeforeUnmount, ref, unref, watch } from 'vue';
+import type { Ref } from 'vue';
 import { apiSymbol, mapSymbol, markerClustererSymbol } from '../utlis/symbol';
 import { hasChanged } from '../utlis';
-import type { GoogleComponentsKey, GoogleMapComponentEvents, GoogleMapComponentOptions, GoogleMapComponentType, Marker, MarkerOptions } from '@/types';
+import type {
+  GoogleComponentsKey,
+  GoogleMapComponentEvents,
+  GoogleMapComponentOptions,
+  GoogleMapComponentType,
+  Marker,
+  MarkerOptions,
+} from '@/types';
 
 export function useMap<T extends GoogleComponentsKey>(
   key: T,

diff --git a/playground/.env b/playground/.env
@@ -0,0 +1,2 @@
+# Google Map Api Key
+VITE_GOOGLE_MAP_API_KEY=AIzaSyD2GxXdrkS1i-cEcpwh88uwnzMiVzrHQME