Google mapsを表示させるGoogle map API取得方法

20161021A

おはようございます、名畑です。
昨年までものすごく盛り上がっていたヨロズマートに初めて行ってきました。
グッズ等は興味なかったのですがえんぴつやポストカード等、細部にこだわりを感じて商品を見ていてテンション上がりました♪
特にポストカードはメタル紙に白インクかエンボス加工等、加工が様々されていてこういったものは見ていて楽しいです。

今年の6月22日以降サイトでGoogle Mapsを利用している場合、Googlemapが表示されない場合、APIが必要となりました。
今まで埋めていたマップは問題ないですが、突然表示できなくなった等の場合はAPIの設定をしていないのが理由となります。
地図を正しく埋め込みしているのに、うまく表示されない場合はAPIを設定しましょう

目次

  • Google Mapsとは?
  • 取得方法
  • おわりに

Google Mapsとは?

通常のGoogle mapを表示させるのとは異なって、Google Mapsというjsを使用して地図を表示させる仕組みです。
地図に線をいれたり、印をつけたりオリジナルに地図を加工できるようになります。
細かい使い方は今回は説明しませんが、地図が移動できないカスタマイズされていたりWordPressのテーマに最初から地図が表示される仕組みになっています。
このようなカスタマイズされている場合はAPIが必要となります。

取得方法

Googleにログインした状態でGoogle Maps APIの取得ページへいきます。
右上の「キーを取得」をクリックします。
20161021a01

注意文が出てくるので目を通して「続ける」をクリックします。
20161021a02

新しく作成するので「プロジェクトの作成」を選択して続行します。
20161021a03

APIを有効にするのに少し時間がかかるので待ちましょう。
取得が完了すると設定画面になるので必要な項目を入力していきます。
20161021a04

①名前
自分が管理して分かりやすい名前を設定しましょう。
②キーの制限
WebサイトにGoogle Mapを設定する場合は「HTTPリファラー(ウェブサイト)」を選択してください。
③ウェブサイトからのリクエスト
地図を表示させたいページのURLを貼付けしてください。
同じドメインでもドメイントップだけ登録しても表示されません。
必ず表示させるページを登録するようにしましょう。
複数URLを入れることが可能です。

以上が入力できたら「作成」ボタンをクリックします。
すると設定完了画面が表示されます。

20161021a05

自分のAPIキーが表示されるのでキーをコピーして使用しましょう。

注意点

通常通り地図を表示させるのには問題ありません。
以下のjsを使用している際は注意してください。
以前
<script src=”https://maps.googleapis.com/maps/api/js”></script>
今後
<script src=”https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXX”></script>

ほとんどのサイトで無料で使用できますが、大量にアクセスがある場合、制限がされ、課金される場合がありますので注意しましょう。

おわりに

地図がうまく表示されない対処法を紹介しました。
Google API等の文字を入力しなければいけない場合は参考にしてみてください。
英語でわかりにくいですがすぐ取得・設定することができます。
注意することは表示させるURLごとに設定しなければいけないことです。
設定後10分程で地図が表示されるようになりますので、地図を埋め込みで表示している方はまずGooglemap APIが必要ということを頭に入れておきましょう。

  • シェア
  • twitter
The following two tabs change content below.
株式会社インファクトのディレクターです。 フロントエンジニアだった知識を活かしてお客様のためになるような情報発信、制作を行なっております。また日本だけでなくベトナムスタッフとも連携して業務をとりまとめております。 好きなことは、自分で1から考えるものづくり。本の装丁が気になったり布ものやお菓子を自分でデザインして注文するのが好きです。 やっぱりはちみつなしでは生きてゆけない。
  • twitter
  • このエントリーをはてなブックマークに追加
PAGE TOP
LINE it!