HOME > 事業内容 > HTML5 > 私の地図帳の使い方
私の地図帳

「私の地図帳」は、スマートフォンで地図案内やルートマップを作成するためのWebアプリです。現在地や目的地の地図を表示してから、地図上にピンを立てたり、ルートを描いたりします。地図はいくつでも作成でき保存や編集、削除が簡単にできます。

LINE、Twitter、FacebookなどのSNSやメールを使って、他の人とも地図を共有することもできます。家族や友達との待ち合わせや道案内、食べ歩きのグルメ店の記録など、様々なシーンでご利用いただけます。

HTML5を利用したWebアプリですので、事前にアプリをインストールする面倒な手間も必要ありません。ご自分のスマートフォンから「私の地図帳」<http://mapnotes.jp>にアクセスするだけで、Androidでも、iPhoneでも、今すぐオリジナル地図を作成できます。

「私の地図帳」の使い方

1.「私の地図帳」にアクセスします

1.「私の地図帳」にアクセスします

スマートフォンのブラウザを開き、「私の地図帳」のURL http://mapnotes.jp を入力し、サイトにアクセスします。

トップページが表示されたら、「start!」ボタンを押してください。




※「私の地図帳」はスマートフォンのブラウザ上で動くWebアプリです。Androidでも、iPhoneでも、どちらの端末でも動作します。

また、HTML5をサポートしているブラウザならパソコン上でも動作します。ただし、画面がスマートフォンに最適化されているため縦長表示となり、地図を大きく広げることもできません。

2.オリジナル地図の作成を開始します

2.オリジナル地図の作成を開始します

地図を新規に作成するには、画面右上にある「+」ボタンをタップします。すると全国地図が表示されます。

※地図が表示されたら画面下をご覧ください。

「地図タイトル1」という文字が表示されます。この文字をタップすればタイトル名を変更することができます。

3.目的地の地図を表示させます

3.目的地の地図を表示させます

3.目的地の地図を表示させます

目的地周辺の地図を表示させるには、次の三つの方法があります。

[1] 「現在地取得」ボタンをタップして、いま居る場所周辺の地図を表示

[2] 「住所検索ボックス」に住所や駅名を入力して、目的地周辺の地図を表示

[3] 指で地図を動かして、目的地周辺の地図を表示

左図では「住所検索ボックス」 に“銀座”と文字入力し、“銀座駅”を選択することにより、東京都中央区の銀座周辺の地図を表示させます。

4.地図にピンを設置し、移動させましょう

4.地図にピンを設置し、移動させましょう

いよいよオリジナル地図の作成にかかります。

地図上にピンを設置するには、画面下にある「ピン」ボタンをタップします。すると、地図の中心にピンが現れます。そのピンを指でつまんで目的の位置に移動します。左図では“有楽町駅”と“銀座4丁目”にピンを設置しています。


※地図上にピンは複数置くことができます。設置したピンの色や形状は自由に変更できます。

5.ピンを編集しましょう

5.ピンを編集しましょう

設置したピンをタップするとピン編集画面が表示されます。ピンの色や形状を変更したり、ピンにメモをつけることができます。

ピンの削除もこの画面から行います。

6.ルートを描画して、案内図を作成します

6.ルートを描画して、案内図を作成します

6.ルートを描画して、案内図を作成します

地図上に案内ルート(線)を描画したり、案内文(画像)を張り付けたりすることができます。案内図の作成は画面下にある鉛筆ボタンをタップします。



描画ツールバーに切り替わります。描画は次の4つのボタンを使って行います。

(a)フリーハンド線の描画

(b)2点間を結ぶ直線の描画

(c)テキストの張り付け

(d)消しゴム

(a)~(d)のボタンを押すと、地図上に“描画パレット”が現れます。パレット上で線の太さや色、透明度の変更を行います。

7.地図タイトルを入れて、オリジナル地図を完成させます

7.地図タイトルを入れて、オリジナル地図を完成させます

案内図の作成が終わったら、画面左上にある「←」をタップし、最初の画面に戻ります。画面下の「地図タイトル」をタップしてタイトル名を変更します。左図では「有楽町駅~銀座4丁目」というタイトルに変更しました。

最後に、右上の「SAVE」ボタンをタップしてオリジナル地図を保存します。

※保存されたオリジナル地図はリストとして表示されます。リストの並び替えや削除も簡単に行うことができます。

※保存は描画途中でも可能です。メモリ不足など不慮のデータ消失に備え、区切りのよいところで「SAVE」ボタンを押して保存してください。

8.オリジナル地図を家族や友人に送ってみましょう

8.オリジナル地図を家族や友人に送ってみましょう

8.オリジナル地図を家族や友人に送ってみましょう

待ち合わせの場所やお気に入りのスポットをLINE、Twitter、Facebook、Google+などのSNSを使って友達と共有できます。その他、E-mailで地図のURLを送り、相手にオリジナル地図を見てもらうこともできます。

リストページの「共有」ボタンを押すと、地図共有ページに移動します。

地図共有ページでは、画面下の「SNS」ボタンをクリックし、地図URLを送信することで相手との地図共有が簡単に行えます。

9. 試しに「LINE」を使ってオリジナル地図を共有します

9. 試しに「LINE」を使ってオリジナル地図を共有します

9. 試しに「LINE」を使ってオリジナル地図を共有します

地図共有ページの「LINE」ボタンをタップします。共有する相手を選んで地図URLを送ります。その際、コメントを追加しても大丈夫です。(左の2つの画像は共有元のイメージです)

9. 試しに「LINE」を使ってオリジナル地図を共有します

9. 試しに「LINE」を使ってオリジナル地図を共有します

相手のLINEには、左のような画面が表示されます。このURLを相手がタップすると、さきほど作成したオリジナル地図が相手の画面にも表示され、相手との地図共有がなされます。

Twitter、Google+、Facebookなども多少の操作の違いはありますが、どのSNSもわずかなステップで相手にオリジナル地図を送ることができます。