【WordPress】Google map APIを取得する方法

WordPress

【やりたいこと】Google map APIを取得したい

Google map APIの取得、めんどくさいですよね~、

ということで、

Google map APIを取得する方法を一番シンプルな記事を目指して書きました!

【10分でできる】一番シンプルなAPIの取得方法

※ダウンロード時間は10分の中に含まれていません。

1.使用したもの

・ロリポップレンタルサーバー スタンダードプラン

ロリポップ!レンタルサーバー
ホームページ運営なら、ずっと使えるレンタルサーバー「ロリポップ!」簡単、多機能、充実サポート、高速性能で、初心者から商用サイトまで安心してご利用いただけます。WordPress、EC-CUBEもたったの60秒で設置可能。まずは無料お試し10日間。

・WordPress 4.9.8

※WordPressはロリポップユーザー専用ページからインストールしました。

・テーマ Hueman

Hueman
Hueman テーマはサイトのトラフィックを増加させ、訪問者のエンゲージを増やす手助けをします。ロードが早く、100%モバイルフレンドリーであると Google にも認識されています。また、WordPress.org 内のブログ / マガジン用テーマで最高レートを獲得し、世界中の7万以上のウェブサイトが使用しています。

2.手順

※Googleのアカウントをお持ちでない方は、はじめにGoogleアカウントを作成してください。

①Google Maps PlatformでAPIの取得

こちらがGoogle Maps PlatformのURLとなります。

位置情報 API  |  Google Maps Platform  |  Google Cloud
Google Maps Platform を使えば、正確なリアルタイム データと動的な画像を使用して、臨場感のあるロケーション体験を生み出したり、ビジネス上の意思決定をより的確に行ったりすることができます。

f:id:hk-ryukyu:20181202031028p:plain

右上の「使ってみる」をクリックします。

f:id:hk-ryukyu:20181202031558p:plain

Mapsにチェックをつけます。

f:id:hk-ryukyu:20181202031717p:plain

Project名を記入します。どんな名前でもかまいません。

後は、指示通りに進みます。

f:id:hk-ryukyu:20181202031819p:plain

上記のように、APIが表示されていれば成功です。

②キーの制限

取得したAPIを指定のサイトのみで使用できるように、キーの制限を行います。

f:id:hk-ryukyu:20181202032144p:plain

認証情報の保護をクリックします。

f:id:hk-ryukyu:20181202032444p:plain

アプリケーションの制限でHTTPリファラー(ウェブサイト)を選択します。

下の方で、APIを使用するサイトのURLを記入します。

APIを使用するサイトのURL記入は、ただコピペするだけではうまくいきません。
私のサイトのトップページURLが「http://hk-underwater.club/kakinohana/」になります。これをAPIを使用するサイトに指定する場合は、
hk-underwater.club/*
と記入します。

③編集方法

f:id:hk-ryukyu:20181202033401p:plain

後にキー制限を改めて編集する場合は、

認証情報を選択し、編集するAPIキーの右側にある鉛筆マークをクリックします。

すると、②のキー制限を設定したページに移動します。

3.追記

Google map APIを使用するWordPressのプラグインは別記事で紹介します!(^^)!

【最後に】Showroomとマッハ新書の紹介

ShowroomでUnity配信をしています。リアルタイムの勉強の様子を見てみたい方におすすめです!(^^)!

[https://www.showroom-live.com/ada132182048

以下は、私のUnity学習体験記となっております。

「他人の勉強方法が知りたい」という方におすすめのマッハ新書です!(^^)!

コメント

タイトルとURLをコピーしました