サイトにGoogleマップを使った地図を埋め込む簡単な方法

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

サイトにGoogleマップを使った地図を埋め込む簡単な方法

サンプル画像

会社案内とか販売店の紹介などでサイト上に地図を添付したいときがあるかと思います。

 

そんな時に便利なのが『Google Maps API』という Googleが提供している無料地図サービス。
見やすいし使いやすいし誰もが知っているだろうし。。。

 

だたこれをイチから設計していったのでは手間と時間がかかりすぎるし、
そもそもプログラムなどを全く知らない方にとっては敷居が高すぎます。

 

でも大丈夫。
ネット上にはこういうのをさくっと作ってくれる WEBサービスがいろいろとあるんですよ。

 

今回はこの WEBサービスを使って
実際にサイトに地図を載せるまでをシミュレートしてみました。

 

使わせていただいたのは「Googleマップ作成」という地図作成WEBサービスです。

 

ここのメリットは「とにかく早い!」。
こんな↓地図がわずか 10分で作れちゃいます。

 

キャプチャ画像

 

実際に作ってみたよ

今回は例として「東京駅」をターゲットにしてみました。

 

Googleマップ作成」を開き、『さっそく地図を作ってみる!』をクリックします。

 

STEP01:
住所や建物名などを入力するか右側の地図で実際に探して目的地を特定させます。

 

キャプチャ画像

 

STEP02:
表示方法を選択します。(特に難しい項目はありません)

 

キャプチャ画像

 

一番下の『URLで指定する』は、矢印画像を自作のモノで置き換えたいときにその画像URLを記入します。

 

STEP03:
表示させたいテキストを入力します。

 

キャプチャ画像

 

画像URLというのは、会社ロゴなども同時に表示させたいときにその画像URLを記入します。

その下の画像左寄せ・右寄せは、ロゴ画像などをテキストのどちら側に表示するかの指定です。

 

『地図の表示を確認』をクリックするとプレビュー画面がポップアップします。
修正項目があればこの時点で直しておきます。

 

STEP04:
タグを取得します。
『地図のタグを作成』をクリックすると下の空欄にコピーペースト用のタグが現れるので全文コピーしましょう。

 

キャプチャ画像

 

シリウスに戻って、地図を表示させたいページにコードをペーストします。

 

しかしそのままではシリウスがスクリプトコードと認識してくれないので、
ペーストしたコードを範囲選択→選択範囲内で右クリック→タグ挿入→”改行無理エリア”を選択して <noReturn> という独自タグではさんでやります。

 

すると下の画像のように <noReturn>~</noReturn> で囲まれます。

 

キャプチャ画像

 

これで保存→サイト生成→アップロードをかけます。

 

ブラウザで確認してみると、、、ちゃんと地図が表示されてました。

 

キャプチャ画像

 

今回の WEBサービスは Google Maps API を利用してます。Google Maps API が仕様を変更したりサービスを停止した場合は地図が正しく表示できなくなることがあります。

 

以上です。

購入ページへ


TOPへ戻る