Google mapsを表示させるGoogle map API取得方法
おはようございます、名畑です。
昨年までものすごく盛り上がっていたヨロズマートに初めて行ってきました。
グッズ等は興味なかったのですがえんぴつやポストカード等、細部にこだわりを感じて商品を見ていてテンション上がりました♪
特にポストカードはメタル紙に白インクかエンボス加工等、加工が様々されていてこういったものは見ていて楽しいです。
今年の6月22日以降サイトでGoogle Mapsを利用している場合、Googlemapが表示されない場合、APIが必要となりました。
今まで埋めていたマップは問題ないですが、突然表示できなくなった等の場合はAPIの設定をしていないのが理由となります。
地図を正しく埋め込みしているのに、うまく表示されない場合はAPIを設定しましょう
目次
- Google Mapsとは?
- 取得方法
- おわりに
Google Mapsとは?
通常のGoogle mapを表示させるのとは異なって、Google Mapsというjsを使用して地図を表示させる仕組みです。
地図に線をいれたり、印をつけたりオリジナルに地図を加工できるようになります。
細かい使い方は今回は説明しませんが、地図が移動できないカスタマイズされていたりWordPressのテーマに最初から地図が表示される仕組みになっています。
このようなカスタマイズされている場合はAPIが必要となります。
取得方法
Googleにログインした状態でGoogle Maps APIの取得ページへいきます。
右上の「キーを取得」をクリックします。
注意文が出てくるので目を通して「続ける」をクリックします。
新しく作成するので「プロジェクトの作成」を選択して続行します。
APIを有効にするのに少し時間がかかるので待ちましょう。
取得が完了すると設定画面になるので必要な項目を入力していきます。
①名前
自分が管理して分かりやすい名前を設定しましょう。
②キーの制限
WebサイトにGoogle Mapを設定する場合は「HTTPリファラー(ウェブサイト)」を選択してください。
③ウェブサイトからのリクエスト
地図を表示させたいページのURLを貼付けしてください。
同じドメインでもドメイントップだけ登録しても表示されません。
必ず表示させるページを登録するようにしましょう。
複数URLを入れることが可能です。
以上が入力できたら「作成」ボタンをクリックします。
すると設定完了画面が表示されます。
自分の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が必要ということを頭に入れておきましょう。
最新記事 by 名畑かなえ (全て見る)
- Macでzipファイルにパスワードをかけるにはどうすればいいの? - 2023年4月28日
- WordPressを定期的にバージョンアップすることが大切な理由 - 2023年4月18日
- お客様限定|WordPressバージョンアップのお知らせ - 2023年3月3日