SIRIUS(シリウス)のサイトにGoogleマップを使った地図を埋め込む簡単な方法

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他

新サイトのご紹介

SIRIUSの大型バージョンアップ(ver1.5)によってシステム内部に様々な改良が加えられました。

これにより当サイトでご紹介している独自の機能拡張の一部が【新】SIRIUSテンプレートに標準で搭載されるようにもなってます。

反対に大型バージョンアップによって、これまでご紹介してきたTipsの中にはうまく作動しないものも出てきてます。

よって今後このサイトの更新はストップすることにしました。(サイトはしばらくは残しておきます)

これに伴い、【新】SIRIUSテンプレートに対応した『SIRIUSでホームページ作成』サイトを新規公開しました。

さらに【新】SIRIUSテンプレートをベースにしたカスタムテンプレート【Volar】も公開中です。(※SIRIUS購入の特典になります)

【Volar】はこれまで私がご紹介してきた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 が仕様を変更したりサービスを停止した場合は地図が正しく表示できなくなることがあります。

 

以上です。

 


てっぺん