Google Maps API を使って地図を表示するカスタマイズ

2016年6月以降、a-blog cms で Google Maps を表示するために Google Maps の API Key が必要になりました。ここでは、API Key の発行から a-blog cms 管理画面の登録までをおこないます。


API Key を登録する前は、このようにユニットなどの地図が表示されなくなります。


API Key(エーピーアイキー)とは…
あるWebサービスの機能を外部のWebサイトやアプリケーションで使用するために発行する暗号鍵のこと

下準備

a-blog cms の管理画面に登録するための Google Maps API Key を取得します。

本記事は2016年11月現在の情報をもとに作成しています。各種管理画面の仕様変更の可能性があります。

Google Maps API Key の取得

  1. プロジェクトを作成する
  2. API を有効にする
  3. 認証情報を作成する
  4. API Key を発行する

1. プロジェクトを作成する

Google API Console にアクセスし、「新しいプロジェクトを作成」リンクをクリックしてプロジェクトを作成します。


「プロジェクトを作成」をクリック


任意のプロジェクト名をつけてください。入力後、「作成」リンクをクリックします。


任意のプロジェクト名をつけてください。


2. APIを有効にする

作成したプロジェクトを選択後、Google Maps を表示するために必要なAPIを有効にしていきます。以下のAPIを有効にしてください。


「ライブラリ」ページで有効にしたいAPIのリンクをクリックします。


「ライブラリ」で各APIのページを選択し、「有効にする」リンクをクリックするとAPIが有効になります。(すでに有効な場合は「無効にする」と表示されます)


「有効にする」リンクをクリックしてください。


3. 認証情報を作成する

API Key を発行し、a-blog cms をインストールしたサイトのURLを登録します。

左メニューの「認証情報」をクリックし、「認証情報を作成」ボタンをクリックします。


「認証情報を作成」ボタンをクリックすると、プルダウンメニューが表示されます。


ポップアップで認証情報の種類が表示されます。「APIキー」を選択します。


「APIキー」を選択してください。


「APIキーを作成しました」というポップアップが表示されます。「キーを制限」リンクをクリックしてください。


「キーを制限」リンクをクリックしてください。


API Key の設定を入力します。


名前 任意のAPI Key名を入力してください。
キーの制限 「HTTPリファラー(ウェブサイト)」を選択してください。
このHTTPリファラーからのリクエストを受け入れる 「http://」「https://」以下のURLを入力してください。

すべての項目を入力したら、「保存」ボタンをクリックします。


必要事項を入力して、「保存」ボタンをクリックします。


4. API Key を発行する

「認証情報」画面の項目「キー」に API Key が表示されます。この文字列をコピーしてください。


「キー」項目の文字列が API Key です。


以上で、Google Maps API Key の発行が完了しました。

カスタマイズ

a-blog cms の管理画面>コンフィグ>プロパティ設定の「Google Maps API Key」の項目に、先ほどコピーした文字列をペーストしてください。


プロパティ設定の「Google Maps API Key」項目に API Key を貼り付けてください。


以上で、a-blog cms への Google Maps API Key の登録作業は完了です。地図ユニットが正常に表示されることを確認してください。


地図ユニットが正常に表示されました。


注意点

a-blog cms Ver. 1.7.0 〜 Ver. 2.6.1.1 をご利用の場合は、以下のカスタマイズが必要です。

config.jsの設定

/js/config.js に以下の1行を追加します。発行したAPI Key をソースコードの「key=」の後に貼り付けてください。

ACMS.Config({
    googleApiParams: 'key=ここにAPIキー',   // この行を追加
...

Google Static Mapsの対応

/themes/system/include/unit.html を、現在使用しているテーマの /themes/テーマ名/include/ に複製します。 (各テーマで継承している場合は、継承したファイルも修正が必要です)

地図ユニット部分(<!-- BEGIN unit#map --> から <!-- END unit#map --> まで)を以下のコードに差し替えてください。imgタグ内に「&key=ここにAPIキー」を追加しています。必ず取得したAPI Key を貼り付けてください。

<!-- BEGIN unit#map -->
<!-- 地図 -->
<div class="column-map-{align}{display_size_class}"{display_size}[raw]>
<img src="//maps.google.com/maps/api/staticmap?center={lat},{lng}&zoom={zoom}&size={x}x{y}&maptype=roadmap&markers={lat},{lng}&key=ここにAPIキー" alt="{msg}" width="{x}" height="{y}" title="クリックで地図が動かせるようになります。">
</div><!-- END unit#map -->

同じタグ付けがされている記事