簡単!無料の地図作成
企業のウェブサイトに欠かせないもののひとつに、アクセスマップがあります。
(通信販売などの企業であれば地図は必要ありませんが。)
会社に、お店に訪れてくれるお客様にとって、わかりやすい地図を掲載することが大切です。
細かすぎても、大雑把過ぎても伝わらず、会社案内に地図が掲載されているにもかかわらず、別の地図サイトに訪問先の住所を入れなおし、地図を出力してから取引先に向かう方も多いと思います。
アクセスマップは会社ごとに様々な個性が出ますが、そんな中最近流行のGoogleマップを使用したアクセスマップをご紹介します。
WordPressを使用すれば、Googleマップを使用した誰にでもわかりやすい地図を自分のウェブサイトに簡単に設置することができます。Googleマップをこの記事に読み込んでご説明します。
たとえば、店舗のウェブサイトに地図を載せたい場合以下のようなことができます。
————————————————————————————————————————————————————
焼肉職人ベアーズ&ベトナム美食@東京六本木
住所:東京都港区六本木4-1-9ベルザ六本木1階
電話:03-3583-2929
地図はこちら←をクリック
アクセス:六本木駅「6番」出入口から徒歩3分
————————————————————————————————————————————————————
レイアウト的にここに地図を載せず、文章から直接Googleマップのページを表示させたい場合に効果的です。
そして最近流行なのが下記です。
自社ウェブサイト内にGoogleマップを機能ごと表示させるパターンです。
大きな地図で見る
↑ この「大きな地図で見る」ボタンを押すと、上のパターンで表示されたGoogleマップのページに移ります。
下のパターンの場合は、もちろん地図上のマウス操作で、場所の移動、縮尺の変更、航空写真の表示などが行えます。
ここに表示される地図の大きさも簡単に変更することができます。(この地図は少し大きくしてあります。)
両方に共通して言えることは、
・費用がかからない
・縮尺や中心地を自由に選択できる地図である
・地図を出力する際の表示設定を考える手間が省ける
これらはGoogleマップをそのまま利用しているので当たり前ですが、初めてウェブサイトを作ろうという方にはお勧めです。
では実際にどのように自社ウェブサイトに表示させるのかをご説明します。
1.Googleマップにアクセスする
インターネットに接続し、Googleマップのページを表示させます。

2.店舗名、住所を入力し検索or表示させたい場所にマウス操作で移動する
表示させたい画面に移動したら、ページの右上にある「リンク」ボタンを押してください。

3.自社ページにソースコードを貼り付ける
先日ご説明した、WordPressのダッシュボード(管理画面)にアクセスし、地図を表示させたいページ、投稿(ブログ)画面を表示させます。
HTMLモードで文章上の地図を表示させたい箇所に先ほどのソースコードを貼り付けます。
(Googleマップの画面を開きながら、コピー&ペーストで簡単に行えます。)
テキストリンク(文字をクリックするとGoogleマップに飛ぶ上記のパターン)にしたい場合は、Googleマップに表示されたコードの上段をリンクさせたい文字の箇所に設定します。
Googleマップの機能ごと自社ウェブサイトに入れたい場合は、同下段のコードをそのまま表示させたい場所に貼り付けます。

上の画像を見ると、HTMLの構文がとても難しいように感じますが、「2」の画像のリンクコードをコピー&ペーストしただけで非常に簡単に作業ができます。
※Googleマップはワードプレスと同様に無料のオープンソースの一面も持っています。Googleマップから取得したリンクコードを使用して自社ウェブサイト内に地図を挿入しても著作権などの問題は発生しません。
ワードプレスを使用すれば、誰でも簡単に自社のアクセスマップを作成することができます。(弊社のサービスではお申し込みいただいた際に必要であれば、無料で作成しています。)
今回はGoogleMapと、WordPressの親和性をご説明する形になりましたが、他のオープンソースとの親和性も非常に高いのがWordPressです。また、Googleマップの取り込みをさらに容易に行えるPlug-inもあります。
初心者の方でも簡単に操作できて、WordPressに慣れ、ウェブサイト制作に少しでも役立てるような情報を今後も掲載していきたいと思っています。

