add: limit for Google Maps API

src/utils/defines.ts

@@ -1,3 +1,6 @@
+export const MAX_LOAD_MAP_LIMIT = 63
+export const MAX_GEOCODE_LIMIT  = 21
+
 export interface LatLng {
   lat: number,
   lng: number,

src/utils/i18n.ts

@@ -1,8 +1,10 @@
 export const messages = {
   ja: {
     toast: {
-      limit: "現在、1分あたりのリクエスト数は10回に制限されています。",
-      limit_all: "1分あたりのリクエスト制限（利用ユーザー全体）に達しました。",
+      limit: "現在、1 分あたりのリクエスト数は10回に制限されています。",
+      limit_all: "1 分あたりのリクエスト制限（利用ユーザー全体）に達しました。",
+      map_limit: "1 ユーザーあたりの地図の読み込み回数には制限があります。また明日どうぞ。",
+      geocode_limit: "1 ユーザーあたりのキーワード検索回数には制限があります。また明日どうぞ。",
       failedGetLocation: "現在地を取得できませんでした。",
       reason0: "原因は不明です。",
       reason1: "位置情報の取得が許可されていませんでした。",
@@ -17,6 +19,8 @@ export const messages = {
     toast: {
       limit: "Currently, the number of requests per minute is limited to 10.",
       limit_all: "The request limit per minute (for all users) has been reached.",
+      map_limit: "There is a limit to load the map per user. Please come back tomorrow.",
+      geocode_limit: "There is a limit to serach with keywords per user. Please come back tomorrow.",
       failedGetLocation: "Failed to get current location.",
       reason0: "The cause is unknown.",
       reason1: "The cause is that location info acquisition was not allowed.",

src/views/MapView.vue

@@ -146,10 +146,10 @@ import { computed, onMounted, ref, watch } from "vue"
 import { useStore } from "@/store"
 import { useI18n } from "vue-i18n"
 import { Loader } from "@googlemaps/js-api-loader"
-import { LatLng } from "@/utils/defines"
 import { useToast } from "vue-toastification"
 import { darkStyle } from "@/utils/darkStyle"
 import { apiKeyGoogle, appId, apiKeyTT } from "@/secrets/secrets"
+import { MAX_LOAD_MAP_LIMIT, MAX_GEOCODE_LIMIT, LatLng } from "@/utils/defines"
 import { round, tabindexToID, shouldDarkMode, getCountryDefaultPosition } from "@/utils/utils"
 import axios from "axios"
 import Cookies from "js-cookie"
@@ -168,7 +168,7 @@ const { t, locale } = useI18n({ useScope: "global" })
 /**
  * initialize
  */
-onMounted(() => {
+onMounted(async () => {
   // init focus
   if (! (new MobileDetect(navigator.userAgent).mobile())) {
     (document.querySelector("#search") as HTMLElement).focus()
@@ -207,6 +207,22 @@ const loader = new Loader({
 })
 
 loader.load().then(async (google) => {
+  // suppress larger volume of requets
+  const { data: ip } = await axios.get("https://ipinfo.io/json?token=c1412db4f9b238")
+  const savedIp = Cookies.get("savedIp")
+  if (savedIp == undefined || ip !== savedIp) {
+    Cookies.set("savedIp", ip)
+  }
+  const requestNumMap = Cookies.get("requestNumMap") ?? "0"
+  if (requestNumMap != undefined) {
+    Cookies.set("requestNumMap", (Number(requestNumMap) + 1).toString(), { expires: 1 })
+  }
+  if (MAX_LOAD_MAP_LIMIT <= Number(Cookies.get("requestNumMap"))) {
+    toast.error(t("toast.map_limit"))
+    ; (document.getElementById("map") as HTMLDivElement).style.backgroundColor = "#bbbbbb"
+    return
+  }
+
   map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
     center:            center,
     zoom:              15,
@@ -440,6 +456,18 @@ const geocode = (async () => {
     execWhenQueryIsCoords()
     return
   }
+
+  // suppress larger volume of requets
+  const requestNumGeocode = Cookies.get("requestNumGeocode") ?? "0"
+  if (requestNumGeocode != undefined) {
+    Cookies.set("requestNumGeocode", (Number(requestNumGeocode) + 1).toString(), { expires: 1 })
+  }
+  if (MAX_GEOCODE_LIMIT <= Number(Cookies.get("requestNumGeocode"))) {
+    toast.error(t("toast.geocode_limit"))
+    isInputting.value = false
+    return
+  }
+
   geocodeResults.value.splice(0)
   let res = null
   try {
@@ -452,21 +480,6 @@ const geocode = (async () => {
   selectingGeocode.value = true
   isOpenBackForGeo.value = true
 
-  if (query.value == "ヤフー" || query.value.toLowerCase() == "yahoo") {
-    geocodeResults.value.push({
-      formatted_address: "日本、〒102-8282 東京都千代田区紀尾井町１−３ 紀尾井タワー 東京ガーデンテラス",
-      geometry: {
-        location: {
-          lat: 35.6799969,
-          lng: 139.7357423,
-        },
-      },
-    })
-
-    isInputting.value = false
-    return
-  }
-
   if (res?.data.results.length === 0) {
     toast.error("検索結果がありません。施設名ではなく住所表記での入力をお試しください。")
     isInputting.value = false