Atelierで“Google_Maps_API”タグの付いているブログ記事

2010年6月24日

隠居のGoogle Maps API: データ用XML ファイルの編集

 友人や私が旅行に行ったところなどをプロットする地図を、Google Maps API を使って作成しブログに埋め込んでいる。
 作成する自分用の地図はいろいろとあるが、プロットする地点が少しずつ増えていく旅行地図--例えば、Studio YAMAKO 【国内旅行:2009】などでは、本体の Javascript はいじらずに、行った地点の経度・緯度などのデータを XML ファイルに追加して呼び込んでいる。

 ところがいつも使っているエディタの【秀丸】できちんと XML の文法に則ってファイルを作成しているはずなのに、Google Maps API が読み込んでくれない。原因を乏しい知識のなかでググって見たが、なかなか解決策が見当たらないまま1週間くらいが過ぎてしまった。ひょんなことから、完全な解決ではないが、原因がわかったので、この間に学習したことを備忘録として記録しておきたい。

 XML fileにエラーがある場合、Internet Explorer でこのファイルを開く(フォルダー⇒該当ファイルを右クリック⇒プログラムから開くで出るセレクトボックスから、Internet Explorer を指定する)と、次のようなメッセージがでて開けない。
Internet Explorer
XML_01.JPG
  Google Chromeでは、次のようなメッセージが出る。
Google Chrome
XML_02.JPG

ここで出てくるライン( line) とは、開始タグと終了タグで囲まれたテキストが行を表していると思われる。 それで推定すると、どうやら最後の行の外に、余計な何かが附加されているようである。

いつも使っているエディタの【秀丸】でXML fileを眺めつすがめつしてみたが、よくわからない。
【秀丸】XML_05.JPG
この表示の最後にある [EOF] は、End Of File のことであり、【秀丸】特有のものである。後で分かったことだが、この[EOF] が問題であった。

XML の文法が正しいかどうかは、W3CSchool のXML のセクションにある validator で確認できる。 この validator で【秀丸】で表示されるコードを確認すると no error と表示される。

XML file の中身は、Notepad でも確認できる。IE でエラーとなった XML file をNotepad で開いてみると、下のように【秀丸】の [EOF]部分が黒い四角形の文字となっている。Notepad で、この黒い四角形の文字を削除して保存して、IE で実行してみるとエラーは起こらない。
Notepad XML_07.JPG


 再度、"秀丸 EOF"でググってみると、【秀丸】への理解が十分でなかったことが判明した。【秀丸】の設定で、 [EOF] を保存しない、読み込むときに EOF制御文字を無視するとすると(【秀丸】で「その他」⇒「ファイルタイプ別の設定」⇒「保存の対象」「その他」「保存読み込み」で設定できる)、IE での展開でエラーは起こらなくなった。

 これらを調査するなかで、XML エディタとして【XML Notepad 2007】というユティリティがあることが分かった。今まで、XML file のエディタとしては便宜的に【秀丸】を使ってきたが、これが問題であった。まだ十分に理解出来ているとはいえないが、XML に特化した【XML Notepad 2007】を使うと下のスクリーンショットで分かるように非常に簡便となる。
 今後は、Google Maps API で使うXML file の作成は、このユティリティを使っていくつもりである。
【XML Notepad 2007】
XML_04.JPG

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. 中欧の全体地図: 訪問した都市に通常マークred-dot.pngが表示される。
    1. このマークをクリックするか、地図の右欄にある地名をクリックすると、吹き出しが表示される。
    2. 吹き出しの中に表示されている「詳細地図」をクリックすると市街地図にリンクする。
    3. 各都市間をブルーのラインで訪問順に結んでいる。
  2. 市街地図:初期に表示する地図のタイプを航空写真にしている。
    1. 地図の右欄にある場所のチェックボックスをクリックすると番号入りマークが表示される。
    2. 場所名の下の青字をクリックすると写真が lightbox 形式で表示される。
  3. いずれの地図にも、地図を拡大・縮小できるコントロール、地図のタイプを切り替えるボタン、地図の縮尺をあらわすスケールが表示されている。

   これらの地図は、上記に記したサイトからいただいてきたコードを猿まねで自分なりに修正したものである。
中欧の全体地図は、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;中欧旅行 その8 チェスキー・クルムロフ&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;中欧旅行 その9 ブラスチラバ&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">中欧旅行 その6 プラハ(1)</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徹底活用ガイド
稲葉 一浩
毎日コミュニケーションズ
売り上げランキング: 105350
おすすめ度の平均: 3.5
4 さらっと流しつつテンコ盛りの内容
3 前半は簡単。後半は難解。
4 Google Maps をゴリゴリいじってみたい人に


2010年1月18日

隠居のGoogle Maps:IE8 での不具合を回避する

 私のサイトを訪問してくれる人が使っているブラウザで最も多いのは、Internet Explorer 8(IE8) であり、私のパソコンにもIE8 をインストールしたことは、先日のエントリーで報告した。
そのときに気づかなかったが、Google Maps API を使って作った個人的な地図に置いた、地図を移動したり拡大・縮小するためのコントロール(例えば、GLargeMapControl )や通常の地図か航空写真かその合成かを選択するコントロール(例えば、GMapTypeControl)が機能していなくて、下のスクリーンショットのように表示されないことが分かった。
Maps_api_4.JPG
対処法についてネットサーチしてみると、IE8 と Google Maps API とは相性が悪いらしく、解決策が2つ示されていた。
  • (解決策1:DocType宣言の変更)
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  • (解決策2:IE7互換モード用のMETAタグ挿入)
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> 

 だが、この二つの解決策を試してみたが、一旦治ったように見えたものの最初だけですぐにコントロールが表示されなくなった。

 その他もいろいろと探ってみたが、送信者側ではどうやら方策はなさそうだった。何かヒントはないかと Google maps のページにいき「ヘルプ」を開いてみると、お薦め記事に、「Internet Explorer を使用すると問題が発生する」というのがあった。その記事を開くといくつかの項目のトップに、「キャッシュを消去する」とあり、これを実行すると、IE8 でも下のスクリーンショットのように、コントロールが表示され機能するようになった。
Maps_api_5.JPG
 訪問してくれる人に手数をかけることになるが、地図の表題に注意書きを入れることで、とりあえずの対処法とすることにした。
 これは、Google と Microsoft との間の問題ではあるが、早く解決されることを願っている。 

2010年1月14日

Google Maps API で旅行地図を作る:番号付きマーカーを使う

 昨年秋に、宍道湖をドライブしたときの旅行記はエントリーしたが、旅行地図を作ろうと思いながらできずにいた。
 最近新たな知識も取り入れて、宍道湖ドライブ地図を作製したので、備忘録として記録しておきたい。
 ツーリストがプロを使って作成していると思われる Google Maps API による地図には、数字や英字の入った Marker を格好良く使っている。私も使いたいと思っていたが、数字入りマーカーを作る方法がよく分からなかった。どこかに、できあいのものはないかと、"番号付きマーカー"というような言葉でネットサーチしていると、dLinkbRING というサイトを見つけた。そこで提供されている番号付きマーカーがもちろん使えるが、そのページに紹介されている、こんな便利なサイトにいくと自分の好きな色のマーカーに、数字あるいは英字を入れて作れるサービスが提供されていることが分かった。これで、次のような番号付きマーカーを作った。

         

 これらを地図上に表示させるには、AjaxTowerというサイトのGoogle Maps入門(Google Maps API)を参考にした。このサイトの「マーカーのアイコンを指定」の JavaScript コードを参考にして、以前に 「伊勢参り」 のエントリーで使った GoogleMaps API コードの JavaScript 部分に手を加えてみたのが、次のコードである。
<!-- 番号入りマーカーを表示する。-->
    <script type="text/javascript">
    //<![CDATA[

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

    map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(35.430883,133.01199),10);
    map.setMapType(G_HYBRID_MAP);

    var markerIcon1 = new GIcon();
    markerIcon1.image = "http://n-shuhei.net/xxxxxxx/xxxxxx/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/xxxxxxx/xxxxxx/marker2.png");
    var markerIcon3 = new GIcon(markerIcon1, "http://n-shuhei.net/xxxxxxx/xxxxxx/marker3.png");
    var markerIcon4 = new GIcon(markerIcon1, "http://n-shuhei.net/xxxxxxx/xxxxxx/marker4.png");
    var markerIcon5 = new GIcon(markerIcon1, "http://n-shuhei.net/xxxxxxx/xxxxxx/marker5.png");

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

    marker1 = new GMarker(new GLatLng(35.469199,133.053875), opt1);
    marker2 = new GMarker(new GLatLng(35.44333,133.284674), opt2);
    marker3 = new GMarker(new GLatLng(35.444729,132.866077), opt3);
    marker4 = new GMarker(new GLatLng(35.401434,132.685919), opt4);
    marker5 = new GMarker(new GLatLng(35.377854,133.198242), opt5);
		
    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;

    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;
      }
    }
   //]]>
    </script>


もともとのコードがどこかのページからいただいたコードだから、よく理解していない部分もあるが、なんとか上手く機能しているようである。 iconSize での数字を変えることで、番号付きマーカーの形が変わるようである。また、shadow もつけられる。
 このようにして「宍道湖私的観光地図」を作った。下は、その screenshot であるが、全体像は右メニューにボタンを置いたのでクリックしてみて欲しい。

なお、このGoogle Maps入門にある「マップタイプの選択」ページで示されている JavaScript, Google Maps API リファレンスのコードを参考に、初めに表示される画面を「地図+航空写真」(HYBRID) に設定した。
 Google Maps入門のサイトには、他にも少し学習すれば使えそうなインストラクションもあるので応用していきたいと思う。



2006年11月25日

泉北ニュータウン私的観光地図:Google Maps API Trial_5

 Google Maps API を使って、「泉北近辺私的観光地図」を編集し、右サイドメニューの「リンク」に置いてみた。自宅以外で場所を特定できる今までのエントリーにたどり着けるようにした。このようにすると、元のエントリーで表現している画像の表示に litebox が使えたり、MP3 Flash Player も動く。
 xml ファイルを再編集するだけで新たな地点とエントリーが追加できるので簡便になった。

2006年11月20日

改訂:早春の鹿児島:Google Maps API に litebox を使う

 今年の3月に掲載した旅行記に使用した地図が Google の利用規約に触れるのではないかと気になりエントリーから削除していた。 新たに、 Google Maps API を利用して地図を全面的に作り変えてみた。この API の利用は、このようなエントリーを編集するには革命的なソフトであるが、ただ不満は今年の7月から使っている litebox-1.0 がうまく動作しないことであった。いろいろと試行してみたが、11月12日のエントリーに litebox-1.0 の JavaScript を取り入れてみるとうまく動作するようになった。下の地図のサイドバーのチェックボックスをクリックするとその地点にマーカーが現れる。をクリックすると写真が lightbox 的に現れるので試してみてください。理屈的にはよく分かっていませんが、このエントリーに使っている iframe のソース head 部分で、lightbox.ccs を呼んでくるときに、次のように media="screen" を加えると上手くいきました。ご関心がある方は、 iframe 内のソースを参照ください。
<link rel="stylesheet" href="http://xxxxxxxxxxxx/litebox/css/lightbox.css" type="text/css" media="screen"/> 


 高校の修学旅行以来行ったことのなかった鹿児島に、2月末の日・月に家内とFlight&Driveした。鹿児島は私にとって47年ぶりであり、家内は初めてである。その当時は修学旅行専用列車で、24時間かかって西鹿児島まで行ったように思う。今回は、大阪空港7:50発に搭乗し、9時30分には空港近くで借りたレンタカーで国道504号線を走り出していた。鹿児島は車の方がバスや列車より便利なのか、空港近くには多くのレンタカー会社が沿道沿いにあり、利用者も多い。確かに、日曜日というのに道は空いており、ゆったりスイスイと走れた。
 昨秋のみちのくと異なり、季節のせいもあるかもしれないが、蘇鉄が街路樹として植えられている沿道の風景はどことなくのんびりとした風情であった。いつものように、細かいルートは決めず、北帰行前のツルを出水に見に行くことと指宿で温泉に入ることだけを最低限の目的にしていた。トラベル雑誌の地図は一応参考にするが、ルートは一般道を走るか高速道路を走るかといった設定だけであとはカーナビ任せである。カーナビのいいところは、おおよその到着地までの時間を教えてくれることである。都会と違って、渋滞が全くといってないから、予想到着時間は、ほぼ正確である。出水までの道(504→328号線)は、どこにでもあるような里山が続く田舎道であった。朝食が早かったので、早い昼食を出水市に入ったところの和風レストランで摂った。食事は家内がいつも地方色がでてリーズナブルなものを求めるので、店を選ぶのがなかなか難しい。この和風レストランで摂った黒豚のカツとじはなかなかであった。
 昼食を摂ったレストランの人の話では、「このごろの暖かさで昨日は数百羽が北帰行をした聞いている。もういないのではないか」というのでがっくりしながら、そこから10数キロ離れたツル観察センターに行ってみるとまだ沢山のナベヅルかマナヅルが、干拓地の田に群れていた。動物園くらいしかツルを見たことはなかったのでこれには驚いた。この地はもともとツルの飛来地だったのだが、麦などをあたえるようになったので、これだけ集まるらしい。ついでに、カラスもワシらしき鳥も餌を求めに来ている。どんよりと曇っていたのと時間が無かったので、4から5羽の群れで飛び立つ北帰行のような良い写真は撮れなかった。(ほんとの理由は技術だが。)出水市のツルの北帰行などの状況については、以下のサイトが詳しい。
http://www.city.izumi.kagoshima.jp/izumi08/izumi44.asp

 今日の宿休暇村指宿までは、東シナ海に面した海岸沿いを市来というところまで南下し、そこから南九州自動車道と指宿スカイラインのルートをカーナビに設定した。どんよりと曇った天候のせいもあるが、海岸沿いの道路は単調であった。それより、鉄道マニアの孫がいつもDVDで見ている肥薩オレンジ鉄道の線路がこの道路沿いに走っており、2時間ほどの間にオレンジ色の単車両の列車に2回出会った。旅行に出ていても、孫の話になるのは、やっぱりオジイチャン・オバアチャンなんですね。道の駅「阿久根」で求めた焼き芋と薩摩揚げは名物にうまいものなしというものの結構美味しく食した。  カーナビでは、南九州自動車道は市来からであったが、手前の串木野というところまで延びてきていた。最近の道路行政のせいか、それよりも北へ伸ばす計画だったらしく橋脚の上に道路ができあがった状態で工事を中断しているようであった。
 指宿スカイラインは、錦江湾を望む山を切り開いて造られた道であり、途中に造られたいくつかの展望台では錦江湾(鹿児島湾)から写真のように桜島が見渡せる。
スカイラインから指宿に下る途中にはかの知覧がある。朝からの運転に少し疲れていたこともあり、宿にいって早く風呂に入りビールを飲みたかったこともあって、翌日に訪問することにした。
 休暇村は乳頭温泉郷でもそうであったが、その観光地の中心的な場所から離れている。休暇村指宿は、開設されたのはいつか分からないが随分古ぼけていた。砂風呂もどうも天然ではないようだ。(入っていないので分からないが) リーズナブルな料金から言って、こんなもんでしょうと家内からは窘められた。それでも、波の音を聞きながらの露天風呂は格別であった。お湯を少し口に含んでみると海の近くの温泉らしく、ナトリュームの味がした。食事は、選択していた黒豚のしゃぶしゃぶとオプションのキビナゴの刺身を食べた。量は随分多かったが、やわらかくてしつこくなく全部食べてしまった。錦江湾にあがる朝日がきれいとのインフォメーションがあったので、日の出を期待したが、残念ながら曇天の雲で見ることはできなかった。
 2日目のカーナビ設定は、開聞岳→枕崎→知覧武家屋敷跡→鹿児島中央駅→空港という順にした。朝早くは曇っていたが、日が高くなるにつれて快晴となった。
 菜の花畑から開聞岳(薩摩富士)を見るというスポットを求めてうろうろしたが、結局見つからなかった。見つからなかったが、被写体はどちらもしっかり撮ったので合成写真にした。頭の中では、マルチデイメンジョンでこのような景色を見ている。
 開聞岳から枕崎に向かう国道226号線(南薩摩路)沿いに有名な「さつま白波」の工場があった。昔からこんなに綺麗な工場だったのだろうか。芋焼酎ブームに乗って、きっと見学者が多いのだと思う。
 枕崎漁港にある「お魚センター」では、カツオやマグロの腹皮、鰹節が現地の産物といった感じであったが、あとは大阪のスーパーでも手にはいるようなものばかりであった。八戸の八食センターにはとても及ばない。漁港に泊まっている船の上で、魚を発送するのかコンテナの魚を移し換えていた。高級料亭にでも持って行くのであろうか、ずいぶん大きなヒラメや鯛が見えた。
 岸壁に駐車している間に車内は高温となっており、走り出すと24度に設定したエアコンから冷風が流れてきた。
 枕崎から知覧への道は、ゆるやかな丘陵地帯に茶畑が続いている。なんとなくのんびりとした豊かさを感じる地域である。このようなところで、若き青年たちは死を覚悟しながら過ごしていたのだろうか。特攻平和会館が近づくにつれ、沿道の歩道には石の灯篭が整然と並んでいた。美しい町並みである。
 知覧の武家屋敷跡は、秋田角館の屋敷跡と異なって、7軒の比較的小さな庭園が公開されている。この7軒を含む街道沿いの垣根は美しく手入れがされていた。それぞれの庭園には春を告げる花々が咲いていた。一軒の屋敷にはお嬢さんがお住まいなのか、縁側に続く部屋にはひな人形が飾られていた。
 武家屋敷の庭園で撮った花は、別のエントリーに、Flash Album で掲載した。
 帰りの搭乗時間までは時間があったので、遅い昼食がてら鹿児島中央駅に立ち寄った。北の地域と違って南では、ラーメンの味もあっさり味が多いようである。アミュプラザ・ビルの地下1階のラーメン店をでたすぐそばに、カメラに収めたいポスターがあった。
 大阪伊丹空港に帰ってくると寒い風が吹いており、ああ、まだ冬なんだと季節を思い出させてくれた。1泊の旅行ながら、一足早い春を感じることができた旅行であった。 

2006年11月17日

道東ドライブ:Google Maps API Traial_3

 エントリー<秋の網走・知床・阿寒・摩周・屈斜路湖:レンタカードライブ>では、 ZENRIN の地図をキャプチャーしたものを使った。内容を同じにして、地図を Google Maps API に変更した。地図の右サイドの地名をクリックすると該当する場所のマーカーに吹き出しが出て、その中のリンクをクリックすると写真が出るようになっている。その他、拡大・縮小、ドラッグしての移動、航空写真にするなど Google Map の機能はそのまま使える。この Google Maps API 導入には、いささかの学習を必要としたので、私のような初心者向けに学習体験を地図の下に備忘録的に記したい。

 前のエントリー<泉北近辺私的観光地図:Google Maps API Trial_2>と異なる点は、地図の右サイドに地名を並べ、それをクリックすると目的とする地点のマーカーに飛ぶようにしたことである。この API の題材は、前のエントリーでも紹介した Google Maps API Tutorial からいただいたものである。前のエントリーでは、sample のソースコードをコピペし、Google Maps API キーを自分用に変えたり、data を変更するだけで上手く導入することができた。
 今回いただいた sample (Part 3) は、 xml ファイルを使うことになっている。今回も xml ファイルをコピペしたらいいと思っていたが、そうは単純にいかなかった。コピペだけで上手くいかないとなると基礎知識が希薄であるから、どこをさわったらいいのか見当がつかない。 IE7の問題なのかなどと勘ぐったが、Firefoxでも上手くいかない。Firefox では、 以下のようなメッセージが出る。
この XML ファイルにはスタイル情報が関連づけられていないようです。以下にドキュメントツリーを表示します。

 IEでも似たようなメッセージがたびたびでる。 Ajax を良く理解していないと思い調査したが、Ajax についてのサイトはちょっと高度で敷居が高い。が、そんなに高度の問題でもないようだ。どうやら xml ファイルへの理解が少ないことが原因らしいと思われたので、基礎から学習することにした。xml を教えてくれるサイトは「たのしいXML」のような日本語のサイトがあるがもうひとつピンとこない。Google で "xml tutorial" でサーチしてみると英語の世界にに基本から教えてくれるサイトがあった。W3 Schools である。このサイトのXML Tutorial を最初から読んでいくと優しい英語で非常に分かりやすい。XML Basic の9講座あたりに、自分で作った xml ファイルをファイルの中身をコピペするのとファイル名を入れて、それぞれ validate する個所がある。ファイルの中身のコピペではエラーを起こさなかったが、ファイル名をいれると何の表示もない。Note: をみるとどうやらクロスドメインの問題らしい。ここからヒントをもらい今まで、Dreamweaver を使ってPC のC:ディレクトリーに JavaScript を置き、呼んでくる xml ファイルをレンタルサーバー上に置いていたので上手くいかなかったようだ。JavaScript を含んだHTMLファイルもサーバー上に置いたら、望む結果が得られた。JavaScript に xml ファイルをよんでくるには、同じドメインでないと駄目のようである。 目的としていることができたのでxml の学習は中断してしまったが、機会を見て続きを勉強したい。
 Google Maps API には、ルートに色を付ける方法も用意されているようなので再度挑戦してみたい。
 なお、xml ファイルのデータとして書き込む地点の経度・緯度を得るには、Google Map で望む地点をダブルクリックして、右上のメールをクリックすると送信フォームの中に数字が示されるので、それをコピペすれば楽である。正確性を期するならば、国土地理院の「ウオッ地図」で目的地点の経度・緯度が求められるが、度以下の少数部分は計算が必要である。
 Google Maps API に取り組んでから、アルツハイマーになりつつある頭脳弱体化防止には少し役立ったかもしれない。

2006年11月13日

泉北近辺私的観光地図:Google Maps API Trial_2

 前回のエントリーに引き続いて、Google Maps API についていろいろとサーチしてみた。このようなAPI(Application Program Interface)ソフトは、英語の世界の方が発展が早い。それで敬遠気味であった英語のサイトを探してみると Blackpool Community Church Javascript Team が運営しているGoogle Maps API Tutorial というサイトの存在が分かった。その Tutorial の Part1 に求めていたコードがあった。おまけに最新の v2 版である。This is just I've wanted. である。前回のコードよりスマートだし、拡張性がある。 Donation を求めておられるが早速させてもらいたいと思う。
 地図上の赤いマークをクリックすると吹き出しがでて、その中のリンクをクリックするとリンク先や写真が出てくる。吹き出しの中は、HTMLで書けるのでかなりの応用が利くはずである。

2006年11月12日

泉北の紅葉:Google Maps API v2 Trial

 11月4・5日のエントリーで、 ZENRIN の地図を使ったページを掲載した。その後、地図について色々と調べてみると Google Maps を自分のサイト上に使うことへの制約がほとんどないことが分かった。以前はGoogle Map はキャプチャー・ソフトを使って一部分を切り取って使っていた(こういう使い方は違法のようである。)が、それ以上にダイナミックな使い方が許諾されている。詳細については、別のエントリーで紹介するつもりだ。
 ただ、使いこなすには JavaScript がかなり理解できないと難しいし、Ajax への理解も必要なようだ。そういうわけで、JavaScript の超初心者としてなんとか形になったのは以下のようなものである。この地図は、Google Map と同じ使い方ができる。コントロールボタンでサテライトの写真地図も見ることができるし、拡大・縮小もできる。また、地図をドラッグして動かすこともできる。すごい代物である。
 地図の下の部分は先達諸氏の作品と解説を参考に作った。チェックボックスをクリックするとその場所のマークが表示される。その場所に吹き出しを作ってその中にHTMLも書けるようだが、それは次のステップにしたい。なにしろここまでたどり着くのにアルツハイマーになりかかっている頭ではずいぶん時間がかかっている。
 参考にさせていただいたページを以下に記します。
 Greek なページ
 All About:Ajax Google Mapsを自サイトに設置する

2006年4月 4日

3?4分咲き:4月4日


 ニュータウン(政令指定都市堺市南区)の桜も見頃になってきた。天気がコロコロと変わるが、雨の止み間を縫って写真を撮りに出かけた。泉北に住まいして31年になるが、住み始めた頃の苗木が大きく成長している。結構、いい町になった。
 明日天気が良ければ、光明池方面での桜を探索してみることにするつもりである。

続きを読む "3?4分咲き:4月4日"