via: Google Maps
配色やピンのデザインをカスタマイズしたGoogleマップが表示されない、ということはありませんか？
2016年6月より、Google Maps JavaScript APIを利用したGoogle Mapsの表示にはAPIキーの指定が必要になりました。
ここではJavaScriptでカスタマイズしたGoogle Mapsをサイトに表示させるために必要な、Google Maps APIの設定手順を紹介していきます。
GoogleのAPI管理サイトで設定を行う
まずはGoogle API Consoleへアクセスしてください。
この画像のようなページが表示されたら「認証情報」を選択してください。
このような画面が表示されたら「認証情報を作成」を選択してください。
画像のように4項目が表示されるので「APIキー」を選択してください。
するとAPIキーの作成が行われます。
「キーを制限」を選択してください。
このとき作成されたAPIキーはあとで使うのでメモを取るなりして保管しておきましょう。
APIキーに関する情報を入力する
次は取得したAPIキーの名前や表示させるWebサイトの情報を入力します。
画像のように、記入する箇所は3箇所です。
- 「名前」はなんでも良いですが、わかりやすい名前にしておくと管理しやすいです。
- 「キーの制限」はHTTPリファラーにチェックします。
- 「キーの制限」でHTTPリファラーにチェックを入れると、URLを記入するエリアが表示されます。ここで指定したURLにのみAPIキーが有効になります。
最後に「保存」ボタンをクリックしてください。
HTTPリファラー記入の注意点
入力欄にはあらかじめ「*.example.com/*」が例示してありますが、頭の「*」は必要ありません。
もしそれでも表示されなければ頭の「*.」ごと省いてみてください。
最期の「*」については、指定したURL以下のURLでもAPIキーを使えるようにする設定なので、サイト全体でAPIキーを使いたい場合は省かないようにしてほうが良いです。
以上でGoogle API Consoleでの設定は完了です。
APIキーの読み込み
設定したAPIキーを読み込むためにページファイルに書かれたHTMLで、下記のタグを読み込んでください。
1 | <script src="https://maps.googleapis.com/maps/api/js?key={APIキー}&v=3.exp"></script> |
{APIキー}と記述されている場所に、先ほどGoogle API Consoleで作成したAPIキーを貼り付けてください。{}も含めて上書きを行えばOKです。
これでカスタマイズしたマップを表示させるためのGoogle APIの指定は完了となります。
参考記事
今回の記事はこちらのリンクを参考にさせていただきました。
Googleマップをカスタマイズしてウェブサイトに使用するとき役立ててください。
実際のGoogle Mapsのカスタマイズ方法についてはまた別の記事でご紹介したいと思います。
それではまた！
PCもスマホもタブレットも。様々なデバイスに最適化したホームページ制作をいたします。
