SIRIUS(シリウス)のサイトに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

タグを取得します。

 

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

 

キャプチャ画像

 

STEP05

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

 

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

 

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

 

キャプチャ画像

 

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

 

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

 

キャプチャ画像

 

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

 

以上です。

 

購入ページへ


てっぺん