Google Maps API で地図をカスタマイズしてみる 2016 → 2017

Webサイト制作では必ずと言ってよいほどお世話になっている「Google Maps」。
ディレクションにまわるようになってからは直接コードを触る機会も少なく、カスタマイズも未経験のままだったので、ここでひとつ勉強のためにやってみようと思い立ちました。
2016年6月と10月に仕様変更がされているため、Web上の情報には古い(仕様変更前の情報)ものが多く悩みながらの実装となりました。

古い情報で実装して一旦失敗、その後新しい手法で実装成功、の流れで記載していきますのでお急ぎの方は「APIキーが必要」からご覧ください!

Google Maps API で地図をオリジナルにカスタマイズ!

【1】Google Maps APIをhead内で読み込む

…と書くだけです。
※後ほどのべますが、これだと地図が表示されず困ることになります。

【2】bodyタグにonloadを記述

【3】地図を埋めたい場所に指定のコードを記述

※jsは適宜外部ファイル化してください

※ソースコードは参考サイト様より
※色に関するカスタマイズは奥が深いので、今回は解説省略です。
スタイル化されたマップ |Google Maps JavaScript APIをご参照ください。

…さて、これでまずは地図が表示されるはず、だったのですが。。。

スクリーンショット 2017-01-15 1.39.13

エラーが発生してしまいましたね。

APIキーが必要

2016年6月22日から新規サイトでGoogle Mapsを使用する場合はAPIキーが必須になりました。
参考サイト様

APIキーが必要…といわれても、特に取得せずとも表示されているサイトもあるよ?
と思っていたら、2016年の6月22日から仕様が変更された模様。
それ以前のものは、APIキーなしで表示されているという事のようです。

では早速、APIキーを取得していきましょう。

1)ウェブ向け Google Maps API へアクセス。

スクリーンショット 2017-01-15 2.01.382)画面右上のキーを取得ボタンをクリック。Google Maps ウェブ API をアクティベートする、のウィンドウが出たら、右下の「続ける」をクリックします。

3)Google APIs に移動しました。画面の指示に従い進みます。
スクリーンショット 2017-01-15 2.08.564)Keyに任意の名称をつけて、進みます。
スクリーンショット 2017-01-15 2.12.502017-01-15-2.16.535)取得した「キー」をhead内で読み込みます。

6)「エラーが発生しました」と表示されていた場所に、無事GoogleMapが表示されました!
スクリーンショット 2017-01-15 2.26.16

Google Maps API 無償版には制限がある

Google Maps API 無償版のポリシー変更により2016年10月12日より地図が表示されない場合があります。

1.APIの使用が25,000回/日を超えた場合、以後エラーとなり地図が表示されない。

2.Google Maps APIが古いバージョンの場合、エラーとなり地図が表示されない。

参考サイト様より

…ということで、今まで使っていたものが使えなくなる場合があるのですね。
こちらの仕様についても要注意です。