Ｇｏｏｇｌｅマップ利用ツール
操作方法
ソース
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Ｇｏｏｇｌｅマップ利用ツール</title>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyBIOwQhq7oibUNSJ0L70Cl0Y7YR4w9H1aU">

//地図の初期設定
//横幅(地図;索引),高さ,緯度,経度,精度,種類(0:地図/1:衛星),索引(0:選択/1:一覧/2:両方);並び順(0:正順/1:逆順),順路線(0:なし/1~:太さ),自動巡回(0:なし/1~:巡回秒),吹き出しサイズ（横 ; 縦）,地名検索(0:なし/1:窓あり/2:外部起動）,初期表示,ストリートビュー(0=未使用/1=クリック地点表示）
// (横幅,高さの100以下は、ディスプレィに対する％で自動計算)
map_win="900;180,500,35.0857,137.1230,13,0,1;0,4,0,240;120,2,豊田市新町1,1";
//　　　　0 1 2 3 4 5 6 7 8 9

nn=0;dt=new Array();//marker=new Array();point=new Array();
// 名称?アイコン ,緯度 ,経度 ,ＵＲＬ ,コメント(改行は「;（半角セミコロン）」で区切る) ,地図精度 ,種類,ストリートビュー（""=未使用/0～360:北～東～南～西～北向き））,ナレーション
dt[nn++]="逢妻交流館?home0.png,35.0858,137.1233,http://www.hm3.aitai.ne.jp/~ph1/;800;600,Tel(0565)34-3220;〒4710044;愛知県豊田市新町1-178;kawasemi.jpg width=200,,,220,地域の交流や生涯学習の場になっています";
dt[nn++]="小清水小学校?B,35.0862,137.1235,http://www2.toyota.ed.jp/swas/index.php?id=s_koshimizu,Tel(0565)-32-0193;〒4710049;愛知県豊田市田町2-81;akagera.jpg width=200,14,0,320,１００年を超える歴史のある小学校です";
dt[nn++]="逢妻中学校?C,35.0856,137.1253,http://www2.toyota.ed.jp/swas/index.php?id=c_aizuma,Tel(0565)33-7881;愛知県豊田市新町1-46-5;goisagi.jpg width=200,,,180,高度成長期、周辺の人口の急増に合わせて新設された中学校です";
dt[nn++]="美山小学校?A,35.0680,137.1180,http://www2.toyota.ed.jp/swas/index.php\?id=s_miyama,Tel0565)28-3458;〒4710849;愛知県豊田市美山町4-1;aogera.jpg width=200,,,20,トヨタの元町工場の拡充ややインターチェンジが建設され、周辺の人口の急増に合わせて新設された小学校です";
dt[nn++]="衣台高校?D,35.0985,137.1175,http://www.koromodai-h.aichi-c.ed.jp/,Tel(0565)33-1080;〒4710057;豊田市太平町平山５番地;aosagi.jpg width=200,,,270,平成になってから開校した新しい高校です";
dt[nn++]="愛知学泉大学?F,35.1045,137.1233,http://www.gakusen.ac.jp/u/index.php,Tel(0565)35-1313;〒4718532;愛知県豊田市大池町汐取1;jobitaki_m.jpg width=200,,,0,";
dt[nn++]="日赤看護大学?G,35.1013,137.1191,http://www.redcross.ac.jp/library/,;;;;,,,0";
</script>
</head>
<body style="text-align:center">
<font size=6>Ｇｏｏｇｌｅマップ利用ツール</font><br />
<script src="https://qpon-toyota.com/google_map/google_map_3.js" charset="utf-8">
</script>
</body>
</html>
  1. ＨＴＭＬファイルは必ず文字コードを「ＵＴＦ－８」にして保存してください
  2. 赤字で書いたキーは、あなたのキーに書き換えてください。
    ＱＬＩＮＫメンバーの方は、アップするＵＲＬを連絡いただければ、このキーで使えるように登録しますので申し出てください
    自分でキーを取得される場合は
    • Maps Javascript API(地図用）
    • Geocoding API (検索用）
    の２つを有効にしておいてください

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

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

  5. 噴出しのコメントに写真を表示したい場合は桃字で書いたように「;」で区切った最後の位置に「写真ファイル」を書きます、「半角スペース」を入れてから「width=横幅」または「height=高さ」を書いて表示サイズを指定してください。
    縮小表示された写真をクリックすると原寸大の写真が別ウインドウに表示されます
  6. 黄緑字で書いた吹き出しサイズ（横；縦）は省略すると内容にあわせて大きさが変化し、指定するとサイズは固定し、内容がスクロールして見えるようになります。

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

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

  9. 個別マーク地点データの、ＵＲＬ以降は省略できます（途中を省略するとき区切り記号の「 ，］まで消さないでください）

  10. ストリートビユーを表示する場合が紺色のように方位を３６０度で表してください

  11. ナレーションを入れる場合はこの位置に日本語で書くと読み上げてくれます

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

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

  14. 別のページに検索窓だけつけて、地図のページを呼び出すソースの要望が多いので以下に例を書きます。
    <script type="text/javascript">
    <!--
    ur="地図のページのＵＲＬ";
    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='https://qpon-toyota.com/google_map/gmap.html?東京タワー?18?1'>東京タワー</a>

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

    <a href='https://qpon-toyota.com/google_map/gmap.html?35.6590,139.7449?18?1'>東京タワー</a>

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

    <script type="text/javascript" src="https://qpon-toyota.com/google_map/fullmap.js">
    </script>

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

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

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