Googleマップ利用ツール




操作方法
  • 地図の移動は、地図上をマウスでドラッグ(マウスボタンを押したまま動かす)か周囲の余白でマウスボタンを押し続けてください。
  • 地図の拡大・縮小はマウスホィールを回すか、下のバーの「拡大」・「縮小」ボタンを押し続けてください。
  • 下のバーの「地図/衛星」ボタンをクリックすると同じ地点の同じサイズの衛星写真と地図が交互に入れ替わります。
  • 地図上のマークアイコンをクリックすると吹き出しが現れて説明が表示されます。
    吹き出し内の名称がクリックできる場合は、そこのホームページが開けます。
    ストリートビューがセットされていと小窓で操作してみられまっす。
  • 下のバーに名称の選択窓があったり、右に一覧表がある場合は、そこを選択しても、地図が移動し、吹き出しが表示されます。
  • 「自動巡行」ボタンがある場合、クリックすると一定間隔で吹き出しを移動しながら回ります。もう一度クリックすると静止します。
  • 「自動巡行」中、吹き出しにマウスを載せると、マウスポインターが砂時計になり、静止します、読み終わったらマウスを外してください、自動巡行が再開されます。
  • 「検索窓」に住所か施設名を入力すると、全国どこでも飛んでいきます(英文で入力すれば全世界有効です)
  • ビュー表示をオンにすると、クリック地点のストリートビューが見られます。

ソース
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift-jis"/>
<title>Googleマップ利用ツール</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAmF6Ck4q〜〜" type="text/javascript" charset="utf-8">
</script>
<script type="text/javascript">
//地図の初期設定
//横幅(地図;索引),高さ,緯度,経度,精度(1~18),種類(0:地図/1:衛星),索引(0:選択/1:一覧/2:両方/3:非表示),順路線(0:なし/1~:太さ),自動巡回(0:なし/1~:巡回秒),吹き出しサイズ(横 ; 縦),地名検索(0:なし/1:窓あり/2:外部起動),初期表示,ストリートビュー(0=未使用/1=クリック地点表示)
//       (横幅,高さの単位はピクセル、ただし100以下は%でディスプレィに対する%で自動計算)
map_win="70;140,70,35.0857,137.1230,13,0,2,4,4,240;120,2,豊田市新町1";
//マーク地点
nn=0;dt=new Array();//marker=new Array();point=new Array();
// 名称?アイコン ,緯度 ,経度 ,URL ,コメント(改行は「;(半角セミコロン)」で区切る) ,地図精度 ,種類,ストリートビュー(""=未使用/0〜360:北〜東〜南〜西〜北向き)
dt[nn++]="逢妻交流館?num0.gif,35.0857,137.1232,http://www.hm3.aitai.ne.jp/~ph1/,Tel(0565)34-3220;豊田市新町1-178;genkan.jpg,14,0,220";
dt[nn++]="小清水小学校?A,35.0862,137.1232,,Tel(0565)-32-0193;豊田市田町2-81;zenkei.jpg,320";
dt[nn++]="逢妻中学校?C,35.0850,137.1250,photo1.gif width=200;,Tel(0565)33-7881;豊田市新町1-46-5,,,180";
dt[nn++]="美山小学校?B,35.0680,137.1176,,Tel0565)28-3458;豊田市美山町4-1;kousya.jpg,,,20";
dt[nn++]="衣台高校,35.0981,137.1164,,Tel(0565)33-1080;〒4710057;豊田市太平町平山5番地,,,270";
dt[nn++]="桜花学園短大,35.0977,137.1135,http://www.hoiku.ohkagakuen-u.ac.jp/n-index/top.htm;800;600,,17,1,,,";
dt[nn++]="愛知学泉大学?num1.png,35.1047,137.1252,http://www.gakusen.ac.jp/u/index.php,Tel(0565)35-1313;〒4718532;愛知県豊田市大池町汐取1,17,1,0";
dt[nn++]="日赤看護大学?num2.png,35.1021,137.1195,http://www.redcross.ac.jp/library/,,15,1,0";
</script>
<style type="text/css">
v\:* { behavior:url(#default#VML); }
#map_win a{color:#440000;}
#map_win a:hover{ color:#ff0000;}
</style>
</head>
<body style="text-align:center">
<font size=6>Googleマップ利用ツール</font><br />
<script type="text/javascript" src="http://qpon.quu.cc/google_map/google_map.js" charset="shift-jis"> </script>
</body>
</html>

1、赤字で書いたキーは、あなたのキーに書き換えてください。
取得は Google Map APIv2 キーの取得法を参照してください

2、青字で書いた漢字コードは、Googleの使用漢字がパソコンのshift-jisとは違うuft-8なので、必ず追加記入しておかないと、文字化けが起きたりエラーになったりして結合して使えません。

3、緑字で書いた緯度,経度は、このツールの地図の該当地点をクリックすると、下のバーに表示されるのでコピーして貼り付けると便利です。

4、橙字で書いたアイコンは省略時はでマウスを載せると名称が表示されます。、?A〜?Z はが 、「?イメージファイル」と書けばそのイメージ、たとえば「?home0.png」や「?num1.png」のように使えますがマウスを載せたときの表示はできません。

5、噴出しのコメントに写真を表示したい場合は桃字で書いたように入れたい位置に「;」で区切って「写真ファイル」を書きます、写真を変形したい場合は「半角スペース」を入れてから「width=横幅」または「height=高さ」を書いてください。

6、黄緑字で書いた吹き出しサイズ(横;縦)は省略すると内容にあわせて大きさが変化し、指定するとサイズは固定し、内容がスクロールして見えるようになります。

7、順路を線で結ぶ場合は茶色の記述を追加して、パラメーターを「1以上(数値は太さ)」にしてください。 「,太さ;色コード;透明度(9〜1),」と線の要素をすべて指定することもできます。

8、空色で書いたように個別に地図精度や種類を指定して切り替えることができます。未指定の場合は現在の表示と同じになります。

9、紫色で書いた「URL」は吹き出しの名称をクリックしてそのページが開けるようになります。
さらに「URL;横幅;高さ」と書くと、開くウインドウの大きさが指定できます。

10、自動巡行を最初からさせたい場合は、<body>タグ内にonload="junkai();"と書いてください。(巡回秒が1以上になっていること)

11、個別マーク地点データの、URL以降は省略できます(途中を省略するとき区切り記号の「 ,]まで消さないでください)

12、ホームページビルダー等に貼りつけて使う場合や、自分でタグを書いて改造する場合は「XHTML」のルールに従って、終了タグの無いタグ例えば<BR><BR />のように「 /」(スペースとスラッシュ)を挿入してください。

13、地名検索を外部起動で使う場合は、地図のページのアドレスの後ろに「?検索キーワード」をつけてリンクしてください。
<a href="http://地図のURL/****.html?東京タワー">東京タワー</a>
のように(自分で登録した施設名やコメントもキーワードとして検索できます。)

14、検索は「?緯度,経度」でも可能です。さらに「?地図精度?地図種類(0:地図/1:衛星)」も指定できます。
<a href="http://地図のURL/****.html?-25.694,-54.4373?15?1">ブラジル・イグアスの滝</a>
のように、世界のどこでも、任意の精度の衛星写真を呼びだすことも可能です。

15、別のページに検索窓だけつけて、地図のページを呼び出すソースの要望が多いので以下に例を書きます。

<script type="text/javascript"> <!-- ur="地図のページのURL"; q=5;//地図精度 p=0;//地図種類(0:地図/1:衛星) function map_open(){ s=document.getElementById("kensaku").value; window.open(ur+"?"+s+"?"+q+"?"+p); } document.write('<input type=text size=60 id="kensaku" value="">'); document.write('<input type=button onClick="map_open()" value="検索">'); //--> </script>
住所・施設名


16、地図のページも持っていない場合で著名な場所や施設を表示したい場合は

<a href='http://qpon.quu.cc/google_map/gmap.html?東京タワー?18?1'>東京タワー</a>

のように、私の地図をお使いください。
地名の代わりに、事前に地図で該当位置をクリックして、左下に表示される座標を書けばどこでも表示できます。

<a href='http://qpon.quu.cc/google_map/gmap.html?35.6590,139.7449?18?1'>東京タワー</a>

さらに次のように書くとフルスクリーンで表示されます。
<head>タグ内に

<script type="text/javascript" src="http://qpon.quu.cc/google_map/fullmap.js">
</script>

と書き、
それぞれの記事のところには

<a href="javascript:fullmap('東京タワー?18?1')">東京タワー</a>
<a href='javascript:fullmap('名古屋ドーム?18?1')">名古屋ドーム</a>

のように書きます。
17、システムを改造したい場合は「google_map.js」←を右クリックしてダウンロードしてお使いください。