90381
## 目標

Firebase の Realtime Database から10件以上の施設名を読み取り、施設名及び県名を`query`として、GCP（Google
Clous Platform）の Places API
から正式名称や開業時間等のデータを取得し、取得データを用いてマップ上にマーカーをマッピングをすることを目指しています。

## 問題点

現状、10か所までマッピングされますが、それ以降の場所に関しては`OVER_QUERY_LIMIT`となっています。このことは調べた限りでは、Places
APIのクエリ速度が 6000 query/min（=10query/100msec）に制限されているためと思われます。

## 解決のために試したこと

`for`文以降に`setTimeout`をかませることで処理を遅延させられるのではないかと考えましたが、うまく動作しませんでした。

## 質問

  1. クエリ速度上限をあげる申請を行う以外で、`OVER_QUERY_LIMIT`を回避する手法をご教示ください。
  2. 速度上限をあげる以外に手段がない場合、その申請に費用は掛かるのでしょうか?

上記1.だけでもお答えいただけますと幸いです。

## ソースコード

```

        var map;
        const url = new URL(window.location.href);
        const params = url.searchParams;
        const map_param= params.get("map");
        const prefecture_param=params.get("pref");
    
        const loadEl = document.querySelector('#load');
    
        function initMap() {
          firebase.database().ref().once('value', snapshot => {
     
            map = new google.maps.Map(document.getElementById('map'), {
              center: new google.maps.LatLng( 35.44778, 139.6425, false ),
              zoom:9.7
            });  
    
            var infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            
            var hospital=snapshot.child("/"+map_param);
            var dataset=hospital.val();
            var len=Object.keys(dataset).length;
            
            for(var i=0;i<len;i++){
              if (dataset[i].pref==prefecture_param){
                setTimeout(mapping(i),100);
                
              }
            }
            
            function mapping(num){
              service.findPlaceFromQuery({
                query: dataset[num].name+" "+prefecture_param,
                fields: ['name','geometry']
              }, function(results, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                  createMarker(results[0]);
                }
              });
            }        
    
            function createMarker(place) {
              //var placeLoc = place.geometry.location; 
              var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location  //results[i].geometry.location
              });          
    
              marker.addListener('click', function() {
                infowindow.setContent(place.name);  //results[i].name
                infowindow.open(map, this);
              });
            }
          });   
        }
    
```

## 参考にしたWEBサイト

<https://www.webdesignleaves.com/pr/plugins/googlemap_01.html>  
<https://stackoverflow.com/questions/11792916/over-query-limit-in-google-maps-
api-v3-how-do-i-pause-delay-in-javascript-to-sl>
CC BY-SA 4.0
2022-08-04T07:40:59.373
90379
2022-08-04T08:29:07.070
2022-08-04T08:29:07.070
3060
53819
question
javascript html firebase
Google Map Places APIにおいてOVER_QUERY_LIMITを回避する方法に関して質問です。
```

            for(var i=0;i<len;i++){
              if (dataset[i].pref==prefecture_param){
                setTimeout(mapping(i),100);
    
```

このコードはループ中で `mapping(i)` を実行していて、`setTimeout()` の意味がありません。`setTimeout()`
には関数の実行結果ではなく関数そのものを渡す必要があります。

```

    setTimeout(mapping.bind(null, i), 100 * i);
    
```
CC BY-SA 4.0
2022-08-04T08:12:51.077
90381
2022-08-04T08:12:51.077
3475
90379
answer