検索結果: Atelier

このブログを検索

Atelierで“JG”が含まれるブログ記事

2010年1月29日

Google Maps API で旅行地図を作る：線画を描くなど

　Studio YAMAKO さんのオーナーが、昨秋、中欧（ドイツ・チェコ・スロバキア・ハンガリー・オーストリア）を旅行したときの写真をコメント付きで、12 回に分けて投稿されている。
　これを題材に、Google Maps API を使って、旅行地図を作ってみた。今まで、何回か同じような旅行地図を作成しているが、今回はいくつかの新しい試みをしてみたので、いままでに学習したことも含めて、備忘録として記録しておきたい。

　Google Maps API を使って、Web ページ上に自作地図を埋め込むには、

HTML(CSSを含む）：　自分で Web ページが作れる。
JavaScript：　簡単な文法が分かる。
XML：　タグの意味が分かるなど文法がわかる。

の知識が必要であるが、基本的な文法さえ知っておればなんとかなる。それ以上の細かいことは、ネット上で検索すれば教えてくれるサイトが沢山ある。どのサイトが親切かを知っている方が重要である。私は、英語のページであるが、 w3schools.com を重宝している。体系的によくまとめられており、独習にもってこいである。
　また、Google Maps API でWeb ページ上に地図を埋め込むには、サンプル・コードがネット上で提供されているので、これを Copy&Paste して、自分用に修正し利用すればよい。詳細な部分は、理解しようとすると学習に時間がかかる。ただ、自分用に修正するときに、上のような基本的な知識は必要だろう。
　サンプル・コードはいろいろなサイトで提供されているが、私は、これも英語のサイトであるが、"Google Maps API Tutorial" のコードを主として参照させてもらっている。自分のやりたいことが、整理された形で提供されている。
　今回、地図上に線を描くサンプル・コードは、XMLファイルを使いたいこともあって、このサイトのコードを自分なりに修正して使用した。
日本語のサイトでは、Ajax Tower の「Google Maps入門」に多くのサンプル・コードがある。
　書籍は、「Google Maps API 徹底活用ガイド」を購入した。Google Maps API の基本的なユティリティが解説されているので、理解を助けてくれる。

　今回作った地図は、次のような構成になっている。

中欧の全体地図：　訪問した都市に通常マークが表示される。
1. このマークをクリックするか、地図の右欄にある地名をクリックすると、吹き出しが表示される。
2. 吹き出しの中に表示されている「詳細地図」をクリックすると市街地図にリンクする。
3. 各都市間をブルーのラインで訪問順に結んでいる。
市街地図：初期に表示する地図のタイプを航空写真にしている。

地図の右欄にある場所のチェックボックスをクリックすると番号入りマークが表示される。
場所名の下の青字をクリックすると写真が lightbox 形式で表示される。

いずれの地図にも、地図を拡大・縮小できるコントロール、地図のタイプを切り替えるボタン、地図の縮尺をあらわすスケールが表示されている。

　　これらの地図は、上記に記したサイトからいただいてきたコードを猿まねで自分なりに修正したものである。
中欧の全体地図は、HTML ファイルのなかにある Javascript で XMLファイルを呼び込んでいる。この Javascript の中で、Google Maps API が提供するユティリティが使われている。　具体的なコードを以下に示す。

全体地図用HTML(include Google Maps API JavaScript)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<style type="text/css">
    v＼:* {   behavior:url(#default#VML);   }
    </style>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=???????????-TOJLbO9UBLVgjJC7W8hRCNFlWI0Fg132ssdjgyNcr14mm9hSKsn5??????????????_Ypmz1A" charset="utf-8" type="text/javascript"></script>
	
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />	

<!-- POPUP Window -->
<script type="text/javascript" src="http://n-shuhei.net/script/delcash.js"></script>

</head>

<body onunload="GUnload()">
<div align="center"> 
<table border="1" width="auto" cellspacing="0">
<thead><tr>
<td bgcolor="#FFFFCC" align="center" colspan="2"><font color="#000000"><strong><big>中欧（ドイツ・チェコ・スロバキア・ハンガリー・オーストリア）を巡る旅</big></strong><br /><small>Internet Explorer で問題が出る場合は、キャッシュを消去してください。<input type="button" value="消去方法" onClick="open_win()"></small></font></td></tr>
</thead>
<tbody>
<tr><td><div id="map" style="width: 760px; height: 500px"></div></td>
<td width ="160px" valign="top" style="color: #000000; font-size: small;" align="left">
左の地図は、Google Mapsの機能を持っています。拡大・縮小・移動ができます。下の地名をクリッ
クすると該当位置に吹き出しが出ます。吹き出しの中のリンクをクリックすると詳細地図あるいは
関連投稿に飛びます。<br /><br /><div id="side_bar"></div></td></tr>
</tbody>
</table>
</div>

<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> However,
it seems JavaScript is either disabled or not supported by your browser. To view Google
Maps, enable JavaScript by changing your browser options, and then try again.
</noscript>

<script type="text/javascript">
    //<![CDATA[

    if ( GBrowserIsCompatible()) {
// this variable will collect the html which will eventualkly be placed in the side_bar
     var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
      var gmarkers = [];
      var htmls = [];
      var i = 0;

// A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
// save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        htmls[i] = html;
        // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
        i++;
        return marker;
      }

// This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }

// create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.addControl(new GScaleControl());
      map.setCenter(new GLatLng(48.810481,14.315529), 6);
//    map.setMapType(G_HYBRID_MAP);

// Read the data from xml file
      var request = GXmlHttp.create();
      request.open("GET", "http://n-shuhei.net/????????/Polyline_ex_1.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = request.responseXML;
// obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);

            var html = markers[i].getAttribute("html");
            var label = markers[i].getAttribute("label");
// create the marker
            var marker = createMarker(point,label,html);
            map.addOverlay(marker);

           }
// put the assembled side_bar_html contents into the side_bar div
          document.getElementById("side_bar").innerHTML = side_bar_html;
 
// ========= Now process the polylines =====================
          var lines = xmlDoc.documentElement.getElementsByTagName("line");
// read each line
          for (var a = 0; a < lines.length; a++) {
// get any line attributes
            var colour = lines[a].getAttribute("colour");
            var width  = parseFloat(lines[a].getAttribute("width"));
// read each point on that line
            var points = lines[a].getElementsByTagName("point");
            var pts = [];
            for (var i = 0; i < points.length; i++) {
               pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                                   parseFloat(points[i].getAttribute("lng")));
            }
            map.addOverlay(new GPolyline(pts,colour,width));
          }
// ===========================================================           
        }
      }
      request.send(null);
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
// This Javascript is based on code provided by the
// Blackpool Community Church Javascript Team
// http://www.commchurch.freeserve.co.uk/   
// http://www.econym.demon.co.uk/googlemaps/

    //]]>
    </script>

   </body>
</html>

このコードでの学習した点は、114行目あたりの各都市間を訪問順に結んでいるブルーのライン（Google Maps API では、polyline という）を描くための Javascript 挿入することである。この polyline を描くのは、IE8 では次の処理をしなくてもいいらしいが、IE7 以下では、HTML 上部(head 部より前）に、

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

という記述が（斜め書き部分）必要であり、head 部分に次のスタイルを設定する必要がある。

<style type="text/css">
    v＼:* {   behavior:url(#default#VML);   }
    </style>





呼び込んでくる XML ファイル

<?xml version="1.0" encoding="Shift_JIS"?>
<markers>
<marker lat="49.40187" lng="8.680401" html="Heidelberg &lt;br&gt;&lt;a href='http://n-shuhei.net/studio_yamako/?????????/maps_heidelberg.htm' target='_blank'&gt;ハイデルベルク詳細地図&lt;/a&gt;&lt;br&gt;(2009/11/2)" label="ハイデルベルク" ></marker>
<marker lat="49.379691" lng="10.180206" html="Rothenburg &lt;br&gt;&lt;a href='http://n-shuhei.net/studio_yamako/?????????/maps_rothenburg.htm' target='_blank'&gt;ローテンブルク詳細地図&lt;/a&gt;&lt;br&gt;(2009/11/2)" label="ローテンブルク" ></marker>
<marker lat="47.680125" lng="10.900841" html="Wieskirche &lt;br&gt;&lt;a href='http://n-shuhei.net/studio_yamako/?????????/091124_001.jpg'  target='_blank'&gt;Photo:ヴィース教会&lt;/a&gt;&lt;br&gt;&lt;a href='http://n-shuhei.net/studio_yamako/?????????/091124_002.jpg'  target='_blank'&gt;Photo:ヴィース教会の内部&lt;/a&gt;&lt;br&gt;(2009/11/2)" label="ヴィース教会" ></marker>
<marker lat="47.546872" lng="10.739136" html="Hohenschwangau &lt;br&gt;&lt;a href='http://n-shuhei.net/studio_yamako/?????????/maps_Hohenschwangau.htm' target='_blank'&gt;ホーエンシュヴァンガウ詳細地図&lt;/a&gt;&lt;br&gt;(2009/11/2)" label="ホーエンシュヴァンガウ" ></marker>
<marker lat="49.014906" lng="12.104187" html="Regensburg &lt;br&gt;&lt;a href='http://n-shuhei.net/studio_yamako/?????????/maps_Hohenschwangau.htm' target='_blank'&gt;レーゲンスブルク詳細地図&lt;/a&gt;&lt;br&gt;(2009/11/2)" label="レーゲンスブルク" ></marker>
<marker lat="50.082701" lng="14.422302" html="Praha &lt;br&gt;&lt;a href='http://n-shuhei.net/studio_yamako/?????????/maps_Praha.htm' target='_blank'&gt;プラハ詳細地図&lt;/a&gt;&lt;br&gt;(2009/11/2)" label="プラハ" ></marker>
<marker lat="48.810481" lng="14.315529" html="Cesky Krumlov &lt;br&gt;詳細は、&lt;br&gt;&lt;a href='http://n-shuhei.net/studio_yamako/?????????/08_1653.php' target='_blank'&gt;中欧旅行　その８　チェスキー・クルムロフ&lt;/a&gt;で。&lt;br&gt;(2009/11/4)" label="チェスキー・クルムロフ" ></marker>
<marker lat="48.143182" lng="17.112579" html="Bratislava &lt;br&gt;詳細は、&lt;br&gt;&lt;a href='http://n-shuhei.net/studio_yamako/?????????/11_0858.php' target='_blank'&gt;中欧旅行　その９　ブラスチラバ&lt;/a&gt;で。&lt;br&gt;(2009/11/5)" label="ブラスチラバ" ></marker>
<marker lat="47.495864" lng="19.050293" html="Budapest &lt;br&gt;&lt;a href='http://n-shuhei.net/studio_yamako/?????????/maps_Butapest.htm' target='_blank'&gt;ブダペスト詳細地図&lt;/a&gt;&lt;br&gt;(2009/11/2)" label="ブダペスト" ></marker>
<marker lat="48.20926" lng="16.372633" html="Viena &lt;br&gt;&lt;a href='http://n-shuhei.net/studio_yamako/?????????/maps_Viena.htm' target='_blank'&gt;ウィーン詳細地図&lt;/a&gt;&lt;br&gt;(2009/11/6)" label="ウィーン" ></marker>
<line colour="#0000ff" width="4" html="You clicked the red polyline">
   <point lat="50.107368" lng="8.686066" /> <!--フランクフルト-->
   <point lat="49.40187" lng="8.680401" /><!--ハイデルベルク-->
   <point lat="49.379691" lng="10.180206" /><!--ローテンブルク-->
   <point lat="47.680125" lng="10.900841" /><!--ヴィース教会-->
   <point lat="47.546872" lng="10.739136" /><!--ホーエンシュヴァンガウ-->
   <point lat="49.014906" lng="12.104187" /><!--レーゲンスブルク-->
   <point lat="50.082701" lng="14.422302" /><!--プラハ-->
   <point lat="48.810481" lng="14.315529" /><!--チェスキー・クルムロフ-->
   <point lat="50.082701" lng="14.422302" /><!--プラハ-->
   <point lat="48.143182" lng="17.112579" /><!--ブラスチラバ-->
   <point lat="47.495864" lng="19.050293" /><!--ブダペスト-->
   <point lat="48.20926" lng="16.372633" /><!--ウィーン-->
   <point lat="48.112933" lng="16.55777" /><!--ウィーン空港-->
</line>
</markers>



市街地図（例として、プラハ市街図）のHTML(include Google Maps API JavaScript)は、つぎのようなコードである。ここでは、XML ファイルは使っていない。（学習不足で使うことができなかった。）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">　　
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="http://n-shuhei.net/litebox/???/lightbox.css" type="text/css" media="screen"/>
<script type="text/javascript" src="http://n-shuhei.net/litebox/???//prototype.lite.js"></script>
<script type="text/javascript" src="http://n-shuhei.net/litebox/???/moo.fx.js"></script>
<script type="text/javascript" src="http://n-shuhei.net/litebox/???/litebox-1.0.js" charset="utf-8"></script>
<title>Google Maps JavaScript API map_13</title>
<script src="http://maps.google.co.jp/maps?file=api&amp;v=2&amp;key=ABQIAAAA_--TOJLbO9UBLVgjJC7W8hRCNFlWI0Fg????????????
　　mm9hSKsn5IFaeCnFgl????????????" charset="utf-8" type="text/javascript"></script>
</head>

<body onload="initLightbox()">
<div align="center">
<table width="auto" border="1" bgcolor="#FFFFCC">
<thead ><tr><td id="th1" colspan="2" align="middle" ><big><strong>プラハ<strong></big></td></tr></thead>
<tbody align="left">
<tr><td>
<div id="map" style="width:730px; height:530px"></div>
</td><td width ="210px" valign="top" style="text-decoration: color: #000000; font-size: small;">左の地図は、Google Mapsの機能を持っています。拡大・縮小・移動ができます。
下のチェックボックスをチェックすると該当位置にマークが立ちます。また、青文字をクリックすると写真がでてきます。<br/><input type="checkbox" name="cb1" onClick="checkbox1clicked()">
  1. プラハ城<br />　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091130_008.jpg" title="プラハ城からの眺め" rel="lightbox[os]">プラハ城からの眺め</a><br />
<input type="checkbox" name="cb2" onclick="checkbox2clicked()"> 2. 聖ヴィート教会<br/>
　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091130_003.jpg" title="プラハ城　聖ヴィート教会" rel="lightbox[os]">聖ヴィート教会</a><br />
;　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091130_004.jpg" title="ミュシャのステンドグラス（部分）" rel="lightbox[os]">ミュシャのステンドグラス</a><br />
　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091130_005.jpg" title="聖ヴィート教会の祭壇" rel="lightbox[os]">聖ヴィート教会の祭壇</a><br />
　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091130_006.jpg" title="聖ヴィート教会前景" rel="lightbox[os]">聖ヴィート教会前景</a><br/>
<input type="checkbox" name="cb3" onclick="checkbox3clicked()"> 3. 聖イジー教会<br/>
　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091130_007.jpg" title=""聖イジー教会と修道院 rel="lightbox[os]">聖イジー教会と修道院</a><br />
<input type="checkbox" name="cb4" onclick="checkbox4clicked()"> 4. カレル橋<br/>
　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091130_009.jpg" title="カレル橋　水害の跡" rel="lightbox[os]">カレル橋　水害の跡</a><br/>
　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091130_010.jpg" title="カレル橋" rel="lightbox[os]">カレル橋</a><br/>
　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091130_011.jpg" title="カレル橋の聖像" rel="lightbox[os]">カレル橋の聖像</a><br/>
　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091203_003.jpg" title="モルダウ川河畔" rel="lightbox[os]">モルダウ川河畔</a><br />
<input type="checkbox" name="cb5" onclick="checkbox5clicked()"> 5. 旧市街入口<br/>
　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091203_004.jpg" title="旧市街入口" rel="lightbox[os]">旧市街入口</a><br/>
　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091203_005.jpg" title="プラハ城を望む" rel="lightbox[os]">プラハ城を望む</a><br />
<input type="checkbox" name="cb6" onclick="checkbox6clicked()"> 6. 旧市街広場<br/>
　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091203_006.jpg" title="火薬塔" rel="lightbox[os]">火薬塔</a><br/>
　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091203_007.jpg" title="ティーン教会" rel="lightbox[os]">ティーン教会</a><br/>
　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091203_008.jpg" title="旧市庁舎の時計塔" rel="lightbox[os]">旧市庁舎の時計塔</a><br/>
　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091203_009.jpg" title="仕掛け時計" rel="lightbox[os]">仕掛け時計</a><br/>
　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091203_010.jpg" title="ヤン・フス像" rel="lightbox[os]">ヤン・フス像</a><br />
<input type="checkbox" name="cb7" onclick="checkbox7clicked()"> 7. レギー橋<br/>
　　　<a href="http://n-shuhei.net/studio_yamako/????????????/091203_002.jpg" title="プラハ城を眺める" rel="lightbox[os]">プラハ城を眺める</a><br />
<br />参照記事：<a href="http://n-shuhei.net/studio_yamako/????????????/01_1623.php" target="_blank">中欧旅行　その６　プラハ（１）</a></td></tr></tbody></table></div>

<!-- 番号入りマーカーを表示する。-->
    <script type="text/javascript">
    //<![CDATA[

    var map;
    var marker1, marker2, marker3, marker4, marker5, marker6, marker7;

    map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GScaleControl());
    map.setCenter(new GLatLng(50.086473,14.410651),14);
    map.setMapType(G_HYBRID_MAP);

    var markerIcon1 = new GIcon();
    markerIcon1.image = "http://n-shuhei.net/????????????/Markers/marker1.png";
 //   markerIcon1.shadow = "./img/shadow.png";
    markerIcon1.iconSize = new GSize(35, 40);
 //   markerIcon1.shadowSize = new GSize(70, 56);
    markerIcon1.iconAnchor = new GPoint(18, 40);

    var markerIcon2 = new GIcon(markerIcon1, "http://n-shuhei.net/????????????/Markers/marker2.png");
    var markerIcon3 = new GIcon(markerIcon1, "http://n-shuhei.net/????????????/Markers/marker3.png");
    var markerIcon4 = new GIcon(markerIcon1, "http://n-shuhei.net/????????????/Markers/marker4.png");
    var markerIcon5 = new GIcon(markerIcon1, "http://n-shuhei.net/????????????/Markers/marker5.png");
　  var markerIcon6 = new GIcon(markerIcon1, "http://n-shuhei.net/????????????/Markers/marker6.png");
　  var markerIcon7 = new GIcon(markerIcon1, "http://n-shuhei.net/????????????/Markers/marker7.png");

    var opt1 = {icon:markerIcon1};
    var opt2 = {icon:markerIcon2};
    var opt3 = {icon:markerIcon3};
    var opt4 = {icon:markerIcon4};
    var opt5 = {icon:markerIcon5};
    var opt6 = {icon:markerIcon6};
    var opt7 = {icon:markerIcon7};

    marker1 = new GMarker(new GLatLng(50.088814,14.395523), opt1);
    marker2 = new GMarker(new GLatLng(50.090755,14.400759), opt2);
    marker3 = new GMarker(new GLatLng(50.091023,14.402025), opt3);
    marker4 = new GMarker(new GLatLng(50.086473,14.410651), opt4);
    marker5 = new GMarker(new GLatLng(50.086129,14.413869), opt5);
    marker6 = new GMarker(new GLatLng(50.087382,14.4208), opt6);
    marker7 = new GMarker(new GLatLng(50.081186,14.410672), opt7);
		
    var marker1_is_displayed = 0;
    var marker2_is_displayed = 0;
　　var marker3_is_displayed = 0;
　　var marker4_is_displayed = 0;
  　var marker5_is_displayed = 0;
　  var marker6_is_displayed = 0;
　  var marker7_is_displayed = 0;

    function checkbox1clicked() {
      if (marker1_is_displayed == 0) {
        map.addOverlay(marker1);
        marker1_is_displayed = 1;
      } else {
        map.removeOverlay(marker1);
        marker1_is_displayed = 0;
      }
    }

    function checkbox2clicked() {
      if (marker2_is_displayed == 0) {
        map.addOverlay(marker2);
        marker2_is_displayed = 1;
      } else {
        map.removeOverlay(marker2);
        marker2_is_displayed = 0;
      }
    }
	
	function checkbox3clicked() {
      if (marker3_is_displayed == 0) {
        map.addOverlay(marker3);
        marker3_is_displayed = 1;
      } else {
        map.removeOverlay(marker3);
        marker3_is_displayed = 0;
      }
    }
	
	function checkbox4clicked() {
      if (marker4_is_displayed == 0) {
        map.addOverlay(marker4);
        marker4_is_displayed = 1;
      } else {
        map.removeOverlay(marker4);
        marker4_is_displayed = 0;
      }
    }

    function checkbox5clicked() {
      if (marker5_is_displayed == 0) {
        map.addOverlay(marker5);
        marker5_is_displayed = 1;
      } else {
        map.removeOverlay(marker5);
        marker5_is_displayed = 0;
      }
    }

    function checkbox6clicked() {
      if (marker6_is_displayed == 0) {
        map.addOverlay(marker6);
        marker6_is_displayed = 1;
      } else {
        map.removeOverlay(marker6);
        marker6_is_displayed = 0;
      }
    }

    function checkbox7clicked() {
      if (marker7_is_displayed == 0) {
        map.addOverlay(marker7);
        marker7_is_displayed = 1;
      } else {
        map.removeOverlay(marker7);
        marker7_is_displayed = 0;
      }
    }
   //]]>
    </script>

</body>
</html>

　この市街地図での学習点は、最初の表示を航空写真と地図の合成（HYBRID)にすることと、番号入りのマークを表示することである。
　番号入りのマークを表示する方法については、以前のエントリーで記録している。


これだけのことをするために、基礎知識の少ない老人には、ずいぶん学習しなければならないことが多かった。痴呆予防には有効かもしれない。

　

Google Maps API徹底活用ガイドposted with amazlet at 10.01.25
稲葉 一浩 
毎日コミュニケーションズ 
売り上げランキング: 105350
おすすめ度の平均: 
 さらっと流しつつテンコ盛りの内容
 前半は簡単。後半は難解。
 Google Maps をゴリゴリいじってみたい人に
Amazon.co.jp で詳細を見る




      
      

      
         

   タグ:
   
   
      Google_Maps_API


   

 
   
 



Permalink



 | 

Category : Google Map



 | 


Comments [0]

 | 

Trackbacks [1]



    

    
    
2008年2月 1日




   年金生活者の e-Tax 確定申告体験

   
      
         　退職後、国民年金と企業年金およびわずかばかりの株式売買益を合わせた確定申告している。昨年までは、国税局がネットで提供している、下の所得税の確定申告書コーナーを利用して確定申告書を作成・印刷して、証憑をつけて管轄税務署に郵送していた。
注：セキュリティ上の問題か、下のページには直接リンクが張れない。行き着くには、「e-Tax で確定申告」のページから、「e-Tax を利用しない場合又は作成を再開する場合はこちら」のバーをクリックし、「所得税の確定申告書」をクリックする。


　今年度は思い切って、ネットを通じて申告できる e-Tax に挑戦してみることにした。私のような確定申告を目指しておられる年金生活者も多いと思うので、体験を備忘録的に記してみたいと思う。個人の体験談なので、正確性について保証するものではありません。

　e-Tax での申告については、国税庁の「e-Tax で確定申告」のページが詳しいので、そちらを参照して欲しい。それぞれのページは懇切丁寧にインストラクトしてくれているので、指示通り数字を入れていけば e-Tax の登録ができ、申告書を作成し、送信できるが、沢山のページがありすぎて、歳をとって固くなった頭では混乱してくる。

　e-Tax をするためには、事前に準備が必要である。市役所で住民基本台帳カード（ＩＣカード）を取得する。
市役所で電子証明書を取得する。
この1. 2. については同じ窓口で同時に発行してくれる。費用は両方合わせて、￥1000 だったと思う。
参照ページ：http://www.e-tax.nta.go.jp/systemriyou/systemriyou3.html
ICカードリーダーを購入する。大型の電気店でも置いていないので、ネットショップで求めた。￥3,000 ちょっとで手に入ると思う。e-Tax で申告すれば、5,000円の補助がある。
（追記：2009/2/5）最近は、電気量販店にいけば沢山のICカードリーダーが積んである。昨年、量販店の店員に買いに来る人が増えると進言しておいたが、その通りになっているらしい。私は、次のカードリーダーを使っている。 Amazon では、すでに ￥2000 になっているようだ。

日立 USB接続 公的個人認証用 接触型ICカードリーダー ライター HX-520UJ.Kposted with amazlet at 09.02.05
日立 (2008-12-19)
売り上げランキング: 15
おすすめ度の平均: 
 e-Tax申請用に購入、問題なく使えます
 e-TAX申請用に購入しました
 e-tax対応で割安感有り
Amazon.co.jp で詳細を見る



　これで準備は終わりであるが、もちろん入力に必要な数字は、年金の源泉徴収票を揃えたり、年間医療費合計額の計算などが必要である。医療費控除は、支払った医療費が年間10万以上の金額を課税所得から控除してくれる。逆にいえば、お元気で医療費をそんなに使っておられない方は、計算しても意味がない。

　上の「e-Tax で確定申告」のページでも案内があるように、 e-Tax をはじめるには、パソコンの環境を整備する。よほど古いネット環境でない限り、問題はないだろう。

上のページの「登録する」ボタンをクリックすると開始届出書を作成・送信する方法が案内されているので、それに従って、開始届出書を提出して、利用者認識番号を取得する。

開始届出書を作成・送信する前に、「財務省認証局」および「財務省運用支援認証局」のルート証明書をインストールする必要がある。インストールは、次のページに指示がある。
http://www.e-tax.nta.go.jp/todokedesyo/kaishi_confirm.html

上手くインストールできれば、以下のような手順で確認できる。（IE６、７とも）


うまく開始届出書を作成・送信できれば、以下のような「利用者識別番号等の通知」が送られてくる。

次に、利用者情報の入力、電子証明書の登録、納税用確認番号の入力などを行って初期登録する。ただ、上のページで「初期登録」に進む前に、公的個人認証利用者クライアントソフト（JPKI利用者ソフト）の最新版をダウンロードしておく。

「初期登録」に進むと利用者情報の入力画面が出てきて、住民基本台帳カードをICカードリーダーで認識する。「JPKI利用者ソフト」が、古いバージョンだと、エラーコード：AF0020-322がでて上手くいかない。だけでなく、InternetExplorer が開けない状況になったりする。

次に、Step３ の「作成・送信しよう」→「確定申告書作成コーナー」→「所得税の確定申告書」に進むと一番上に示した「所得税の確定申告書作成コーナー」の画面になる。私の場合、わずかばかりの株式売買差益があったので、「分離課税の申告書」を選択した。

「分離課税の申告書」を選択（他の申告でも同じと思うが）すると次の画面になるので、「電子申告により税務署に提出する。」を選択する。

申告書の作成は、印刷・郵送していたときと同じである。今年からは、地震保険がついていない損害保険の所得額控除はないようだ。

作成したデータを e-Tax へ送信する方法については、「確定申告書作成コーナーから e-Tax へ直接送信する方法」の案内に従って行う。この作業の中で、作成した申告書を保存することができるページが出てくるので、PCの適切なフォルダーに保存しておく。拡張子が、.rtx というファイルができる。

申告データの送信は、e-Tax ソフトをダウンロードしてインストールすることでもできる。後々の処理を考慮すれば、e-Tax ソフトで処理する方がいいかもしれない。以降は、e-Tax ソフトを利用した例を記す。（e-Tax ソフトでも、電子証明書の登録、納税用確認番号を登録できる。）

まず、e-Tax ソフトのメニューボタンから、「利用者選択」→「新規作成」を選択して先に通知された利用者識別番号を入力して利用者として登録する。

次にメニューボタンから「作成」→「申告・申請等」を選択して、画面右下の「組み込み」をクリックすると組み込む申告・申請等ファイルを指定するポップアップ画面となるので、10. で保存したファイルを指定する。

次にメニューボタンから「電子署名」のアイコンをクリックすると先ほど組み込んだファイル名が表示されるので、これを反転させて右下の「署名」ボタンをクリックし、ICカードリーダーに、住民基本台帳カードを差し込んで続けると電子署名が終わる。

次にメニューボタンの「送信」から送信アイコンをクリックすると先ほどのファイルが表示されるので、これを選んで右下の送信ボタンをクリックすると送信が始まるはずである。送信先は、e-Tax（受付システム）である。

無事にe-Tax（受付システム）に受信されたかどうかは、次のメニューボタンの「メッセージボックス」で確認できる。「メッセージボックス」のアイコンをクリックすると、今まで
e-Tax（受付システム）で受信した受信した受信通知が示される。

その中の手続名　「所得税申告」行を反転させ、右下の「詳細表示」ボタンをクリックすると下のような画面が表示される。



e-Tax で申告する場合は、証憑の提出は求められていない。これが、e-Tax で申告する一番の理由であるが、「申告書送信票」は郵送しなければならない。「申告書送信票」は、上の画面の「送付書表示」ボタンをクリックすると印刷画面が現れるので、これを印刷して所轄税務署に郵送する。これで手続きは終わりのようである。

　e-Tax を試行錯誤してみて、このシステムは私のような素人でもできないことはないが、やはり税理士さんのようなプロ向けではないかという感じである。個人では年に１回しか使わないシステムであるから、折角やり方を習得しても来年までは記憶できないかもしれない。そう言う意味で、ブログに備忘録的に残しておくことは意味があるかもしれないが、来年はまた所得税制が変わって、新たな学習が必要になるだろう。まあ、幾ばくかの還付があるのが救いである。
      
      

      
         

   タグ:
   
   
      e-Tax
   
      ICカードリーダー
   
      住民基本台帳カード
   
      所得税
   
      確定申告
   
      電子署名
   
   



      

   
   

 
   
 



Permalink



 | 

Category : Life, PC



 | 


Comments [8]

 | 

Trackbacks [4]





    

    
    
2006年9月 3日




   晩夏の堺自然ふれあいの森

   
      
         
　ようやく酷暑から脱してきたので、孫家族と一緒に近場の公園を訪ねることにした。５歳と運動不足気味の４歳の男孫はどちらも虫が好きなので里山公園の堺自然ふれいあいの森にでかけることにした。里山の森は、ツクツクホウシが泣き赤とんぼが飛んで晩夏の風情である。ツクツクホウシの鳴き声を録ろうとEDIROLをリュックに入れて出かけたが孫たちのテンションが高くチャンスを逸した。途中のコンビニでもとめた弁当を見晴台といっているちょっと開けた場所で食べながら上を見上げると空はすっかり秋である。その空を背景に赤とんぼの撮影を試みたが満足できる写真は撮れなかった。トンボの撮影は難しい。里山公園の境界に流れる用水路で交尾をしていた羽が黒っぽいトンボがかろうじてデジカメのメモリーに残っている。Googleで探したトンボ電子図鑑で調べてみたがハグロトンボかアオハダトンボか何か名前は分からない。
　夏休みが終わったせいか土曜日というのに出会う人はほとんどいない。>
泉北近辺私的観光地図に掲載
      
      

      

   
   

 
   
 



Permalink



 | 

Category : Life, NATURE, insects



 | 


Comments [2]

 | 

Trackbacks [0]