２０１８年９月１０日
今まで、地図は自分で作って、大きな地図は自分でスクロール化をしたりしてたのですが、Googlemapを埋め込んでみようかなと思っています。Googlemapの進化が凄くて便利なので利用しない選択は無いという感じになってきています。
いざ、Googlemapを導入しようかなと思って調べたら、Googlemapを導入するにあたって、クレジットカードの登録をしないと使えないように変わっていて、有料化が急激に進んでいるようです。
2016年6月に上記を登録してAPIキーを取得しないといけない（従来からGooglemapを使っているサイトはしばらくは使えるらしい）というシステムに変わっていたようです。
2018年7月16日からGooglemapを利用するための料金体系が大きく変わって、毎月200ドル分までは無料で、それ以降は有料になるというようになりました。200ドル分って25,000calls程度だという事なので、１回表示するごとに約１円という事です。
ちなみに従来は1日25,000callsまで無料だったので、無料で使える範囲が約３０分の１に減ったという事です。
今後さらなる有料化が進む可能性もあるので、使用は限定的にしないといけないようです。
とりあえず、APIキーを取得しました。
https://console.cloud.google.com/?hl=ja
Googleサイトを参考に（というよりサンプルページ）を丸ごとコピーして使ってみましたが、最初にちょっと地図が表示しただけで、「エラーが発生しました。このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。」との表示が・・・・・・
Googleって、こういうのが多いんですよねえ。本当に敷居が高い。
他のサイトも見てみたのですが、やっぱりエラーが発生します。情報が古くて、あまり役に立ちません。
https://www.marie-web.design/blog/google-maps-api/
を参考にして、なんとかGooglemapが表示するようになりました。
Googlemapを使おうとしてAPIキーを取得した場合、そのAPIキーを使えるサイト（ドメイン）を制限しておく必要があります。そうしないと他のサイトで勝手にAPIキーを使われて、そのサイトの課金までGoogleから請求が来ることになります。
どの画面で設定できるのか見つけるのに苦労すると思いますのでアドレスをメモしておきます。
https://console.cloud.google.com/google/maps-apis/overview?hl=ja
Google Cloud Platformで対象のプロジェクト（自分が設定したAPI）を選択し、認証情報—-認証情報を作成—-APIキーを作成—-キーを制限—-HTTP リファラー （ウェブサイト）—-リファラーを設定（ホームページを設定）です。
https://www.tam-tam.co.jp/tipsnote/javascript/post7755.html
を参考にして地図上に独自の形のマーカーを複数入れてクリック時に吹き出しの説明文を出せるようにしました。
マーカーはpng,jpg,gifのいずれの画像でも可能のようです。
実際にやってみましたが、成功しました。
https://kimassi.net/test/test5F.html
２０１９年３月２日
Google Cloud Platform & APIs: 0199EC-C66B4C-A37CE7 ご利用分の請求書のご案内が届きました。
びっくりしました。
でも請求額は０円でした。安心しました。
２０１９年３月２７日
久しぶりにページを見てみたら、Googlemapが一瞬表示するけど、すぐ消えてしまうようになっています。
またしないといけないことが増えてしまった。
そういえば、ページを作成してしばらくしてから、APIキーの設定を変更したのを忘れていました。
最初はAPIキーをどのサイトでも使用できる設定にしていたのを、https://kimassi.net/ だけしか使えないように変更したのです。
よく調べると、https://kimassi.net/ のサイト全体で使えるようにするには https://kimassi.net/* にしないといけなかったのです。
https://kimassi.net/* に変更したのですが、やっぱりエラー表示されてしまいます。
ひょっとしてと思い、APIキーを改めてコピー＆ペーストしてアップロードしなおしたら正常に動作しました。
確認しましたが、APIキーは変わっていませんでした。
なにはともあれ、正常に動作するようになって良かったです。
２０２０年４月２４日
久しぶりにページを見てみたら、Googlemapが一瞬表示するけど、すぐ消えてしまうようになっています。
どうも、クレジットカードの有効期限が切れていたのが原因のようです。
カード情報の有効期限を更新したのですが、状況は変わりません。
APIキーが変更になっていたので、新しいAPIキーをコピー＆ペーストしてアップロードしました。
これでも問題は解決しませんでした。
最終的には、改めて有料にアップグレード（アップグレードのボタンを押す）して、やっと解決しました。
アップグレードのボタンを押すページは、https://console.cloud.google.com/google/maps-apis/overview?hl=ja からいくつかリンク先に移動して見つけたのですが、履歴を見てもはっきりしません。Googleってこういう手続きが分かりにくいんですよね。パズルのようです。