ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

カスタマイズしたGoogleマップを読み込む時に必要なGoogle Maps APIの設置方法

| カテゴリー : ツール

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で、下記のタグを読み込んでください。

{APIキー}と記述されている場所に、先ほどGoogle API Consoleで作成したAPIキーを貼り付けてください。{}も含めて上書きを行えばOKです。

これでカスタマイズしたマップを表示させるためのGoogle APIの指定は完了となります。

参考記事

今回の記事はこちらのリンクを参考にさせていただきました。

Googleマップをカスタマイズしてウェブサイトに使用するとき役立ててください。

実際のGoogle Mapsのカスタマイズ方法についてはまた別の記事でご紹介したいと思います。

それではまた!

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。