wordpress

Google Maps APIキー取得方法

投稿日:

google api

Google Maps APIキー取得方法

Google Maps APIを取得する前に、Googleのアカウントを取得してください。

こちらから取得します → https://developers.google.com/maps/web/

下図のような画面になると思いますので、右上にある「キーの取得」をクリックします。

google api

1.Maps Web APIの有効化

下図のような画面が出たら「Yes」を選択して右下の「CREATE AND ENABLE API」をクリックします。

maps web api

次に、下図のような画面になって有効化の準備が進みます。

api

有効化できればAPIキーが表示されます。

次に、枠内にある「API Console」をクリックしてください。

API

 

2.API キーの設定

API キー

上図の画面が表示されたら、①のHTTP referrers (web sites)を選択して、キーの制限をします。

これをしなかったら他人が自分のAPIキーを使って利用することができます。

次に、②のところに、Google APIキーを使いたいサイトを登録します。

例えば、

*.example.com/* www等のサブドメインがついた example.comと下位のURL
example.com/* example.com と下位のURL

入力後、「保存」をクリックしてください。
*.example.com/* に関しては、最初の*が入らないのも作っておいた方が良いかも?

 

3.APIキーの追加

APIキーの追加

続いて、追加(有効化)しないとうまく表示されない場合がありますので下記の項目などは追加(有効化)してください。

上図にある左メニューの「ライブラリ」から表示されますので、必要な項目をクリックしてください。

例:

Google Maps Directions API

Google Maps Geocoding API

Google Maps Elevation API

Google Maps JavaScript API

Google Places API for Android

Google Places API for iOS

 

APIキーの使い方

Google Mapsを表示する場合、ページのヘッダー(又はフッター又はbody内)に 先ほど追加したAPIキーを読み込むコードを記入します。

 

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXX"></script>

 

以上でGoogle マップが表示されると思います。

 

 

-wordpress
-,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

スマホで予約システム

スマホで予約システムが無料で作れる

  今流行りの予約システム   以前から、サロン系やフィットネス系のオンライン予約を頼まれたことがあり、何度か作成してきましたが、 今回は、コロナの影響からも言えると思いますが、 …

ワードプレス

WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた④

  11.メンバー一覧表示のカスタマイズ   メンバー個人個人の登録が終わったら、今度は一覧表示を作ってみます。 あまりごちゃごちゃ触りたくないので、以下のファイルだけ中身を少し変 …

お問い合わせ

WordPressにお問い合わせフォームを入れるならこの2つのどちらか

  お問い合わせフォームのプラグイン WordPressでWebサイトを作成していて、お問い合わせフォームを設置することがあると思いますが、そんな時はプラグインを使うと簡単に設置・導入が可能 …

リストメニューを順番に表示

メニューリストを横から順番に表示させる cssのみ

  cssだけで簡単にメニューなどのリストに動きを付けます。 今回は、右から現れてくるように作ってみました。 さっそくですが、以下にサンプルがありますので、興味がある方はコピペして使ってくだ …

sliderコピー

ヘッダーのスライドショーをページ毎に変える方法

前回の記事で、「ヘッダー画像やスライダーをページ毎に変える方法」を紹介しましたが、 今回は引き続き、スライドショーができるプラグインを使った方法をやってみましたので紹介します。   Smar …