Goolge MapsのAPI keyの取得とOsclassへの地図設置方法

Google Mapsプラグインを使ってOsclassの広告ページに地図を掲載するにあたり、2016年6月から新規に作成したサイトではGoogle API Keyが必要ですので、今回はAPIキーの取得方法をまとめてみました。

Google Maps API Keyの取得手順

まずは以下のページにアクセスします。
https://developers.google.com/maps/web/

Google Maps JavaScript APIをクリックします。
Goolge MapsのAPI keyの取得とOsclassへの地図設置方法

「キーを取得」をクリックします。
Goolge MapsのAPI keyの取得とOsclassへの地図設置方法

「Google Maps JavaScript API をアクティベートする」が表示されますので、内容を確認して「続ける」リンクをクリックします。
Goolge MapsのAPI keyの取得とOsclassへの地図設置方法

Google APIコンソールページへ遷移しますので、「アプリケーションを登録するプロジェクトの選択」の項目で「プロジェクトを作成」を選択し、「続行」ボタンをクリックします。
Goolge MapsのAPI keyの取得とOsclassへの地図設置方法

今度はGoogle API Managerへ遷移しますので、認証情報ページで以下の情報を入力、選択します。
Goolge MapsのAPI keyの取得とOsclassへの地図設置方法

名前分かりやすい管理用の名前を入力します
キーの制限HTTPリファラー(ウェブサイト)を選択します

「キーの制限」で「HTTPリファラー(ウェブサイト)」を選択したら、リクエスト受け入れるドメインを入力します。
Goolge MapsのAPI keyの取得とOsclassへの地図設置方法

リクエスト受け入れるドメインは、Google Mapsを利用するサイトのドメインを指定するのですが、以下のようなワイルドカードを利用した方が良いでしょう。

当ブログのURLはhttp://osclassnavi.comですので、上記のように指定しています。

最後にページ下部の「作成」ボタンをクリックします。
Goolge MapsのAPI keyの取得とOsclassへの地図設置方法

API Keyが表示されますので控えておきます。
Goolge MapsのAPI keyの取得とOsclassへの地図設置方法

Google Maps API キーをOsclassに設置

先の手順で取得したAPI KeyをOsclassのサイトに設置しますが、ここからはGoogle Mapsのプラグインファイルの編集になりますので、
oc-content/plugins/google_maps/index.php
を開きます。

index.phpの18-22行目の以下の記述を、

以下のように変更します。

広告詳細ページへアクセスして、地図が表示されることを確認します。
Goolge MapsのAPI keyの取得とOsclassへの地図設置方法

    SNSでもご購読できます。

    コメントを残す

    *