Simple Mapプラグインの実験用
- 「Simple Mapプラグイン」の動作実験ページ。
- 「Simple Mapプラグイン」を利用するとGoogleマップをページ内に挿入することができる。
プラグインを利用してアクセスマップを作成する
参考書籍：「いちばん やさしい WordPressの教本」 P179〜P183。
地図を表示するコードは、前後を[ ]で囲み、中に下記のコードを書く。
map addr=”（ここに表示したい住所を書く）”
＊コードは（住所）の部分を除いて半角で入力する。
◆ JR総武・中央線 市ヶ谷駅より徒歩8分
◆ 東京メトロ半蔵門線 半蔵門駅より徒歩10分
地図の高さと幅、そして倍率を変えてみた
地図のサイズを変更するコードは、前後を[ ]で囲み、中に下記のコードを書く。
map addr=”住所” width=”〇〇〇px” height=”〇〇〇px” zoom”〇〇”
◆ JR総武・中央線 市ヶ谷駅より徒歩8分
◆ 東京メトロ半蔵門線 半蔵門駅より徒歩10分
幅を400ピクセル、高さを300ピクセルにして、倍率を18に設定した。
地図のサイズを変更することによって、上部に書いたテキストとのバランスがよくなった。
注意点：テキストの通りにやっても「API Key」を使わないとGoogleMapは表示されない
2017年11月25日現在、テキストの通り「map addr=”（住所）”」と記述をしてもマップは表示されなかった。原因は、GoogleMap表示の仕様変更により「API Key」を取得して、Simple Mapプラグインの設定でAPI Keyの入力が必要になったからだ。
Google Map API Keyの取得方法
https://developers.google.com/maps/web/
上記のGoogleデベッローパーズのサイトから、手順の通り進めていくと「GoogleMap API Key」の取得ができた。
英語が読めないのでGoogle翻訳で直訳しながら、進めていった。
I agree that my use of any services and related APIs is subject to compliance with the applicable Terms of Service.（私は、サービスおよび関連するAPIの使用が適用される利用規約の遵守の対象であることに同意します。）
You’re all set!（あなたはすべてセットです！）
You’re ready to start developing!（あなたは開発を開始する準備が整いました！）
YOUR API KEY（あなたのAPI KEY）
「（ここに取得したGoogleMap API Keyが表示された）」
To improve your app’s security, restrict this key’s usage in the API Console.（アプリのセキュリティを向上させるには、APIコンソールでこのキーの使用を制限します。）
Done（完了）
GoogleMapが表示されるようになった
GoogleMap API KeyをSimple Mapプラグインが促してきた、箇所にGoogleMap API Keyを入力をして設定を保存後にようやく指定した住所のGoogleMapが表示された。
API Keyとは（参考サイト：なんでもパソコン用語辞典）
APIキーとは、「アプリケーション・プログラミング・インターフェイスの略」。自分の会社などで作ったWebサービスのサイトの機能を、外部のサイトやアプリケーションから利用できるようにする為に発行する暗号鍵のこと。
＊2021年10月12日に参考サイトである「なんでもパソコン用語辞典」のリンクを確認したら、リンク切れになっていたのでリンクを削除した。
作成日：2017年11月25日
更新日：2021年10月12日