
GoogleMapに「このページではGoogleマップが正しく読み込まれませんでした。」とメッセージが出ました。
コンソールログには「You have exceeded your request quota for this API」と出ています。

この場合の対処法について書いていきます。

## 現象

初めて見たのでどうなったか詳細を残します。

### 地図の様子

![pop](/images/posts/126/pop.png)

- 地図は薄暗くなり、「For development purposes only」と透かしが入る。
- 全画面、拡大縮小などの機能は利用できる。
- 地名、建物名のアイコンとツールチップも有効。
- popに「このページではGoogleマップが正しく読み込まれませんでした。」とメッセージ。
- OKを押すとポップが消える。
- 「[このウェブサイトの所有者ですか？](https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=keyless#api-key-and-billing-errors)」はドキュメントへのリンク


意外だったのは、薄暗くなっただけで**地図の基本機能は使えた**こと。
ユーザーにとってはシステムが故障していると思われそうだが、慣れれば普通に使えそう。

ドキュメントの内容は後述する。

### コンソールログ

![log](/images/posts/126/log.png)

- `You have exceeded your request quota for this API.`
- 雑訳：このAPIのリクエスト割り当てを超えました。

とうとう、利用枠を超えたようです。
見るように指示するリンクは同じ[ドキュメント](https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=keyless#api-key-and-billing-errors)

## 原因と対処法

今回は、設定した一日の上限を超えたAPIがあるためです。
具体的には**Maps JavaScript API**の１日の上限を100回にしていたため。

### ドキュメントにある確認事項

[ドキュメント](https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=keyless#api-key-and-billing-errors)の中で言及されている要因は以下の通りです。

- APIキーを仕様しているか？
- アカウントで請求は有効になっているか？
- 提供された請求方法の期限が切れていないか？（たとえば、有効期限が切れたクレジットカード）。
- 一日の上限を超えたAPIはあるか。
- APIキーにIPアドレス制限があるか？

これらをコンソールで確認してみてください。

## 無料枠での利用

まず、現在のGCPでは毎月$200の無料枠があります。
これは、GCPのすべてのAPI・サービスの利用量の合算になるため色々試されている方は、気をつけてください。
クレジットカード等を登録していない場合、$200を超えた時点でAPIが今回のように停止します。

翌月には枠が補填されて利用できます。
個人的な利用であればそのままでも大丈夫です。

GoogleMapsAPIでのエラー：You have exceeded your request quota for this API


GoogleMapの練習のため、自分のサイトに組み込んでいます。
前回はサイトにGoogleMapを組み込むところまで行いました。

[GoogleMapをウェブサイトに組み込んでみる](https://www.suzu6.net/posts/108-google-map-api-javascript/)

今回は自作のマーカーを表示してみたいと思います。

[Googleマップに色々なマーカーを描画する方法](https://maps.multisoup.co.jp/blog/1881/)

こちらを参考にしました。

## マーカーの基本

```js
var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -25.363, lng: 131.044},
        zoom: 4
    });

    // マーカーを置く
    var marker = new google.maps.Marker({
        position: {lat: -25.363, lng: 131.044}, // マーカーが指す緯度経度
        map: map,　                             // 描画するマップ
        title: 'Hello World!'                   // ツールチップ
    });
};
window.onload = function () {
    initMap();
}
```

`google.maps.Marker`を宣言してパラメータを与えると地図上にマーカーを置けます。
上記のコードは以下のようになる。

![simple](/images/posts/114/simple-marker.png)

※上は画像です。


`position`と`map`を渡せば描画できます。
`title`はカーソルを合わせると出てくる、ツールチップです。

## アイコンを表示する

マーカーの代わりに画像を表示する場合は、`icon`に画像URLを渡します。

```js
var marker = new google.maps.Marker({
    position: {lat: -25.363, lng: 131.044}, // マーカーが指す緯度経度
    map: map,　                             // 描画するマップ
    title: 'Hello World!',                   // ツールチップ
    icon : "/images/posts/114/simple-marker.png"
});
```

緯度経度には画像の真ん中下が合うようになっています。

### アイコンのサイズを指定する

`icon`は以下のようにするとスケールサイズも変更できます。
マーカーのサイズを揃えたい時に便利です。

```js
icon: {
    url: "/images/posts/114/snow_marker.png", // 画像URL
    scaledSize: new google.maps.Size(60, 60)  // サイズを指定
}
```

## アイコンの色や形を指定する

アイコンの色や形も指定できます。

```js
icon: {
    fillColor: "#000000",                //塗り潰し色 cssで色指定と同じ
    fillOpacity: 0.6,                    //塗り潰し透過率
    path: google.maps.SymbolPath.CIRCLE, //円を指定
    scale: 16,                           //円のサイズ
    strokeColor: "#000000",              //枠の色
    strokeWeight: 1.0                    //枠の透過率
}
```

## マーカーを表示したもの

以上を踏まえて色々とマーカーを試しました。
北海道推しです。

<div id="map"></div>

<script src="/images/posts/114/googlemap-marker.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLiuETJGfTBoD016GVnT9MmID59QsowIw&callback=initMap" async defer></script>

<style>
#map {
    width: 100%;
    height: 400px;
    margin: 2rem 0;
}
</style>


## ソースコード

```js
var map;
function initMap() {
    let sapporo_station = { lat: 43.068726, lng: 141.350764 };
    map = new google.maps.Map(document.getElementById('map'), {
        center: sapporo_station,
        zoom: 13
    });

    // 自作のマーカーを札幌駅に置く
    var marker = new google.maps.Marker({
        position: sapporo_station,
        map: map,
        title: 'Sapporo Station',
        icon: {
            url: "/images/posts/114/snow_marker.png", // 画像URL
            scaledSize: new google.maps.Size(60, 60)  // サイズを指定
        }
    });

    // カスタマムマーカーのリスト
    var markers = [
        {
            position : { lat: 43.078397, lng: 141.34009 },
            title : "北海道大学",
            label_text : "U",
            color: "green"
        },
        {
            position: { lat: 43.064327, lng: 141.346868 },
            title: "北海道庁",
            label_text: "C",
            color: "blue"
        },
        {
            position: { lat: 43.084202, lng: 141.346259 },
            title: "好きな居酒屋",
            label_text: "D",
            color: "orange"
        },
        {
            position: { lat: 43.061223, lng: 141.356342 },
            title: "札幌テレビ塔",
            label_text: "T",
            color: "red"
        },
    ]; 
    
    // 複数のマーカーを配置
    for (var m of markers){
        var marker = new google.maps.Marker({
            map: map,
            position: m.position,
            icon: {
                fillColor: m.color,                //塗り潰し色
                fillOpacity: 0.8,                    //塗り潰し透過率
                path: google.maps.SymbolPath.CIRCLE, //円を指定
                scale: 16,                           //円のサイズ
                strokeColor: m.color,              //枠の色
                strokeWeight: 1.0                    //枠の透過率
            },
            title: m.title,
            label: {
                text: m.label_text,                           //ラベル文字
                color: '#FFFFFF',                    //文字の色
                fontSize: '20px'                     //文字のサイズ
            }
        });
    }
    
}
window.onload = function () {
    initMap();
}
```

## 参考

- [Simple Marker Icons](https://developers.google.com/maps/documentation/javascript/examples/icon-simple?hl=ja)
- [Googleマップに色々なマーカーを描画する方法](https://maps.multisoup.co.jp/blog/1881/)

GoogleMapAPIで自作のマーカーを表示する

GoogleMapAPIを使ってサイト上にGoogleMapを表示するまでの設定方法です。
API Keyの取得からウェブサイト上に表示するところまで説明します。

## Google Map API

いろんなサイトで見かける地図の大半は**Google Map API**を使っています。
ウェブサイトだけでなく、スマホアプリ（Andoriod/iOS）にも対応しており、現代では欠かせないツールです。


公式サイト  
[https://cloud.google.com/maps-platform/?hl=ja](https://cloud.google.com/maps-platform/?hl=ja)

上記のサイトからアカウントを登録して使えるようになります。
利用の際には請求先のクレジットカードの登録も必須です。

毎月無料枠があるので、そこを超えないように設定もしていきたいと思います。

## API Keyの取得

アカウント登録したらAPI Keyを取得します。

登録中にも出てきますが、取り忘れた場合の手順を載せます。

![api-key1](/images/posts/108/apikey-1.png)

コンソールを開いたら、メニューの「APIとサービス」から「認証情報」を選びます。

![api-key2](/images/posts/108/apikey-2.png)

既にAPI Keyを取得していたので１つあります。
ない場合は、「認証情報を作成」から「APIキー」を選択するとAPI Keyを作成できます。

![api-key3](/images/posts/108/apikey-3.png)

この後、流出の被害を抑えるためAPI Keyの機能を制限して行きます。
「キーを制限」を押して下さい。

![api-key3](/images/posts/108/apikey-4.png)

API Keyの詳細に着くので、ここで機能を制限します。

![api-key4](/images/posts/108/apikey-4.png)


用途がウェブサイトでの利用です。

- アプリケーションの制限
  - HTTPリファラー
  - https://www.suzu6.net
  - http://localhost:3000
- APIの制限
  - Maps JavaScript API

**アプリケーションの制限**では、本番環境とローカル（開発）環境のドメインを加えました。
これら以外からのアクセスを制限してくれます。

**APIの制限**ではズームやマーカーが使える**Maps JavaScript API**を選択しています。
一方、**Maps Static API**は地図画像の配信だけ行うため、安く済みます。

環境に合わせて設定したら保存しておきます。


## APIとサービスを有効化

続けて、Maps JavaScript APIを有効にします。

APIとサービスのダッシュボードへ移り、「＋APIとサービスを有効化」を押します。

![service1](/images/posts/108/service-1.png)

ライブラリの一覧から「Maps JavaScript API」を選択します。

![service2](/images/posts/108/service-2.png)

APIを有効にして「管理」を押すとAPIのダッシュボードへ移る。

課金されないようにAPIの呼び出し回数を制限します。
タブの「割り当て」を選び、割り当ての上限を決めていきます。

![service3](/images/posts/108/service-3.png)

200ドルの無料クレジットのうち、Maps JavaScript APIは28,500回の呼び出しが無料で利用できます。
無料クレジットは他の機能との共有であるため、これより少ない数にします。

アクセス数は少ないので、とりあえず100回/日としておきます。

## サンプルを動かしてみる

ここまで設定出来たら実際にサンプルを動かしてみます。

[https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja](https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja)

ドキュメントのHello, Worldにあたるコードを動かしてみます。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>
```

下から４行目の`<script>`タグのURLで**YOUR_API_KEY**に取得したAPI keyを入れます。

### 実際に動かしてみる

<div id="map"></div>

<script src="/images/posts/108/googlemap-helloworld.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLiuETJGfTBoD016GVnT9MmID59QsowIw&callback=initMap" async defer></script>

<style>
#map {
    width: 100%;
    height: 400px;
    margin: 2rem 0;
}
</style>

オーストラリアのシドニー周辺のマップが表示されました！
ズームや全画面ビューもちゃんと動いています。

## サイト上で動くまで経験したエラー

ご覧のページでGoogleMapが動くまで、試行錯誤したので備忘録として書いておきます。

前提
- Nuxt.js+Vuejsで構成した静的サイト
- 記事をMarkdownで書いてHTMLに変換している
- divなどはMarkdownに直書きしている

特殊な状況ですが、何かの役に立てば。

### 完成形

まずは完成形から。

- `<body>`など不要なタグを排除。
- `<style>`は記事のスペースに収まる大きさのCSSに変更。
- `<script>`タグのJavaScriptは別のファイルにしてサーバに設置しました。
- HTMLのレンダリングが終わるまで`initMap()`を待機させる。

```html
<div id="map"></div>


<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<script src="/images/posts/108/googlemap-helloworld.js" async defer></script>

<style>
#map {
    width: 100%;
    height: 400px;
    margin: 2rem 0;
}
</style>
```

```js
var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
    });
}
// InvalidValueError: initMap is not a functionの対応
window.onload = function () {
    initMap();
}
```

### API Keyのつけ忘れ

API keyをつけ忘れていると下記のエラーがコンソールに出ます。

```
Google Maps JavaScript API warning: InvalidKey
```

### InvalidValueError: initMap is not a functionの対応

jsファイルの読み込み順序が違うため下記のエラーが出る。

```
InvalidValueError: initMap is not a function
```

[ここ](https://teratail.com/questions/32037)を参考に下を試した。
何度か`not found google`が出たので安定しなかった。

```js
google.maps.event.addDomListener( window, 'load', initMap );
```

最終的に、`window.onload`で読むようにして対処した。

```js
window.onload = function () {
    initMap();
}
```

## おわりに

GoogleMapのAPIは無料枠があり、配信数も制限できるため個人利用としてもありがたい。
web版では読み込みURLの制限も可能でした。

この辺りは、使っていく中で本当に制限されているかも確認したいと思います。

GoogleMapsAPIでのエラー：You have exceeded your request quota for this API

GoogleMapAPIで自作のマーカーを表示する

GoogleMapAPIをウェブサイトで利用する方法と設定について