<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title>Seis Pesos: Google Maps, Wine, Chiste, etc.</title>
<link>http://japonyol.net/editor/</link>
<description>Google Maps API、ユーモア、チリワインなど乱筆と覚書</description>
<language>ja</language>
<copyright>Copyright 2008, Seis Pesos</copyright>
<lastBuildDate>Thu, 04 Dec 2008 12:59:01 +0900</lastBuildDate>
<generator>http://www.sixapart.com/movabletype/</generator>
<docs>http://www.rssboard.org/rss-specification</docs>
<item>
<title>地理試験（高校生レベル）</title>
<link>http://japonyol.net/editor/archives/2008/12/geographic-map-test.html</link>
<guid>http://japonyol.net/editor/archives/2008/12/geographic-map-test.html</guid>
<description><![CDATA[<p>６年間使っているデルのパソコン（XP）は、まったくトラブルもなく安定している。が、同時に買った三菱の CRT ディスプレイ（RDF173H という機種）の表面が、まるでコーティングが剥がれたかのように荒れて見づらい（勤務先で使っているソニーのG420というディスプレイは、まったく経年劣化がないのに）。<br />
・・・そろそろ液晶に買い替えようか？　と家の総理に諮問しようと思う。</p>
<p>さて、グーグルのサンプルを書き換えただけ、リバース・ジオコーディングのヒネリ。<br />
「何だよソレは !?」と言いたくなる問題も出るけれど、こまかいことは気にするまい。「スタート」で開始。</p>
<iframe src="http://japonyol.net/editor/rg-game.html" title="Reverse Geo Game" scrolling="no" width="100%" frameborder="0" height="500">（インラインフレーム挿入: Google Maps API 2）</iframe>
<p>【<small><a href="http://japonyol.net/editor/rg-game.html" target="_blank">新しいウィンドウで開く</a></small>】</p>
<p>うちはテレビもいまだにブラウン管。地デジは遠い（もっとも、ほとんど見ないのだけれど）。<br />
ニュースを除くと、今月は黒澤の『影武者』と『乱』くらいしか見る予定がない。娘も息子もディズニーチャンネルくらいしか見ない。ゲームもない。<br />
最近、週末は息子の野球チームの練習に付き合っているおかげか、腰痛が和らいでいる不思議。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Thu, 04 Dec 2008 12:59:01 +0900</pubDate>
</item>
<item>
<title>Google Maps for Adobe AIR（Flex SDK で作成する）</title>
<link>http://japonyol.net/editor/archives/2008/11/adobe-air-googlemap.html</link>
<guid>http://japonyol.net/editor/archives/2008/11/adobe-air-googlemap.html</guid>
<description><![CDATA[<p>きのう<a href="http://googlegeodevelopers.blogspot.com/2008/11/google-maps-api-for-flash-air-how-did.html" target="_blank">グーグルが掲題の機能をリリース</a>したので試行。デスクトップにグーグルマップ。</p>
<p><img src="http://japonyol.net/editor/archives/images/air01.gif" alt="AIR01" width="576" height="397" /></p>
<p>これは、CSVファイルのデータ（この例では３行のみ）をパースするもの。<br />
マーカーは、ドラッグ＆ドロップで移動させることができ、</p>
<p><img src="http://japonyol.net/editor/archives/images/air02.gif" alt="AIR02" width="229" height="161" /></p>
<p>そこで保存ないし別名で保存すれば、当該CSVファイルも以下のように更新される、という AIR アプリ。</p>
<p><img src="http://japonyol.net/editor/archives/images/air03.gif" alt="AIR03" width="340" height="206" /></p>
<p>Google の<a href="http://gmaps-samples-flash.googlecode.com/svn/trunk/demogallery.html" target="_blank">デモギャラリー</a>に掲載された、「Map CSV Parser」のソースをコピペしただけのもの。<br />
「本日のToDo」あるいは「本日の営業：ToGo」とか、デスクトップで使えますかね。</p>
<p>以下、作り方の覚え書き。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Thu, 20 Nov 2008 14:12:01 +0900</pubDate>
</item>
<item>
<title>Elevation (2): javascript 版</title>
<link>http://japonyol.net/editor/archives/2008/11/altitude-javascript.html</link>
<guid>http://japonyol.net/editor/archives/2008/11/altitude-javascript.html</guid>
<description><![CDATA[<p>私は、ナウでもヤングでもないけれど、<a href="http://px.a8.net/svt/ejp?a8mat=1BP9C1+1SBLE+348+65MEA" target="_blank">ロリポップ！</a><img alt="" width="1" height="1" src="http://www10.a8.net/0.gif?a8mat=1BP9C1+1SBLE+348+65MEA" />レンタルサーバーを借りています。<br />
その PHP が（４から５へ）バージョンアップしたついでに、利用できる function（関数）が従前の1077件から1366件に増えています。その中に curl 関数も含まれるので、以下のようなクロスドメイン対策を</p>
<pre>$ch=curl_init();
curl_setopt($ch, CURLOPT_URL, "http://gisdata.usgs.gov/xmlwebservices......</pre>
<p>施し、米国・地質調査所のサイトにアクセスしてデータを頂いてみようと思ったら、できません（Why!?）。<br />
しかたなく、<a href="javascript:;" onmousedown="if (document.getElementById('proxy').style.display == 'none') {document.getElementById('proxy').style.display = 'block';} else {document.getElementById('proxy').style.display = 'none';}" title="open / close">LWP</a> を介してみます。基本は<a href="http://japonyol.net/editor/archives/2008/10/elevation.html" target="_blank">10月に作ったフラッシュ版</a>と同じ。</p>
<div id="proxy" style="display: none;">
<pre>#!/usr/bin/perl
use LWP::Simple;
$url = $ENV{'QUERY_STRING'}; 
print "Content-type: text/xml\n\n";
print get($url);</pre>
</div>
<p>陸地をクリックすればその地点の標高が分かります。リバース・ジオコーディングと抱き合わせ。</p>
<p>※USGS のサーバーは、1. すぐに返事をしない、2. ちゃらんぽらんな回答をよこす、3. 熟睡してしまう、などなど、ときどき仕事をサボるクセがありますが、堪忍してあげましょう。</p>
<iframe src="http://japonyol.net/editor/altitude.html" title="Altitude and Reverse Geo" scrolling="no" width="100%" frameborder="0" height="440">（フレーム挿入: Google Maps API2）</iframe>
<p>コードはソースを見てもらえれば分かります。<small>【<a href="http://japonyol.net/editor/altitude.html" target="_blank">新しいウィンドウで開く</a>】</small></p>
<p>ついでに覚え書き。借りているサーバーで使用できる関数を知るには、以下のような hoge.php をアップしてアクセスすれば判るとのこと。</p>
<pre>&lt;?php
function myrow($id, $data) {
    return "&lt;tr&gt;&lt;th&gt;$id&lt;/th&gt;&lt;td&gt;$data&lt;/td&gt;&lt;/tr&gt;\n";
}
$arr = get_defined_functions();
print_r($arr);
?&gt;</pre>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Tue, 18 Nov 2008 12:45:02 +0900</pubDate>
</item>
<item>
<title>ドライブルート検索（丸投げ）</title>
<link>http://japonyol.net/editor/archives/2008/11/drive-route.html</link>
<guid>http://japonyol.net/editor/archives/2008/11/drive-route.html</guid>
<description><![CDATA[<p>小ネタ。maps.google.com 「ルート・乗換案内」の「車で行く」にパラメータをわたすときは、dirflg=d を付け加えるだけ。</p>
<pre>maps.google.com/maps?saddr={start_address}&amp;daddr={destination_address}&amp;dirflg=d</pre>
<p>これでドライブルート検索をグーグルに丸投げ。たとえば、destination_address をあらかじめ決め打ちして「会場はコチラです」といった案内図を用意すれば、按配が宜しいかと。<br />
地図上をクリックしたり、住所検索してみましょう。</p>
<iframe src="http://japonyol.net/editor/drive.html" title="「車で行く」" scrolling="no" width="100%" frameborder="0" height="440">（フレーム挿入 Google Maps API 2: 「ルート・乗換案内」へ）</iframe>
<p>むろん、ただのフォームを設置するだけでも便利でしょうし。</p>
<form action="http://maps.google.com/maps" method="get" target="_blank"><p>
  <input type="text" size=20 name="daddr" id="daddr" value="" />から 
  <input type="text" size=20 name="saddr" id="saddr" value="" />まで
  <input type="hidden" name="dirflg" value="d" />
  <input value="Google ドライブルート検索" type="submit" />
</p></form>
<p><a href="http://japonyol.net/editor/archives/2008/10/google-maps-api-drive.html" target="_blank">GDirections</a> は未だ日本で使えないようなので、覚え書き。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Wed, 12 Nov 2008 20:24:01 +0900</pubDate>
</item>
<item>
<title>いま何時？（2）</title>
<link>http://japonyol.net/editor/archives/2008/11/world-time-zone.html</link>
<guid>http://japonyol.net/editor/archives/2008/11/world-time-zone.html</guid>
<description><![CDATA[<p>マクラ。<a href="http://japonyol.net/editor/atacama.html" target="_blank">東京大学がチリに天文台を建設する件</a>（TAO計画のマップ）</p>
<p>さて、９月に <a href="http://japonyol.net/editor/archives/2008/09/local-time-zone.html" target="_blank">World Time Zone（世界時計）をフラッシュで作りました</a>が、今回は javascript 版。<br />
陸地をクリックすればその地点の Local Time が分かります。リバース・ジオコーディングと抱き合わせ。</p>
<iframe src="http://japonyol.net/editor/localtime.html" title="TimeZone and Reverse Geo" scrolling="no" width="100%" frameborder="0" height="440">（フレーム挿入 Google Maps API 2: EarthTools）</iframe>
<p>コードはソースを見てもらえれば分かります。<small>【<a href="http://japonyol.net/editor/localtime.html" target="_blank">新しいウィンドウで開く</a>】</small></p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Thu, 06 Nov 2008 15:28:02 +0900</pubDate>
</item>
<item>
<title>Google Maps API のドライブルート案内</title>
<link>http://japonyol.net/editor/archives/2008/10/google-maps-api-drive.html</link>
<guid>http://japonyol.net/editor/archives/2008/10/google-maps-api-drive.html</guid>
<description><![CDATA[<p>Google Maps のドライブルート案内、日本国内については、今日現在まで API には適用されていません。現状では、欧米のいくつかの国で機能します。<br />
いずれ、次のマップが日本国内でも機能するようになることでしょう。<br />
ただ、それが明日なのか、一週間後なのか、一ヵ月後なのかは、知りません（<em>see</em> <a href="http://gmaps-samples.googlecode.com/svn/trunk/mapcoverage_filtered.html" target="_blank">Autofilter</a>）。</p>
<iframe src="http://japonyol.net/editor/GD.html" title="GDirections: Drive Route" scrolling="no" width="100%" frameborder="0" height="580">（挿入: ドライブルート案内: Google Maps API）</iframe>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Thu, 30 Oct 2008 20:38:03 +0900</pubDate>
</item>
<item>
<title>Reverse Geocoding</title>
<link>http://japonyol.net/editor/archives/2008/10/reverse-geocoding.html</link>
<guid>http://japonyol.net/editor/archives/2008/10/reverse-geocoding.html</guid>
<description><![CDATA[<p>Google Maps API v=2.133d、地図上をクリック。けっこう正確、日本に限らず世界で使えて便利。</p>
<iframe src="http://japonyol.net/editor/reverse.html" title="Reverse Geocoding" scrolling="no" width="580" frameborder="0" height="420">（挿入: リバース・ジオコーディング: Google Maps API）</iframe>
<p><a href="javascript:;" onmousedown="if (document.getElementById('reverse').style.display == 'none') {document.getElementById('reverse').style.display = 'block';} else {document.getElementById('reverse').style.display = 'none';}">このマップのソース (Open / Close)</a></p>
<div id="reverse" style="display: none;">
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; 
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; 
  &lt;head&gt; 
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt; 
    &lt;title&gt;Google Maps API: Reverse Geocoding&lt;/title&gt; 
    &lt;style type="text/css"&gt; 
    body { font-family: Arial, Verdana, sans-serif; font-size: 13px; }
    #map_canvas img { cursor: crosshair; }
    &lt;/style&gt; 
    &lt;script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;hl=en&amp;v=2.133d&amp;key=YOUR-KEY"&gt;&lt;/script&gt; 
    &lt;script type="text/javascript"&gt; 
    var map = null;
    var geocoder = null;
    var marker;
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37, 135.0), 5);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl(true));
        geocoder = new GClientGeocoder();
        GEvent.addListener(map, "click", clicked);
      }
    }
    function clicked(overlay, latlng) {
      if (latlng) {
        geocoder.getLocations(latlng, function(addresses) {
          if(addresses.Status.code != 200) {
            alert("reverse geocoder failed to find an address for " + latlng.toUrlValue());
          }
          else {
            map.clearOverlays();
            address = addresses.Placemark[0];
            marker = new GMarker(latlng, {draggable: true});
            map.addOverlay(marker);
            point2address();
            GEvent.addListener(marker, "dragstart", function() {
              map.closeInfoWindow();
            });
            GEvent.addListener(marker, "dragend", point2address);
          }
        });
      }
    }
function point2address(flag) {
    point = marker.getPoint();
    geocoder.getLocations(point, function(addresses) {
        if(addresses.Status.code != 200) {
            alert("reverse geocoder failed to find an address for " + point.toUrlValue());
        }
        else {
            address = addresses.Placemark[0];
            var myHtml = '&lt;b&gt;Reversed Geocoded Address:&lt;\/b&gt;&lt;br/&gt;'+address.address + '&lt;br/&gt;' + 
                   '&lt;b&gt;Coordinates (lat, lng):&lt;\/b&gt;&lt;br/&gt;' + point.toUrlValue();
            if (flag == 'plus original address') {
                myHtml = '&lt;b&gt;Original Address:&lt;\/b&gt;&lt;br/&gt;'+document.frm.address.value + '&lt;br/&gt;' +
                         '&lt;b&gt;Coordinates (lat, lng):&lt;\/b&gt;&lt;br/&gt;' + point.toUrlValue() + '&lt;br/&gt;&lt;br/&gt;' + 
                         myHtml;
            }
            marker.openInfoWindow( myHtml);
        }
    });
}
function addCoordsToMap(response) {
    map.clearOverlays();
    if (!response || response.Status.code != 200) {
        alert('Address not found');
    } 
    else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
        marker = new GMarker(point, {draggable: true});
        map.setCenter(point, 15);
        map.addOverlay(marker);
         point2address("plus original address");
        GEvent.addListener(marker, "dragstart", function() {
            map.closeInfoWindow();
        });
        GEvent.addListener(marker, "dragend", point2address);
    }
}
function showAddress(address) {
    if (geocoder) {
        geocoder.getLocations(address,addCoordsToMap)
    }
}
    &lt;/script&gt; 
&lt;/head&gt; 
&lt;body onload="initialize()" onunload="GUnload()"&gt;
&lt;form action="" name="frm" onsubmit="showAddress(this.address.value); return false"&gt;住所: 
&lt;input type="text" size="32" name="address" value="" /&gt; 
&lt;input type="submit" value="検索" /&gt; ※アイコンは Draggable
&lt;/form&gt;
&lt;div id="map_canvas" style="width: 560px; height: 360px; border: 1px solid #666666; margin-top: 4px;"&gt;Loading...&lt;/div&gt; 
&lt;/body&gt;
&lt;/html&gt;</pre>
</div>
<p>Google Maps API <a href="http://japonyol.net/editor/googlemaps.html" target="_blank">サンプル一覧</a>および<a href="http://japonyol.net/maps/" target="_blank">フラッシュ版</a></p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Wed, 22 Oct 2008 14:20:03 +0900</pubDate>
</item>
<item>
<title>マピオン Flash Maps API</title>
<link>http://japonyol.net/editor/archives/2008/10/mapion-flash.html</link>
<guid>http://japonyol.net/editor/archives/2008/10/mapion-flash.html</guid>
<description><![CDATA[<p>掲題の <a href="http://labs.mapion.co.jp/api/" target="_blank">Mapion Flash API</a> がリリースされていたということなので比較検討</p>
<script type="text/javascript"> 
swfobject.embedSWF("http://japonyol.net/maps/swf/Mapion.swf", "flashcontent1009", "480", "360", "9.0.0","http://japonyol.net/maps/expressInstall.swf");
</script> 
<div style="width: 480px; height: 380px;"> 
  <div id="flashcontent1009">Mapion plus Google Maps API for Flash, FLEX 3 SDK</div> 
</div>
<p>ソースは右クリック</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Thu, 09 Oct 2008 15:21:58 +0900</pubDate>
</item>
<item>
<title>Elevation</title>
<link>http://japonyol.net/editor/archives/2008/10/elevation.html</link>
<guid>http://japonyol.net/editor/archives/2008/10/elevation.html</guid>
<description><![CDATA[<p>米国の地質調査所（USGS）は、さまざまなウェブサービスを提供しています（例：<a href="http://japonyol.net/editor/terremoto.html" target="_blank">地震情報</a>など）。<br />
<a href="http://gisdata.usgs.net/xmlwebservices2/elevation_service.asmx?op=getElevation" target="_blank">Elevation（標高の値）</a>は、ちょっと前までデータ提供範囲が米国と欧州の一部に限られていましたが、日本のデータ提供も始まったようです。</p>
<p>下のグーグル・マップでは、中心にくる地点の標高が、「Get Elevation」をクリックすると分かります。</p>
<script type="text/javascript">
swfobject.embedSWF("http://japonyol.net/maps/swf/elevation.swf", "flashcontent1003", "480", "360", "9.0.0","http://japonyol.net/maps/expressInstall.swf");
</script>
<div style="width: 480px; height: 380px;">
  <div id="flashcontent1003">USGS Elevation: Google Maps API for Flash, FLEX 3 SDK</div>
</div>
<p>クエリは、<br />
elevation_service.asmx/getElevation?X_Value="+lng+"&amp;Y_Value="+lat+"&amp;Elevation_Units=meters&amp;Source_Layer=-1&amp;Elevation_Only=1</p>
<p>ただし、若干のズレが出ます（例：富士山＝3776m、高尾山＝599m とならない）。<br />
地球が球体である以上、「Quadrature of a Circle（円の求積）」という永遠の問題がつきまといます。<br />
重箱の隅をつつくように精確さを要求しようとしたら、それは栓の無いこと。</p>
<p>だけどやはり米国内は精緻です。「Denver CO」、「Seattle WA」など検索してみますと。</p>
<p>Google Maps API - <a href="http://japonyol.net/editor/googlemaps.html" target="_blank">javascript 版サンプル一覧</a> | <a href="http://japonyol.net/maps/" target="_blank">flash 版サンプル一覧</a></p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Fri, 03 Oct 2008 12:45:23 +0900</pubDate>
</item>
<item>
<title>乗換検索、Street View 補足</title>
<link>http://japonyol.net/editor/archives/2008/09/google-yaw-pitch.html</link>
<guid>http://japonyol.net/editor/archives/2008/09/google-yaw-pitch.html</guid>
<description><![CDATA[<p>超シンプル・Google 乗換検索フラッシュ版。住所とか駅名を、saddr と daddr で飛ばして丸投げ。</p>
<script type="text/javascript">
swfobject.embedSWF("http://japonyol.net/maps/swf/transit.swf", "flashcontent080919", "360", "35", "9.0.0","http://japonyol.net/maps/expressInstall.swf");
</script>
<div style="width:360px; height:50px;"><div id="flashcontent080919">Simple Flash: Google Transit</div></div>
<p><small><a href="javascript:;" onmousedown="if (document.getElementById('transit').style.display == 'none') {document.getElementById('transit').style.display = 'block';} else {document.getElementById('transit').style.display = 'none';}">MXML (Open / Close)</a></small></p>
<div id="transit" style="display: none; margin-bottom:20px;">
<pre>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"&gt;
    &lt;mx:ControlBar&gt;
        &lt;mx:Label text="乗換検索　From:"/&gt;
        &lt;mx:TextInput id="saddr" width="80"/&gt;
        &lt;mx:Label text="To:"/&gt;
        &lt;mx:TextInput id="daddr" width="80"/&gt;
        &lt;mx:Button id="searchButton"
          click="navigateToURL(new URLRequest('http://maps.google.co.jp/maps?saddr='
            + saddr.text + '&amp;daddr=' + daddr.text), '_blank');"
          label="Go"&gt;&lt;/mx:Button&gt;
    &lt;/mx:ControlBar&gt;
&lt;/mx:Application&gt;</pre>
</div>
<p>もっとも、フラッシュなんぞ使う必要はないが。</p>
<form action="http://maps.google.co.jp/maps?saddr='+saddr+'&amp;daddr='+daddr" target="_blank"><p>
  <input name="saddr" type="text" size="16" />
  <input name="daddr" type="text" size="16" />
  <input type="submit" value="Google 乗換検索" />
</p></form>
<p>さて<a href="http://japonyol.net/editor/archives/2008/08/google-maps-api-street2.html" target="_blank">ストリートビュー</a>の補足・復習。<br />
会社や店舗のアクセスマップとして Google Maps Street View を使おうというのは道理。<br />
Google Maps では、Y軸回りの上下振り角度をピッチ角（Pitch Angle）、Z軸回りの左右振りの角度をヨー角（Yaw Angle）として設定されますね。下のパノラマをグリグリしてみましょう。</p>
<p><img src="http://japonyol.net/editor/archives/images/yaw-pitch.gif" width="680" height="233" alt="yaw, pitch" /></p>
<iframe src="http://japonyol.net/editor/yaw-pitch.html" title="Street View: Yaw, Pitch" frameborder="0" width="685" height="320" scrolling="no">（挿入: Google Maps API: Street View）</iframe>
<p>原則的に、ヨー角＝０、ピッチ角＝５で初期表示されるみたい（範囲はそれぞれ0から360、-90から90まで）。適宜この数値を調整のうえ表示すれば、おあとがよろしいかと。</p>
<p><a href="http://japonyol.net/editor/access-map.html" target="_blank"><img src="http://japonyol.net/editor/archives/images/guy.png" width="49" height="52" alt="guy" style="vertical-align: middle;" />　使用例</a></p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Thu, 18 Sep 2008 14:56:02 +0900</pubDate>
</item>
<item>
<title>Sunrise, Sunset</title>
<link>http://japonyol.net/editor/archives/2008/09/sunrise_sunset.html</link>
<guid>http://japonyol.net/editor/archives/2008/09/sunrise_sunset.html</guid>
<description><![CDATA[<p>先々週の <a href="http://japonyol.net/editor/archives/2008/09/local-time-zone.html">World Time Zone</a> のヒネリ、日の出・日の入り時刻。</p>
<script type="text/javascript">
swfobject.embedSWF("http://japonyol.net/maps/swf/sun.swf", "flashcontent080916", "426", "400", "9.0.0","expressInstall.swf");
</script>
<div style="width:426px; height:416px;"><div id="flashcontent080916">Google Maps Flash: FLEX SDK</div></div>
<p>尤も、ごく一部の健康的な職業の方々だけしか関係ないか。</p>
<p>Google Maps API - <a href="http://japonyol.net/editor/googlemaps.html" target="_blank">javascript 版サンプル一覧</a> | <a href="http://japonyol.net/maps/" target="_blank">flash 版サンプル一覧</a></p>
<p>余談。今朝も東急田園都市線は遅れに遅れた。この路線は本当によく遅れる。しょっちゅう遅れる。頻繁に遅れる。今朝のケースは信号機故障らしいけれど、他によくあるパターンは</p>
<ul>
<li>「人身事故の影響により・・・」（特に週の始めに多い）</li>
<li>「お客様同士のトラブルにより・・・」（同上）</li>
<li>「荷物がドアに引き込まれたため・・・」（強引な駆け込み乗車か）</li>
<li>「地下鉄線内の遅れにより・・・」（悪いのはメトロだという口調）</li>
<li>「東上線内の遅れにより・・・」（悪いのは東武だという口調）</li>
<li>「雨の影響により・・・」（電車は全天候型じゃないのかね？）</li>
<li>「具合の悪いお客様の救護のため・・・」（後述）</li>
</ul>
<p>アクシデントやトラブルは仕方のないこと。ただ、東急の場合、あまりに事後の対応が遅い。どうも、各駅員や運転士、車掌など現場の側に対して、管制側から迅速な情報伝達がなされていないように感じられる（少なくとも、乗客に対して説明が足りないと思う）。</p>
<p>そして、今朝の遅延の件について日経夕刊の記事</p>
<blockquote><p><strong>田園都市線で71人不調訴え</strong>　　過密状態、15人搬送</p></blockquote>
<p>事後の初動が鈍いから、客も具合が悪くなろうというもの。<br />
私はさっさと他の路線に回避して事なきを得た（何年も乗っているので学習効果）。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Tue, 16 Sep 2008 20:36:06 +0900</pubDate>
</item>
<item>
<title>Trigger, Full-Screen, Tooltip</title>
<link>http://japonyol.net/editor/archives/2008/09/flash-map-full-screen.html</link>
<guid>http://japonyol.net/editor/archives/2008/09/flash-map-full-screen.html</guid>
<description><![CDATA[<p>Google Maps for Flash: <a href="http://japonyol.net/maps/container.html" target="_blank">Trigger effects on container, full-screen mode and tooltip</a></p>
<p>javascript 版では実現できない「フラッシュならではのマップ表現」とは如何なものか？　と思いまして</p>
<ol>
<li>効果を与えてコンテナをトリガー</li>
<li>フルスクリーン・モードを付加</li>
<li>クルクルするツールチップ</li>
<li>ついでにビデオも再生でける</li>
</ol>
<p>以上の質素な試作品。しめて208行、「立って半畳寝て一畳スクリプト」（ソースは右クリック）。</p>
<p><strong>Google Maps API - <a href="http://japonyol.net/editor/googlemaps.html" target="_blank">javascript 版サンプル一覧</a> | <a href="http://japonyol.net/maps/" target="_blank">flash 版サンプル一覧</a></strong></p>
<p>さて、総選挙が近いような按配。パソコンなどで戯れている場合ではないですか。そうですね。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Wed, 10 Sep 2008 12:47:06 +0900</pubDate>
</item>
<item>
<title>いま何時？</title>
<link>http://japonyol.net/editor/archives/2008/09/local-time-zone.html</link>
<guid>http://japonyol.net/editor/archives/2008/09/local-time-zone.html</guid>
<description><![CDATA[<p><a href="http://www.earthtools.org/" target="_blank">EarthTools</a> というサイトは、便利な機能を提供しています。緯度・経度の値から、現地時間や GMT との時差、日の出・日の入り時間などを教えてくれます。</p>
<p>で、「某国の某都市はいま何時？」というのを一覧即解に。</p>
<script type="text/javascript">
swfobject.embedSWF("http://japonyol.net/maps/LocalTime2.swf", "flashcontent0904", "560", "330", "9.0.0","http://japonyol.net/maps/expressInstall.swf");
</script>
<div style="width: 560px; height: 350px;">
  <div id="flashcontent0904">Fade-in VSlider, Time Zone: FLEX 3 SDK, Google Maps for Flash</div>
</div>
<p>フェードするズーム・コントロール（Fade-in VSlider）機能は、<a href="http://code.google.com/apis/maps/documentation/flash/demogallery.html" target="_blank">Google のデモ・ギャラリー</a>に掲載してくれました。Pamela さん、今週もおおきに。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Thu, 04 Sep 2008 12:50:01 +0900</pubDate>
</item>
<item>
<title>sine, cosine, tangent</title>
<link>http://japonyol.net/editor/archives/2008/08/sine_cosine_tangent.html</link>
<guid>http://japonyol.net/editor/archives/2008/08/sine_cosine_tangent.html</guid>
<description><![CDATA[<p>下の地図の円は、radius（半径）=1km で描かれています。</p>
<blockquote><p>var d2r = Math.PI/180; var r2d = 180/Math.PI; var Clat = radius * 0.008999; var Clng = Clat/Math.cos(lat*d2r); </p></blockquote>
<p>この円内に現れるポイント群は、データベース（MySQL）から PHP で以下のように引っ張られます。</p>
<blockquote><p>6371 * acos(cos(radians('%s')) * cos(radians(lat)) * cos(radians(lng) - radians('%s')) + sin(radians('%s')) * sin(radians(lat)))</p></blockquote>
<p>むかし、三角関数でサイン/sine、コサイン/cosine、タンジェント/tangent など習いましたね。</p>
<p><big>私はちっともおぼえてません</big>　<small>ともかくマップを東西南北に動かしましょう</small></p>
<iframe src="http://japonyol.net/editor/radius.html" title="Store-Locator" scrolling="no" width="680" height="580" frameborder="0">（挿入: Google Maps javascript API: StoreLocator）</iframe>
<p>この javascript は FLASH にも敷衍できるよね？　と（自分で出来ないので）ディスカッション・グループに投げてみたら、例によってグーグルのパメラ女史が「こうよ！」と<a href="http://gmaps-samples-flash.googlecode.com/svn/trunk/demos/StoreLocatorDemo/StoreLocatorDemo.html" target="_blank">サンプルを例示</a>してくれました。<br />
そのお手本を元に、次のようにアレンジしてみます。</p>
<div style="width: 680px; height: 500px;"><div id="flashcontent0831">首都圏1400駅の検索フラッシュファイル / Flex 3 SDK</div></div>
<script type="text/javascript">
swfobject.embedSWF("http://japonyol.net/maps/swf/StoreNew.swf", "flashcontent0831", "680", "500", "9.0.0","http://japonyol.net/maps/expressInstall.swf");
</script>
<p style="margin-top: 12px;">毎度おおきに。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Sun, 31 Aug 2008 16:14:02 +0900</pubDate>
</item>
<item>
<title>YouTube, Flickr を使わないでビデオを掲載する</title>
<link>http://japonyol.net/editor/archives/2008/08/youtube_flickr.html</link>
<guid>http://japonyol.net/editor/archives/2008/08/youtube_flickr.html</guid>
<description><![CDATA[<p>子供の夏休みも終盤。首都高速を走り、お台場の「日本科学未来館」に連れて行った。</p>
<div style="width: 370px; height: 290px;"><div id="flashcontent0823">ロボット「ASIMO」。ビデオのフラッシュファイル / Flex 3 SDK</div></div>
<script type="text/javascript">
swfobject.embedSWF("http://japonyol.net/maps/swf/VideoControl.swf", "flashcontent0823", "370", "290", "9.0.0","http://japonyol.net/maps/expressInstall.swf");
</script>
<p style="margin-top: 12px;">先日の記事書き直し。上は、デジカメ（Canon IXY Digital 10）で撮影した ASIMO のビデオ。</p>
<ol>
<li>デジカメとかで映像を撮ると .avi 形式とかいったファイルになる</li>
<li>それを <a href="http://www.vector.co.jp/soft/winnt/art/se460031.html" target="_blank">Any Video Converter</a> などフリーのソフトで .flv に変換</li>
<li>flv ファイルを（これまたフリーの）<a href="http://www.adobe.com/products/flex/flexdownloads/index.html#sdk" target="_blank">Adobe Flex 3 SDK</a> でコンパイルして .swf の完成</li>
</ol>
<p>YouTube も Flickr も、結局はフラッシュなのだから同じこと、自前で済ますのもアリかなと思う次第。mxml の<a href="http://japonyol.net/maps/video-control.html" target="_blank">ソース</a>。</p>
<p>さて、Google が位置情報特定のためのAPI「Gears Geolocation API」を公開したが、その関連。<br />
これをご覧のあなた、下の地図に近隣の地域が表示されますでしょうか？　ちなみに私は「狛江市, 東京都」と表示されます。本当は横浜なので、約15kmの誤差。契約するプロバイダや中継局にもよるのかもしれないけれど、イロイロな可能性を感じさせる機能（google.loader.ClientLocation）。</p>
<iframe src="http://japonyol.net/editor/location.html" title="IP-Based Location" frameborder="0" height="270" scrolling="no" width="520">（挿入: Google Maps API: Geolocation）</iframe>
<p>昨年の春に<a href="http://japonyol.net/editor/archives/2007/04/post-139.html" target="_blank">ギックリ腰を喰らって</a>以来、尾てい骨の上あたりに魔女がずっと棲みついている按配。<br />
仰向けに寝てもうつ伏せに寝ても腰が痛いので、やむなくイルカの抱き枕をかかえて横向きで寝ている。<br />
読者諸兄には、「40のオッサンがイルカさんを抱きかかえて眠っている」姿を推察いただきたい。涙を（あるいは笑いを）禁じ得ないであろう。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Sat, 23 Aug 2008 21:05:00 +0900</pubDate>
</item>
<item>
<title>markerlight.js</title>
<link>http://japonyol.net/editor/archives/2008/08/markerlightjs.html</link>
<guid>http://japonyol.net/editor/archives/2008/08/markerlightjs.html</guid>
<description><![CDATA[<p>例によってグーグルのパメラ女史が放つライブラリ、今回は軽量マーカー。<br />
「Add Markers」を押せば、皇居（桜田門）から半径30km以内にある鉄道駅がサクッと現れます。1032件という結構な数ですが、ストレスを感じることはなし。<br />
いったん Clear して、標準の「GMarker」も表示してみると、実に遅い（ある意味、壮観ではある）。</p>
<iframe src="http://japonyol.net/editor/markerlight.html" title="MarkerLight" frameborder="0" height="410" scrolling="no" width="690">（挿入: Google Maps API: MarkerLight.html）</iframe>
<p>画像の大小の差ではありません。なお、マーカーをゴシゴシこすったら、グレープ味が楽しめます。「当たり」が出たら「ブラックモンブラン」をもう一本食べられます。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Fri, 22 Aug 2008 12:59:21 +0900</pubDate>
</item>
<item>
<title>Google Maps API ストリートビュー（その３・すすめすすめ勝手に進め）</title>
<link>http://japonyol.net/editor/archives/2008/08/maps-api-view3.html</link>
<guid>http://japonyol.net/editor/archives/2008/08/maps-api-view3.html</guid>
<description><![CDATA[<p><a href="http://japonyol.net/editor/archives/2008/08/google-maps-api-street2.html">昨日</a>に引き続き。画面上をグリグリするのも面倒くさいので。</p>
<p><strong><a href="http://japonyol.net/editor/street-view-move.html" target="_blank">Google Maps API ストリートビュー（その３）</a></strong></p>
<p><small><span style="font-color: blue; text-decoracion: underline;"><a href="javascript:;" onmousedown="if (document.getElementById('street-view3').style.display == 'none') {document.getElementById('street-view3').style.display = 'block';} else {document.getElementById('street-view3').style.display = 'none';}">この Maps API のソース</a></span></small></p>
<div id="street-view3" style="display: none;">
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;Seis Pesos: ストリートビューその３&lt;/title&gt;
&lt;style type="text/css"&gt;
  body {
    font-family: "Arial", osaka, sans-serif;
    font-size: 13px;
  }
&lt;/style&gt;
&lt;script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
google.load("maps", "2.x");
 var map;
 var myPano;
 var panoClient;
 var myPOV = null;
 var currentYaw = 0;
 var currentPitch = 0;
 var timer;
 var marker;
 function initialize() { panoClient = new GStreetviewClient();
 var latlng = new GLatLng(35.660092, 139.70072);
 map = new GMap2(document.getElementById("map"), {draggableCursor: 'crosshair'});
 map.setCenter(latlng, 15);
 map.addMapType(G_PHYSICAL_MAP);
 map.addControl(new GHierarchicalMapTypeControl());
 map.addControl(new GSmallMapControl());
 myPano = new GStreetviewPanorama(document.getElementById("streetview"));
 myPano.setLocationAndPOV(latlng, {yaw: 0, pitch: 0});
 GEvent.addListener(map, "click", function(overlay,latlng) {
   panoClient.getNearestPanorama(latlng, showPanoData);
 });
 GEvent.addListener(myPano, "initialized", move);
 GEvent.addListener(myPano, "yawchanged", onYawChange);
 panoClient.getNearestPanorama(latlng, showPanoData);
// svOverlay = new GStreetviewOverlay();
// map.addOverlay(svOverlay);
 }
 function showPanoData(panoData) {
   if (panoData.code == 600) {
     alert('ストリートビュー未対応地域です');
   } else {
     var html = "&lt;p&gt;&lt;strong&gt;"+panoData.location.description+"&lt;\/strong&gt;&lt;br/&gt;"+panoData.location.latlng+"&lt;\/p&gt;";
     map.setCenter(panoData.location.latlng);
     map.openInfoWindowHtml(panoData.location.latlng, html);
     myPano.setLocationAndPOV(panoData.location.latlng, myPOV);
   }
 } 
 function move(panoData) {
   var html = "&lt;p&gt;&lt;strong&gt;"+panoData.description+"&lt;\/strong&gt;&lt;br/&gt;"+panoData.latlng+"&lt;\/p&gt;";
   map.setCenter(panoData.latlng);
   map.openInfoWindowHtml(panoData.latlng, html);
   poslat = String(panoData.lat);
   poslng = String(panoData.lng);
 }
 function onYawChange(newYaw) {
   if (newYaw &lt; 0) {
     newYaw += 360;
   }
   var pov = myPano.getPOV();
   yawangle = pov.yaw.toFixed(0);
   pitchangle = pov.pitch.toFixed(0);
   zoomvalue = pov.zoom;
 }
 function animate0() { myPano.followLink(0);}
 function animatestart0() {
   clearInterval(timer);
   timer = window.setInterval(animate0, 2000);
 }
 function animate180() {
   myPano.followLink(180);
 }
 function animatestart180() {
   clearInterval(timer);
   timer = window.setInterval(animate180, 2000);
 }
 function rotate() {
   currentYaw += 2;
   myPano.panTo({yaw:currentYaw, pitch:currentPitch});
 }
 function rotatestart() {
   clearInterval(timer);
   timer = window.setInterval(rotate, 200);
 }
 function animatestop() {
   clearInterval(timer);
 } 
 google.setOnLoadCallback(initialize);
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form action=""&gt;&lt;p&gt;
&lt;input type="button" value="すすむ" onclick="animatestart0()" title="すすむ" /&gt;
&lt;input type="button" value="ストップ" onclick="animatestop()" title="ストップ" /&gt;
&lt;input type="button" value="もどる" onclick="animatestart180()" title="もどる" /&gt;
&lt;input type="button" value="ぐるりとまわる" onclick="rotatestart()" title="ぐるりとまわる" /&gt;
&lt;/p&gt;&lt;/form&gt;
&lt;div id="container_streetview"&gt;
    &lt;div id="streetview" style="width:480px; height:240px; border: 1px solid black; margin-bottom: 4px;"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id="map" style="width:480px; height:240px; border: 1px solid black;"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</div>
<p><a href="http://www.glotter.com/" target="_blank">Glotter.com</a> を参考にさせていただきました。※<a href="http://japonyol.net/editor/archives/2008/09/google-yaw-pitch.html">補足</a></p>
]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Thu, 07 Aug 2008 14:42:23 +0900</pubDate>
</item>
<item>
<title>Google Maps API ストリートビュー（改）</title>
<link>http://japonyol.net/editor/archives/2008/08/google-maps-api-street2.html</link>
<guid>http://japonyol.net/editor/archives/2008/08/google-maps-api-street2.html</guid>
<description><![CDATA[<p><a href="http://japonyol.net/editor/archives/2008/08/map-street-view.html">昨日の Maps API</a> も maps.google.com も、ストリートビューはいまひとつ使いづらい。<br />
ガイドの青い Polyline も重い。よって Maps API やりなおし。</p>
<p><strong><a href="http://japonyol.net/editor/view-view.html" target="_blank">Google Maps API ストリートビュー（その２）</a></strong></p>
<p>左の地図を（シングル）クリックしたら、その箇所のパノラマが右に出る。</p>
<p><a href="http://japonyol.net/editor/archives/2008/08/maps-api-view3.html">その３</a>、<a href="http://japonyol.net/editor/archives/2008/09/google-yaw-pitch.html">補足</a></p>
<p>グーグルがこの事業にかけるマンパワーなどのコストに思いを致すと、つくづく感心する。全国津々浦々を走り回って撮影し尽くすつもりなのか知らん。しかも国土や町並みは時々刻々と変容しているから、後々アップデートするのもタイヘンなことだ。<br />
追って API for Flash にも敷延していただきたいところ。<br />
しかしこんな奥多摩の山奥までビューが必要なのかどうか分からないが。</p>
]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Wed, 06 Aug 2008 13:00:25 +0900</pubDate>
</item>
<item>
<title>Street View 日本のストリートビュー</title>
<link>http://japonyol.net/editor/archives/2008/08/map-street-view.html</link>
<guid>http://japonyol.net/editor/archives/2008/08/map-street-view.html</guid>
<description><![CDATA[<p>Google Maps 、日本では米国ほどプライバシー論争は起こらないだろうけれど、丸見えです。<br />
人形アイコンをクリックすると InfoWindow が開き、さらに <img src="http://www.google.com/intl/ja_ALL/mapfiles/iw_plus.gif" width="12" height="12" alt="Full" style="vertical-align: middle;" /> をクリックすれば最大化されます。</p>
<p><strong><a href="http://japonyol.net/editor/street-view-simple.html" target="_blank">Google Maps API ストリートビュー（その１）</a></strong>（新しいウィンドウで開く）</p>
<p><small><span style="font-color: blue; text-decoracion: underline;"><a href="javascript:;" onmousedown="if (document.getElementById('streetview').style.display == 'none') {document.getElementById('streetview').style.display = 'block';} else {document.getElementById('streetview').style.display = 'none';}">この Maps API のソース</a></span></small></p>
<div id="streetview" style="display: none;">
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
&lt;title&gt;Streetview API&lt;/title&gt;
&lt;script type="text/javascript" src="http://www.google.com/maps?file=api&amp;v=2&amp;key=YOUR-KEY"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
var marker;
var overlayInstance = null;
var map;
var client;
var lastMarkerLocation;
var panorama;
var mapT;
function load() {
  client = new GStreetviewClient();
  var latlng = new GLatLng(35.658725, 139.746222);
  map = new GMap2(document.getElementById("map"));
  map.setCenter(latlng, 15);
  map.addControl(new GSmallMapControl());
  var guyIcon = new GIcon(G_DEFAULT_ICON);
  guyIcon.image = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-0.png";
  guyIcon.transparent = "http://maps.google.com/intl/en_us/mapfiles/cb/man-pick.png";
  guyIcon.imageMap = [
        26,13, 30,14, 32,28, 27,28, 28,36, 18,35, 18,27, 16,26,
        16,20, 16,14, 19,13, 22,8
     ];
  guyIcon.iconSize = new GSize(49, 52);
  guyIcon.iconAnchor = new GPoint(25, 35);
  guyIcon.infoWindowAnchor = new GPoint(25, 5);
  marker = new GMarker(latlng, {icon: guyIcon, draggable: true});
  map.addOverlay(marker);
  lastMarkerLocation = latlng;
  GEvent.addListener(marker, "dragend", onDragEnd);
  GEvent.addListener(marker, "click", openPanoramaBubble);
  toggleOverlay();
}
function openPanoramaBubble() {
  var contentNode = document.createElement('div');
  contentNode.style.textAlign = 'center';
  contentNode.style.width = '500px';
  contentNode.style.height = '300px';
  contentNode.innerHTML = 'Loading panorama';
  marker.openInfoWindow("&lt;div id='pano' style='width:240px;height:200px;'&gt;&lt;\/div&gt;", {maxContent: contentNode, maxTitle: "Full screen"});
  panorama = new GStreetviewPanorama(document.getElementById("pano"));
  panorama.setLocationAndPOV(marker.getLatLng(), null);
  GEvent.addListener(panorama, "newpano", onNewLocation);
  GEvent.addListener(panorama, "yawchanged", onYawChange); 
  var iw = map.getInfoWindow();
  GEvent.addListener(iw, "maximizeend", function() {
    panorama.setContainer(contentNode);  
    window.setTimeout("panorama.checkResize()", 5);
  });
}
function toggleOverlay() {
  if (!overlayInstance) {
    overlayInstance = new GStreetviewOverlay();
    map.addOverlay(overlayInstance);
  } else {
    map.removeOverlay(overlayInstance);
    overlayInstance = null;
  }
}
function onYawChange(newYaw) {
  var GUY_NUM_ICONS = 16;
  var GUY_ANGULAR_RES = 360/GUY_NUM_ICONS;
  if (newYaw &lt; 0) {
    newYaw += 360;
  }
  guyImageNum = Math.round(newYaw/GUY_ANGULAR_RES) % GUY_NUM_ICONS;
  guyImageUrl = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-" + guyImageNum + ".png";
  marker.setImage(guyImageUrl);
}
function onNewLocation(lat, lng) {
  var latlng = new GLatLng(lat, lng);
  marker.setLatLng(latlng);
}
function onDragEnd() {
  var latlng = marker.getLatLng();
  if (panorama) {
    client.getNearestPanorama(latlng, onResponse);
  }
}
function onResponse(response) {
  if (response.code != 200) {
    marker.setLatLng(lastMarkerLocation);
  } else {
    var latlng = new GLatLng(response.Location.lat, response.Location.lng);
    marker.setLatLng(latlng);
    lastMarkerLocation = latlng;
    openPanoramaBubble();
  }
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="load()" onunload="GUnload()"&gt;
&lt;div id="map" style="width: 550px; height: 380px; border: 1px solid black;"&gt;&lt;/div&gt;
&lt;form action=""&gt;&lt;p&gt; &lt;input type="button" onclick="toggleOverlay()" value="Toggle"/&gt;&lt;/p&gt;&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</div>
<p>ついでに<a href="http://japonyol.net/editor/street.html" target="_blank">こんなのも</a> API で作れます。・・・Street View はフラッシュだから、<a href="http://japonyol.net/maps">Maps API for Flash</a> にこの機能が追加されたら、当然レスポンスもいいと思います。</p>
<p>※Street View <a href="http://japonyol.net/editor/archives/2008/08/google-maps-api-street2.html">その２</a>、<a href="http://japonyol.net/editor/archives/2008/08/maps-api-view3.html">その３</a>、<a href="http://japonyol.net/editor/archives/2008/09/google-yaw-pitch.html">補足</a></p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Tue, 05 Aug 2008 06:50:01 +0900</pubDate>
</item>
<item>
<title>Google Maps Flash ひな型配布</title>
<link>http://japonyol.net/editor/archives/2008/07/google-maps-flash-template.html</link>
<guid>http://japonyol.net/editor/archives/2008/07/google-maps-flash-template.html</guid>
<description><![CDATA[<p>「フラッシュの Google Maps API 使いたいけど ActionScript とか FLEX とかワケわかんねェ」・・・という文系の諸兄に、シンプルひながた一括パック。エディタで文字を書き換えるだけ。</p>
<p><strong>ダウンロード: <a href="http://postscript.6pesos.googlepages.com/FlashMap.zip">FlashMap.zip</a> (283KB)</strong></p>
<p>サンプル：</p>
<iframe src="http://japonyol.net/maps/Gmap.html" title="Flash" frameborder="0" height="390" scrolling="no" width="500"></iframe>
<p style="margin-top: 16px;">ZIP の内容：<br />
（1） Gmap.swf = フラッシュ本体。<br />
（2） Gmap.html = デモのHTMLファイル。13行目の「YOUR_KEY」に固有の API キーを貼り付け。<br />
（3） locations.xml = 位置情報を収録するXMLファイル。これを編集するだけ。</p>
<p>現状では以下のように例を記述。</p>
<pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;markers&gt;
  &lt;marker lat="35.672315" lng="139.758292" label="帝国ホテル" memo="〒100-8558 東京都..." /&gt;
  &lt;marker lat="35.680865" lng="139.734002" label="ホテルニューオータニ" memo="〒102-8578..." /&gt;
&lt;/markers&gt;</pre>
<p>lat、lng、label、memo の４項目をお好きに。</p>
<p><strong><a href="http://japonyol.net/editor/lll.html" target="_blank">lat, lng 値の取得は、このツールで</a>。</strong></p>
<p style="margin-top: 16px;">XML編集はエディタで（例：<a href="http://www.forest.impress.co.jp/lib/offc/document/txteditor/emeditor.html" target="_blank">EmEditor フリー版</a>）。UTF-8で保存、ただし、「locations.xml」という名前を変えてはダメ。</p>
<p>あと ZIP には、<br />
（4） swfobject.js = Valid なページにするとか、ありがたやなので<br />
（5） expressInstall.swf = Flash Player がない（古い）という閲覧者のため　・・・も同梱。</p>
<p>上の例は幅480ピクセル、高さ360ピクセル。しかしフラッシュ（SWF）ファイル自体は幅・高さとも100%で作ってあるので、変更はいかようにでも（html の15行目）。<br />
以上のファイル５点をサーバーの同じ階層にアップロードしたら、できあがり。組織や団体とかの簡単なアクセスマップなどに適当かも？</p>
<p>追記：フキダシ内に html タグを使用できる（リンクや画像を挿入できる）版＝<a href="http://japonyol.net/maps/Gmap2.html">サンプル</a>、<strong>ダウンロード：<a href="http://postscript.6pesos.googlepages.com/gmap2.zip">gmap2.zip</a></strong></p>
<p>このほかの<a href="http://japonyol.net/maps/">サンプルとかデモ</a>とか。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Thu, 17 Jul 2008 15:00:01 +0900</pubDate>
</item>
<item>
<title>Polygon の汎用性・発展性</title>
<link>http://japonyol.net/editor/archives/2008/07/flash-polygon-prefecture.html</link>
<guid>http://japonyol.net/editor/archives/2008/07/flash-polygon-prefecture.html</guid>
<description><![CDATA[<p>面（Polygon）の描画は、ただの電子地図である Google Maps を、分布図や植生図などに敷延できる可能性をもっている。社会地図など教材にもなりうる。<br />
一見すると何の変哲もない<a href="http://6pesos.googlecode.com/svn/trunk/47pref.html" target="_blank">このフラッシュ地図</a>、ActionScript ファイルのサイズは2MB以上と、結構膨大なデータ量を収納。従来のMaps API （javascript）ならブラウザはイチコロ。</p>
<p><a href="http://6pesos.googlecode.com/svn/trunk/47pref.html" target="_blank"><img src="http://japonyol.net/editor/archives/images/47pref.gif" width="480" height="320" alt="47prefecture" /></a></p>
<p style="margin-top: 12px;">負荷に耐えうるフラッシュならではの可能性があると思う。<br />※トレースはアバウト。※島嶼部は除く。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Mon, 14 Jul 2008 10:29:05 +0900</pubDate>
</item>
<item>
<title>mx:DataGridColumn</title>
<link>http://japonyol.net/editor/archives/2008/07/mxdatagridcolumn.html</link>
<guid>http://japonyol.net/editor/archives/2008/07/mxdatagridcolumn.html</guid>
<description><![CDATA[<p>グーグル・マップのフキダシ内に多くの情報を詰め込むのは、なかなか容易でない。<br />
フラッシュで、コラム欄（「詳細を見る／隠す」ボタン）を活用すれば按配が宜しいかな。</p>
<p><strong><a href="http://japonyol.net/maps/swf/ColumnT.swf" target="_blank">Flex: データグリッドコラムをトーグル / Google Maps API for FLASH</a></strong></p>
<p>まもなく map_flex_1_5.swc がリリースされるようだけれど、何かフラッシュならではのドラスティックな変化が欲しいところ。「地図＋アルファ」の何か。なるべく簡易にできるような・・・。</p>
<p>GPS のプロットをやってみたいけれど、ソニーのGPSユニットキット「GPS-CS1KSP」は、思いのほか高価なので断念した。</p>
<p>この夏は、カミサンの生まれ故郷・南米パラグアイへの大帰省を予定していた。<br />
が、おりからの原油高。国際線の航空運賃には燃油特別付加運賃（燃油サーチャージ）が上乗せ、家族4人で総額100万円費やすとなると、もはや「帰省」というには壮大すぎる。・・・ので、今年は見送り。</p>
<p>よって行き先を私の田舎である福岡に変更。思い返すと、実に6年ぶり（親不孝にもほどがある）。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Fri, 04 Jul 2008 16:14:59 +0900</pubDate>
</item>
<item>
<title>mx:columns (Maps API Flash)</title>
<link>http://japonyol.net/editor/archives/2008/06/maps-api-flash-mxcolumns.html</link>
<guid>http://japonyol.net/editor/archives/2008/06/maps-api-flash-mxcolumns.html</guid>
<description><![CDATA[<p>ジオグラフィック・データセットの視覚化を <a href="http://www.insideria.com/2008/06/working-with-geogrpahic-data.html" target="_blank">Andrew Trice 氏が提示</a>しています。<br />
その作成例は高度なので、提供されているサンプルコードを基に簡略化してフラッシュを作ってみます。<br />
コラムを使えば視認性というか、訴求力が増します。例として日本の火山一覧。</p>
<script type="text/javascript">
swfobject.embedSWF("http://japonyol.net/maps/swf/Volcan.swf", "flashcontent0624", "684", "560", "9.0.0","http://japonyol.net/maps/expressInstall.swf");
</script>
<div id="flashcontent0624">Google Maps API フラッシュ・コンテンツ<br />日本の火山一覧地図</div>
<p style="margin-top: 20px;"><small><a href="http://japonyol.net/maps/" target="_blank">Flash 版サンプル一覧</a> | <a href="http://japonyol.net/editor/googlemaps.html" target="_blank">Javascript 版サンプル一覧</a></small></p>
<p><a href="http://japonyol.net/editor/volcano.html" target="_blank">火山一覧 Javascript 版</a>と比較して一長一短あるとは思いますが、学習用におもしろいのでは？</p>
<p>ところで先週の日経新聞夕刊に、「若者の地理離れ」についての記事がありました。現在の高校は、世界史が必修で日本史と地理は選択科目らしい（学会の勢力図を反映しているとの由）。おかしなハナシ。</p>
<p>おまけ、小学生の娘と息子に聞いたら、学校で国歌を習ったことがないそうです（音楽の教科書には、いちおう載っている）。おかしなハナシ。現在ではラジオ体操も教えないみたい。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Tue, 24 Jun 2008 12:37:02 +0900</pubDate>
</item>
<item>
<title>mx:Tree</title>
<link>http://japonyol.net/editor/archives/2008/06/mx-tree.html</link>
<guid>http://japonyol.net/editor/archives/2008/06/mx-tree.html</guid>
<description><![CDATA[<p>このフラッシュ試作で気付いたこと。</p>
<ul>
<li>カンタンだろうとタカをくくった mx:Tree。Adobe のヘルプを見ていたら脳味噌がフリーズした</li>
<li>Google Maps API の Geocoder、いつの間にか正確性が増していた</li>
<li>検索窓でカーソルを操作すると、マップも動いてしまう</li>
</ul>
<script type="text/javascript">
swfobject.embedSWF("http://japonyol.net/maps/swf/Tree.swf", "flashcontent06", "684", "480", "9.0.0","http://japonyol.net/maps/expressInstall.swf");
</script>
<div id="flashcontent06">Google Maps API フラッシュ・コンテンツ<br />Flex 3 SDK</div>
<p style="margin-top: 20px;"><a href="javascript:doMenu('ce0620-1');" id="sp-ce0620-1"><img src="http://japonyol.net/editor/img/collapse.gif" name="expand" width="11" height="11" alt="" /></a><small>&nbsp;MXML のソース・サンプル（間違えてたら失礼）</small></p>
<div id="ce0620-1" style="display: none;">
<pre>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%"&gt;
  &lt;mx:Panel title="Google Maps API for Flash" width="100%" height="100%"&gt;
   &lt;mx:HDividedBox width="100%" height="100%"&gt;
   &lt;mx:Tree id="kmlTree" width="140" height="100%" dataProvider="{kmlObj}" change="changeEvt(event);" labelField="name" showRoot="false"/&gt;
    &lt;mx:UIComponent id="mapContainer" 
        initialize="startMap(event);" 
        resize="resizeMap(event)" 
        width="100%" height="100%"/&gt;
    &lt;/mx:HDividedBox&gt;
  &lt;mx:ControlBar&gt;
    &lt;mx:Label text="Enter address: "/&gt;
    &lt;mx:TextInput id="address" text="" dropShadowColor="0x000000" enter="doGeocode(event);" width="100%"/&gt;
    &lt;mx:Button id="submitButton" label="検索" click="doGeocode(event);"/&gt;
  &lt;/mx:ControlBar&gt;
  &lt;/mx:Panel&gt;
  &lt;mx:Script&gt;
    &lt;![CDATA[
	import com.adobe.xml.syndication.kml.Coordinates;
	import com.adobe.xml.syndication.kml.Placemark;
	import com.adobe.xml.syndication.kml.Container;
	import com.adobe.xml.syndication.kml.Document;
	import com.adobe.xml.syndication.kml.Folder;
	import com.adobe.xml.syndication.kml.Feature;
	import flash.events.Event;
	import com.google.maps.interfaces.IMapType;
	import com.google.maps.MapEvent;
	import com.google.maps.Map;
	import com.google.maps.MapType;
	import com.google.maps.MapMouseEvent;
	import com.google.maps.services.ClientGeocoder;
	import com.google.maps.services.GeocodingEvent;
	import com.google.maps.LatLng;
	import com.google.maps.LatLngBounds;
	import com.google.maps.controls.ZoomControl;
	import com.google.maps.controls.PositionControl;
	import com.google.maps.controls.ControlPosition;
	import com.google.maps.controls.MapTypeControl;
	import com.google.maps.overlays.MarkerOptions;
	import com.google.maps.overlays.Marker;
	import com.google.maps.overlays.Polyline;
	import com.google.maps.overlays.PolylineOptions;
	import com.adobe.xml.syndication.kml.Kml22;
	import com.google.maps.InfoWindowOptions;
	import com.google.maps.styles.StrokeStyle;
	import com.google.maps.styles.FillStyle;
	import mx.controls.Alert;

  private var map:Map;
  [Bindable] public var kmlObj:Object = new Object();
  public function startMap(event:Event):void {
    map = new Map();
    map.addEventListener(MapEvent.MAP_READY, onMapReady);
    mapContainer.addChild(map);
    map.key = "YOUR_KEY";
  }

  public function resizeMap(event:Event):void {
    map.setSize(new Point(mapContainer.width, mapContainer.height));
  }

  public function onMapReady(event:MapEvent):void {
    map.setCenter(new LatLng(35.685, 139.75), 13, MapType.NORMAL_MAP_TYPE);
    var topLeft:ControlPosition =new ControlPosition(ControlPosition.ANCHOR_TOP_LEFT, 8, 6);
    var myZoomControl:ZoomControl = new ZoomControl();
    map.addControl(myZoomControl);
    myZoomControl.setControlPosition(topLeft);
    map.addControl(new MapTypeControl());
    map.enableScrollWheelZoom();
    map.enableContinuousZoom();
    var loader:URLLoader = new URLLoader();
    loader.addEventListener(Event.COMPLETE, loadXML);
    loader.load(new URLRequest("foo/hoge/hage.kml")); // KML の場所

                var polyline1:Polyline = new Polyline([
                  new LatLng(35.65883, 139.701805),
                  new LatLng(35.659493, 139.704251),
//		（中略）
                  new LatLng(35.758545, 139.630051),
                  new LatLng(35.758519, 139.629267)
                      ], new PolylineOptions({
                        strokeStyle: new StrokeStyle({
                          color: 0x993366,
                          thickness: 5,
                          alpha: 0.7})
                }));
                map.addOverlay(polyline1);
                polyline1.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent): void {
                  map.openInfoWindow(event.latLng, new InfoWindowOptions({contentHTML: "&lt;font color = '#0000ff'&gt;ほげ&lt;/font&gt;", padding: 6, width: 110}));
                });
  }

  public function loadXML(event:Event):void {
     var kml:Kml22 = new Kml22(event.target.data);
     var rootFeature:Feature = kml.feature;
     kmlObj = new Object();
     kmlObj.name = rootFeature.name;
     if (!canContainFeatures(rootFeature)) return;
     kmlObj.children = getChildrenFeatures(Container(rootFeature));
  }
   private function changeEvt(event:Event):void {
   	var mapObj:* = event.currentTarget.selectedItem.mapObject;
   	if (mapObj is Marker) {
   		var marker:Marker = Marker(mapObj);
   		map.setCenter(marker.getLatLng(), 16);
   	}
   }

  public function associateWithMapObject(obj:Object, feature:Feature):void {
  	if (feature is Placemark) {
  		var placemark:Placemark = com.adobe.xml.syndication.kml.Placemark::Placemark(feature);
  		if (placemark.geometry != null) {
  			if (placemark.geometry is com.adobe.xml.syndication.kml.Point::Point) {
  				var point: com.adobe.xml.syndication.kml.Point::Point = com.adobe.xml.syndication.kml.Point::Point(placemark.geometry);
  				var latlng:LatLng = new LatLng(point.coordinates.coordsList[0].lat, point.coordinates.coordsList[0].lon);
  				obj.mapObject = new Marker(latlng);
  				obj.mapObject.addEventListener(MapMouseEvent.CLICK, function (event:MapMouseEvent):void {
  				  obj.mapObject.openInfoWindow(new InfoWindowOptions({title: placemark.name, content: placemark.description, width: 135}));
  				});
  				map.addOverlay(obj.mapObject);
  			} 
  		}
  	}
  }
  
  public function getCoordinatesLatLngs(coordinates:Coordinates):Array {
  	var latlngs:Array = new Array();
  	for (var i:Number = 0; i &lt; coordinates.coordsList.length; i++) {
  		var coordinate:Object = coordinates.coordsList[i];
  		latlngs.push(new LatLng(Number(coordinate.lat), Number(coordinate.lon)));
  	}
  	return latlngs;
  }
  public function getChildrenFeatures(container:Container):Array {
  	var childrenFeatures:Array = new Array();
  	for (var i:Number = 0; i &lt; container.features.length; i++) {
  		var feature:Feature = container.features[i];
  		var childObj:Object = new Object();
	 	childObj.name = feature.name;
	 	if (childObj.name == null) {
	 		childObj.name = getAlternateName(feature);
	 	}
	 	if (canContainFeatures(feature)) {
	 		childObj.children = getChildrenFeatures(Container(feature));
	 	} else {
	 		associateWithMapObject(childObj, feature);
	 	}
	 	childrenFeatures.push(childObj);
  	}
  	return childrenFeatures;
  }
  
  public function canContainFeatures(feature:Feature):Boolean {
  	return (feature is Container);
  }
  
  public function getAlternateName(feature:Feature):String {
  	if (feature is Folder) {
  		return "Unnamed Folder";
  	} else if (feature is Document) {
  		return "Unnamed Document";
  	} else if (feature is Placemark) {
  		var placemark:Placemark = com.adobe.xml.syndication.kml.Placemark::Placemark(feature);
  		if (placemark.geometry != null) {
  			if (placemark.geometry is Point) {
  				return "Unnamed Point";
  			}
  		}
  		return "Unnamed Placemark";
  	}
  	return "Unnamed Feature";
  }

      private function doGeocode(event:Event):void {
        var geocoder:ClientGeocoder = new ClientGeocoder("JP");
        geocoder.addEventListener(
        GeocodingEvent.GEOCODING_SUCCESS,
        function(event:GeocodingEvent):void {
        var placemarks:Array = event.response.placemarks;
        if (placemarks.length &gt; 0) {
          map.setCenter(placemarks[0].point, 15);
          var marker:Marker = new Marker(placemarks[0].point);
          marker.addEventListener(MapMouseEvent.CLICK, function (event:MapMouseEvent):void {
              marker.openInfoWindow(new InfoWindowOptions({content: placemarks[0].address}));
          });
          map.addOverlay(marker);
        }
      });
        geocoder.addEventListener(
          GeocodingEvent.GEOCODING_FAILURE,
          function(event:GeocodingEvent):void {
            Alert.show("Geocoding failed");
            trace(event);
            trace(event.status);
          });
        geocoder.geocode(address.text);
      }
    ]]&gt;
  &lt;/mx:Script&gt;
&lt;/mx:Application&gt;</pre>
</div>
<p>こういうのを「RIA」というのかどうかは知らない。今日のヒマツブシ、以上。</p>
<p>ところで昨日、「宮崎勤死刑囚、刑執行」のニュース。<br />
「裁判員制度」が始まると、裁判員に指名された一般人の中からは、「死刑にしちまえ！」という人も現れかねないのではないかと思った。<br />
ただでさえ「やっちまえ」「痛めつけてやれ」という攻撃性の強いご時世。<br />
倫理的・生物的な苦痛を伴うであろう絞首を実際に行い、死刑囚を絶命させるのは、名も知らぬ刑務官の仕事。<br />
執行を命令するのは法相の仕事。<br />
仮に裁判員に指名されたら、この彼我の差を慮るのは簡単でない気がする。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Wed, 18 Jun 2008 12:58:02 +0900</pubDate>
</item>
<item>
<title>東京メトロ副都心線の路線図</title>
<link>http://japonyol.net/editor/archives/2008/06/metro-fukutoshin.html</link>
<guid>http://japonyol.net/editor/archives/2008/06/metro-fukutoshin.html</guid>
<description><![CDATA[<p>6月14日（土曜日）開業予定の東京メトロ副都心線（F）。池袋～渋谷間の8.9kmが新規建設区間。路線図を Google Maps API for Flash で。</p>
<script type="text/javascript">
swfobject.embedSWF("http://japonyol.net/maps/Fukutoshin.swf", "flashcontent05", "640", "480", "9.0.0","http://japonyol.net/maps/expressInstall.swf");
</script>
<div id="flashcontent05">フラッシュ・コンテンツ:[http://japonyol.net/maps/Fukutoshin.swf]<br />朝の混雑時は1時間あたり17本（約3分35秒間隔）運行するそうです。<br />テキトーにヒマツブシのマップ。</div>
<p style="margin-top: 24px;">2012年度に、東急東横線と相互直通運転の開始予定となっており、現在、渋谷と代官山の間で地下化の工事が進んでいるのが車窓から見られます。<br />
すべての地下鉄・JR・私鉄の<a href="http://japonyol.net/editor/ajax.html" target="_blank">路線図はこちら</a>。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Thu, 12 Jun 2008 10:41:05 +0900</pubDate>
</item>
<item>
<title>ブラウザで Google Earth - Flex の布石</title>
<link>http://japonyol.net/editor/archives/2008/05/google-earth-browser.html</link>
<guid>http://japonyol.net/editor/archives/2008/05/google-earth-browser.html</guid>
<description><![CDATA[<p>当然の流れだけれども、ブラウザで Google Earth が使えるようになった（プラグインをインストール）。</p>
<p><a href="http://google-latlong.blogspot.com/2008/05/google-earth-meet-browser.html" target="_blank">Google LatLong: Google Earth, meet the browser</a></p>
<p><a href="http://japonyol.net/editor/GEarth.html" target="_blank"><img src="http://japonyol.net/editor/archives/images/earth.jpg" width="546" height="406" alt="earth" /></a></p>
<p>javascript に map.addMapType(G_SATELLITE_3D_MAP); と書き加えるだけ（※１）。</p>
<p>Google Maps API for Flash のリリースは、むしろこの布石だったと考えるべきなのかも（＝Flash API で Earth を動かす、というのがひとつの到達点になるはずだ）。・・・それにしても Maps for Flash（下）、やっぱり javascript 版に比べて作るのがややこしい。＝<a href="http://japonyol.net/maps/">いくつかの例</a></p>
<p style="margin-top:30px;">「Flash ならでは」あるいは「Flash でなければ」という機能は今のところないけれど、漸次進歩するものと想像しましょう（※２）。<br />
Maps API Blog も閉鎖するらしい（当初はディスカッション・グループもフラッシュのそれと統合するとしていたが、これは撤回された）。つまりジオグラフィック分野は、すべて縦割りをなくし水平に統合していくという方針なのだろう。</p>
<p>※追記１＝既存のマッシュアップならすべて Earth で見られる、というワケでもなかった。<br />
※追記２＝フラッシュ版なら・・・と思って1400ポイントを一挙に表示したら、ブラウザが飛んだ。</p>
]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Thu, 29 May 2008 06:59:05 +0900</pubDate>
</item>
<item>
<title>Google Maps の flash 版と javascript 版</title>
<link>http://japonyol.net/editor/archives/2008/05/google_maps_flash_javascript.html</link>
<guid>http://japonyol.net/editor/archives/2008/05/google_maps_flash_javascript.html</guid>
<description><![CDATA[<p>API。左、<a href="http://japonyol.net/editor/simplemap.html" target="_blank">javascript</a> 版。右、<a href="http://japonyol.net/maps/docs/com/google/maps/examples/ScrollZoom.as" target="_blank">flash</a> 版。いずれもマウスホイールでズーム。</p>
<table summary="mesa-mayo"><tr><td>
<iframe src="http://japonyol.net/editor/simplemap.html" title="Maps" frameborder="0" height="320" scrolling="no" width="340"></iframe>
</td><td>
<script type="text/javascript">
var flashvars = {};
var params = {flashvars:"key=ABQIAAAAAObg9xo1xsyXIuPEWNUfDxTvX0vz2OLAijajeRSW_Qz-jLLf6BSe06NAgaXeOd7a3yeWGxxtw1C-SA"};
var attributes = {};
swfobject.embedSWF("http://japonyol.net/maps/swf/ScrollZoom.swf", "flashcontent01", "340", "320", "9.0.0","http://japonyol.net/maps/expressInstall.swf", flashvars, params, attributes);
</script>
<div  style="width:340px; height:320px; border: 1px solid #666666; margin-left:2px;">
  <div id="flashcontent01">
    <p>Google Maps API for Flash サンプル<br />ActionScript と mxml をコンパイルして Adobe FLEX SDK で制作<br />swfobject.js を使うことで Valid に。<br />see http://code.google.com/p/swfobject/</p>
  </div>
</div>
</td></tr></table>
<br />
<p>比較検討。</p>
<ul>
<li>javascript 版はフキダシを弄りにくい、flash 版は弄りやすい。</li>
<li>javascript 版はマーカーの指定が面倒、flash 版は透過度も指定できる。</li>
<li>javascript 版は有効にされていないと見られない、flash 版はさらにPlayer を要求する。</li>
<li>このケースで javascript ファイルは1.8KB、flash 版 swf ファイルは 36KB の重さ。</li>
<li>どちらかといえば flash 版のほうがむずかしい（と思う）。</li>
</ul>
<p>この程度のマップならば、「javascript でなければならない」理由はない。<br />
この程度のマップならば、「flash でなければならない」理由もない。<br />
<a href="http://gmaps-samples-flash.googlecode.com/svn/trunk/demos/AFCPicasaMapFlip/AFCPicasaMapFlip.html" target="_blank">Google のデモ</a>のような、より高度な地図を用意しクールでお洒落なサイトを目指すならフラッシュ版、質実剛健を志向するなら javascript 版。・・・というところ？</p>
<p>Google は、Yahoo! や Vertical Earth への対抗だけでなく、javascript にない拡張性・発展性を flash に認識していると考えるのが自然だと思う。だから軸足を flash に移し傾斜していくだろうと想像するのも自然だと思う。</p>
<p><a href="http://japonyol.net/maps/" target="_blank">他の flash 版基本テストマップ</a>　|　<a href="http://japonyol.net/editor/googlemaps.html" target="_blank">javascript 版サンプル一覧</a></p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Tue, 20 May 2008 06:23:02 +0900</pubDate>
</item>
<item>
<title>Google Maps API for Flash 制作メモ</title>
<link>http://japonyol.net/editor/archives/2008/05/google-maps-api-flash.html</link>
<guid>http://japonyol.net/editor/archives/2008/05/google-maps-api-flash.html</guid>
<description><![CDATA[<p>Google Maps API が Flash からも使用できるようになりました。その基礎を覚え書き（※私の作業しやすい都合にしたもの）。</p>
<p><strong>（1）まず「FREE ADOBE FLEX 3 SDK」（Flex 3.0 SDK）をダウンロード</strong><br />
これは<a href="http://www.adobe.com/products/flex/overview/#section-3" target="_blank">Adobe</a> から。私の場合はローカル ディスク（C:\）直下に「flex」というフォルダを作り、この中に解凍。「ant」「asdoc」「bin」フォルダなどがあった。主役は、bin フォルダ中の「mxmlc」。</p>
<p><strong><span class="roja">Maps API for Flash テスト：</span></strong></p>
<script type="text/javascript">
swfobject.embedSWF("http://japonyol.net/maps/swf/Tokyo.swf", "flashcontent0516", "640", "500", "9.0.0","http://japonyol.net/maps/expressInstall.swf");
</script>
<div style="width: 640px; height: 480px;">
  <div id="flashcontent0516">FLEX 3 SDK: Google Maps API for FLASH</div>
</div>
<p><small>【<a href="http://japonyol.net/maps/" target="_blank">このほかのサンプル</a>】</small></p>
<p><strong>（2）ライブラリ sdk.zip をダウンロード</strong><br />
これは Google の基本ドキュメントの「<a href="http://code.google.com/apis/maps/documentation/flash/intro.html#SWC_File" target="_blank">Obtaining the Interface Library</a>」のところからダウンロード。<br />
私の場合は C:\ 直下に「SDK」というフォルダを作り、この中に解凍。「docs」と「lib」の２つのフォルダができます。</p>
<img src="http://japonyol.net/editor/archives/images/sdk.gif" width="192" height="239" alt="sdk" class="img_L" /><p><strong>（3）チュートリアルのパターンに倣う</strong><br />
・・・のが宜しいかと思うので、このライブラリのネームスペース構造を活かす例。<br />
ここでは、「lib」中の「map_flex_1_1.swc」をコピーし、「docs」直下に移しました。<br />
「docs」フォルダ内にはいろいろ入っていて、その中に「com」というフォルダがあり、さらにその中に「google」フォルダがあり、さらにその中に「maps」フォルダがあるので、その「maps」フォルダ中に新たに「examples」フォルダを作ってしまう（左図を参照）。</p>
<p><strong>（4）フラッシュ生成に必要な ActiveScript ファイル（***.as）と、mxml ファイル（***.mxml）</strong><br />
サンプルのコードは<a href="http://code.google.com/apis/maps/documentation/flash/intro.html" target="_blank">公式ドキュメント</a>にイロイロあります。基本的な機能は javascript 版と大差ありません。<br />
大切なのは、これら２種のファイルの置き場所（namespace を合致させないといけない）。<br />
.as ファイル（使う場合）は、上記（3）の「examples」フォルダに入れる。<br />
.mxml ファイルは、上記（3）の「docs」直下に入れる。</p>
<p><strong>（5）FLEX SDK でコンパイルして swf（フラッシュ）ファイルを作る</strong><br />
・・・コマンドプロンプトを起動して、以下のように入力（「.....flex_1_x.swc」までで、enter キーを叩く*）。</p>
<p><img src="http://japonyol.net/editor/archives/images/compile.gif" width="615" height="100" alt="compile" /></p>
<p>すると、下２行に表示されたように、「docs」直下に swf ファイルが出来ます。コレをサーバーにアップし、html にタグを書き込んで上記のように出来上がり。<br />
※グーグルの html 記述サンプルは Valid にならないので、<a href="http://code.google.com/p/swfobject/" target="_blank">swfobject.js</a> を使いました。</p>
<p>詳しいことは<a href="http://code.google.com/apis/maps/documentation/flash/intro.html" target="_blank">Google のドキュメント</a>に書いてありますが、分かりづらい（特に namespace の整合が難しい。私は英語も分からない）。が、ぜんぶ無償なのだから文句は言えません。<br />
漸次、いろいろ試みようと思う次第。＝＞いくつかの<a href="http://japonyol.net/maps/" target="_blank">実動サンプル</a></p>
<p>＊追記：　lib/map_flex_*_*.swc ファイルは逐次アップデートされていくので、<a href="http://groups.google.com/group/google-maps-api-for-flash/web/changelog-versions" target="_blank">Change Log</a> を確認して最新のものを使うことになります。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Fri, 16 May 2008 15:16:07 +0900</pubDate>
</item>
<item>
<title>ほぼ実物大まで</title>
<link>http://japonyol.net/editor/archives/2008/05/google-map-level.html</link>
<guid>http://japonyol.net/editor/archives/2008/05/google-map-level.html</guid>
<description><![CDATA[<p><a href="http://googlemapsapi.blogspot.com/2008/05/introducing-google-maps-api-for-flash.html" target="_blank">Google Maps API for Flash</a> がリリースされたので、<del>これはいずれ手を染める。</del>　まず<a href="http://japonyol.net/editor/archives/2008/05/google-maps-api-flash.html" target="_blank">基礎的なもの</a>を作ってみた。複数の <a href="http://japonyol.net/editor/archives/2008/05/google_maps_flash_javascript.html" target="_blank">Markers</a> とか。</p>
<p>さて、何の変哲もない次の Google Maps ですが、<img src="http://www.google.com/intl/en_ALL/mapfiles/zoom-plus-mini.png" width="18" height="18" alt="zoom in" title="zoom-in" style="vertical-align: middle;" /> のボタンをクリックし続けてみましょう。</p>
<iframe src="http://6pesos.googlecode.com/svn/trunk/scale.html" title="antarctica" frameborder="0" height="540" scrolling="no" width="690"></iframe>
<p>現状の Google Maps は、たとえば東京都心などズームレベル最大21まで衛星写真が出ます。<br />
しかし仕様としてはZ=30まで設計されていて、実現すれば眉間のシワまでよく分かってしまいます（矢沢さんゴメンナサイ。・・・たぶんこれが縮尺＝１分の１なのではないかと？）。<br />
ズームアップしつつ左下の縮尺（ScaleControl）を見てもらうと、しまいに画面をはみ出してしまいます。</p>
<p>Street View は、目線が人間のそれなので違和感がない。けれど、鳥の目線で俯瞰するのは、やはり覗き見しているような申し訳なさも感じますね。<br />
プライバシーや安全上の課題をクリアしたとして、Google はどこまで詳細な画像を用意していくのかな？</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Thu, 15 May 2008 12:45:06 +0900</pubDate>
</item>
<item>
<title>Radius: Draw Circle ＋ 富士山</title>
<link>http://japonyol.net/editor/archives/2008/05/radius_draw_circle.html</link>
<guid>http://japonyol.net/editor/archives/2008/05/radius_draw_circle.html</guid>
<description><![CDATA[<p>家族を連れ富士五湖周辺で遊んできた。鳴沢氷穴とか水族館とか。五合目はまだ残雪も多く気温７度だった。富士は「一度も登らぬ馬鹿、二度登る馬鹿」というらしいが、私の登山歴にない（＝馬鹿）。</p>

<p>さて Google Code に、任意の半径の円を描くテクがあった。<a href="http://japonyol.net/editor/distancia_2.html">もとより可能だった</a>けれど、今回はもっとシンプルに描ける。<br />
原文に var Clat = radius * 0.014483; などと書いてあった（アメリカなので単位が mile）。日本は km なので、0.008999 に置き換えた。内側の赤い線は中心点から半径10km、外側の青い線は半径20km。</p>

<iframe src="http://6pesos.googlecode.com/svn/trunk/circle.html" title="wizard" frameborder="0" height="410" width="690" scrolling="no"></iframe>

<p>使途は多彩ですね（※メルカトルなので高緯度地方で円を描けばイビツな卵形の円になる）。<br />
フキダシ内の写真はスバルライン終点、約2300m地点から。</p>

<p>帰路、御殿場と東名でしっかり渋滞にはまる。<small>忍野から横浜まで５時間かかってコドモ熟睡</small></p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Mon, 05 May 2008 20:45:01 +0900</pubDate>
</item>
<item>
<title>XML を使った Google Maps API の一括サンプル</title>
<link>http://japonyol.net/editor/archives/2008/05/xml_google_maps_api.html</link>
<guid>http://japonyol.net/editor/archives/2008/05/xml_google_maps_api.html</guid>
<description><![CDATA[<p>もっとも要望の多い、XML と HTML 組み合わせのテンプレートを ZIP で配布。</p>
<p><a href="http://6pesos.googlecode.com/svn/trunk/xml.html" target="_blank"><img src="http://japonyol.net/editor/archives/images/xml-example.gif" alt="XML-example" height="280" width="550" /></a></p>
<p>・このサンプルの<a href="http://6pesos.googlecode.com/svn/trunk/xml.html" target="_blank">実行例</a> および<a href="http://6pesos.googlecode.com/svn/trunk/temp-xmlmap.zip" target="_blank"><strong>一括ダウンロード</strong></a>。</p>
<p>・さらに LightBox で画像を表示するサンプルの<a href="http://6pesos.googlecode.com/svn/trunk/xml-lightbox.html" target="_blank">実行例</a> および<a href="http://6pesos.googlecode.com/svn/trunk/lightbox-map.zip" target="_blank"><strong>一括ダウンロード</strong></a>。</p>
<p>API Key だけ記入し、アップしたら動きます。あと書き換えはご随意に。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Sat, 03 May 2008 14:35:05 +0900</pubDate>
</item>
<item>
<title>Image Cutter の使い方</title>
<link>http://japonyol.net/editor/archives/2008/04/image_cutter.html</link>
<guid>http://japonyol.net/editor/archives/2008/04/image_cutter.html</guid>
<description><![CDATA[<p>「地図」という概念を無視して、例えばこんな遊びゴコロ。子供のレゴを借りた。</p>
<iframe src="http://6pesos.googlecode.com/svn/trunk/lego.html" title="副都心線" frameborder="0" height="360" scrolling="no" width="470"></iframe>
<p>Google Maps Image Cutter を以下からダウンロード。<br />
<a href="http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp" target="_blank">University College London: CASA</a></p>
<p>出来たフォルダの中にある、GMapImageCutter.jar を起動。</p>
<p><img src="http://japonyol.net/editor/archives/images/cutter1.gif" width="455" height="113" alt="cutter1" /></p>
<p>メニューの「File」から「Open File」で使用する画像を選ぶ。<br />
使用する画像ファイル名は、あらかじめ半角英数字に（ここでは「lego.jpg」とした）。<br />
メニューの「Processing」で「High Quality」ないし「Low」を選択可能。<br />
Max Zoom Level は、５の場合でタイル数＝341 枚だが、Z=10 では約35万枚などと重くなる。</p>
<p><img src="http://japonyol.net/editor/archives/images/cutter2.jpg" width="413" height="310" alt="cutter2" /></p>
<p>「Create」をクリックしたら、指定どおり画像をカットして「lego-tiles」というフォルダと、「lego.html」というHTMLファイルを生成してくれる。</p>
<p><img src="http://japonyol.net/editor/archives/images/cutter3.gif" width="78" height="137" alt="cutter3" /></p>
<p>「lego.html」を開けば、カスタムマップが出来上がっている。<br />
必要に応じてマーカーとか追加。以下の例では、ポインタ先端の位置は緯度（lat）が -60.347...、経度（lng）が -39.807...と表示されている。</p>
<p><img src="http://japonyol.net/editor/archives/images/cutter4.jpg" width="323" height="227" alt="cutter4" /></p>
<p>HTML に、例えば</p>
<pre>function createMarker(point,html) {
  var marker = new GMarker(point);
  GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
  return marker;
}
var point = new GLatLng(47.422, 142.285);
var marker = createMarker(point, "池袋");
map.addOverlay(marker);</pre>
<p>こんなふうに書き加え出来上がり。ポートレートでも風景写真でも、何でも使いよう。<a href="http://japonyol.net/editor/dynamic.html">別の使用例</a>。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Sun, 20 Apr 2008 16:17:02 +0900</pubDate>
</item>
<item>
<title>expand, collapse</title>
<link>http://japonyol.net/editor/archives/2008/04/expand_collapse.html</link>
<guid>http://japonyol.net/editor/archives/2008/04/expand_collapse.html</guid>
<description><![CDATA[<p>ゆうべニュースで福田首相と小沢民主党代表による党首討論を少し見て、気分が悪くなった。<br />
総理はボヤキと嘆きと恨み辛みばかりで、実にみっともない。小沢一郎代表はあいかわらず権力の座に就きたい魂胆丸見えマキャベリスト。<br />
自民はどうにも仕様がない族集団、民主はさらに性質の悪い餓鬼集団、しばらくニュースは見るまい。</p>
<p>さて。プラスとマイナス、<img src="http://japonyol.net/editor/expand.gif" width="11" height="11" style="vertical-align: middle;" alt="plus" /> とか <img src="http://japonyol.net/editor/collapse.gif" style="vertical-align: middle;" width="11" height="11" alt="minus" /> で開閉するスクリプトのメモ（何を今さら）。</p>
<iframe src="http://japonyol.net/chile/test.html" title="テスト" frameborder="0" height="330" scrolling="no" width="600"></iframe>
<p><a href="javascript:doMenu('ce0410');" id="sp-ce0410"><img src="http://japonyol.net/editor/img/collapse.gif" name="expand" width="11" height="11" alt="" /></a><small>&nbsp;このスクリプト（タグ）</small></p>
<div id="ce0410" style="display: none;">
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;expand, collapse&lt;/title&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
&lt;script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=キー"&gt;&lt;/script&gt;
&lt;style type="text/css"&gt;
body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 13px;
}
img {
	border: 0;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body onunload="GUnload()"&gt;
&lt;form action="#"&gt;&lt;p&gt;
A: 日本の関係機関など&lt;input type="checkbox" id="Abox" name="Abox" onclick="boxclick(this,'A')" onkeypress="boxclick(this,'A')" /&gt; 
B: 観光スポットなど&lt;input type="checkbox" id="Bbox" name="Bbox" onclick="boxclick(this,'B')" onkeypress="boxclick(this,'B')" /&gt;
&nbsp;index: &lt;a href="javascript:doMenu('side_bar');" id="sp-side_bar"&gt;&lt;img src="http://japonyol.net/editor/img/collapse.gif" name="collapse" width="11" height="11" alt="" /&gt;&lt;/a&gt;
&lt;/p&gt;&lt;/form&gt;
&lt;table summary="mesa"&gt;
  &lt;tr&gt;
    &lt;td valign="top"&gt;&lt;div id="map" style="width: 400px; height: 280px; border: 1px solid gray; margin-right: 6px;"&gt;Loading...&lt;/div&gt;&lt;/td&gt;
    &lt;td valign="top"&gt;
    &lt;div id="side_bar" style="display: none; overflow:auto; width:156px; height:280px; line-height: 2;"&gt;Loading...&lt;/div&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
function doMenu(item) {
 obj=document.getElementById(item);
 col=document.getElementById("sp-" + item);
 if (obj.style.display=="none") {
   obj.style.display="block"; col.innerHTML="&lt;img src='http://japonyol.net/editor/expand.gif' name='expand' width='11' height='11' alt='' /&gt;"; } else {
   obj.style.display="none"; col.innerHTML="&lt;img src='http://japonyol.net/editor/collapse.gif' name='collapse' width='11' height='11' alt='' /&gt;"; }
// 前の画像はローカルに保存されたし
}
//]]&gt;
&lt;/script&gt;
&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
    if (GBrowserIsCompatible()) {
      var gmarkers = [];
      var gicons = [];
      gicons["A"] = new GIcon(G_DEFAULT_ICON,"http://www.google.com/mapfiles/markerA.png");
      gicons["B"] = new GIcon(G_DEFAULT_ICON,"http://www.google.com/mapfiles/markerB.png");
      function createMarker(point,name,html,category) {
        var marker = new GMarker(point,gicons[category]);
        marker.mycategory = category;                                 
        marker.myname = name;
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        gmarkers.push(marker);
        return marker;
      }
      function show(category) {
        for (var i=0; i&lt;gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].show();
          }
        }
        document.getElementById(category+"box").checked = true;
      }
      function hide(category) {
        for (var i=0; i&lt;gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].hide();
          }
        }
        document.getElementById(category+"box").checked = false;
        map.closeInfoWindow();
      }
      function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }
        makeSidebar();
      }
      function myclick(i) {
        GEvent.trigger(gmarkers[i],"click");
      }
      function makeSidebar() {
        var html = "";
        for (var i=0; i&lt;gmarkers.length; i++) {
          if (!gmarkers[i].isHidden()) {
            html += '&lt;a href="javascript:myclick(' + i + ')"&gt;' + gmarkers[i].myname + '&lt;\/a&gt;&lt;br&gt;';
          }
        }
        document.getElementById("side_bar").innerHTML = html;
      }
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl(true));
      map.setCenter(new GLatLng(-33.425317, -70.625), 12);
      map.enableScrollWheelZoom();
      GDownloadUrl("http://japonyol.net/chile/test.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i &lt; markers.length; i++) {
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new GLatLng(lat,lng);
          var description = markers[i].getAttribute("description");
          var name = markers[i].getAttribute("name");
          var html = "&lt;strong&gt;"+name+"&lt;\/strong&gt;&lt;br&gt;"+description+"";
          var category = markers[i].getAttribute("category");
          var marker = createMarker(point,name,html,category);
          map.addOverlay(marker);
        }
        show("A");
        hide("B");
        makeSidebar();
      });
    }
//]]&gt;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</div>
<p>※Google Maps API は v2.107 までリリースされているけれど、最近 Internet Explorer でおかしい。Default (v=2)なら大丈夫だけれど、Current (v=2.x) や Stable (v=2.s) でマップが表示できないことがある。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Thu, 10 Apr 2008 12:51:10 +0900</pubDate>
</item>
<item>
<title>横浜市営地下鉄グリーンライン</title>
<link>http://japonyol.net/editor/archives/2008/03/yokohama-green-line.html</link>
<guid>http://japonyol.net/editor/archives/2008/03/yokohama-green-line.html</guid>
<description><![CDATA[<p>けさ大井町線の急行に乗ったら、出来たてほやほやの車両でクサかった。<br />
さて、横浜市営地下鉄のグリーンラインがあさって開業。私にとって、東急がストップしたときの迂回路。</p>
<iframe src="http://japonyol.net/editor/green-line.html" title="GreenLine" frameborder="0" height="520" scrolling="no" width="100%"></iframe>
<br />
<p><a href="http://map.yahoo.co.jp/pl?lat=35.529320404761925&amp;lon=139.55902535101674&amp;sc=3&amp;mode=map&amp;type=scroll" target="_blank">Yahoo! 地図</a>は、あざみ野と湘南台を結ぶ既存線を「ブルーライン」と表記、グリーンラインも既に点線が引かれたうえ丁寧に「（3月30日開業）」と記してある。<br />
ところが Google Maps は、既存線を「地下鉄１（３）号線」などと表記し、新規線は未だ影も形もない。「現状と図面が異なる場合には現状を優先します」というあんばい。<br />
ゼンリン社とアルプス社の違いなのか、ヤフーとグーグルの違いなのかわからんが、アップデートの敏速さで Yahoo! に軍配。</p>
<p>乗換検索も、今日の時点では両者とも出来ない。30日にすぐ反映されるとしたら、やっぱり Yahoo! だろうと思う。Google が日本で弱いのは、ドキュメント類の翻訳がないなどローカライズ作業の遅延・怠慢と、ユーザに対する不親切にあると思う。</p>
<p>ついでに、Street View がAPI に加わったけれど、日本ではもちろん使えない。この先も期待薄。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Fri, 28 Mar 2008 13:02:59 +0900</pubDate>
</item>
<item>
<title>Marker: new GIcon 復習</title>
<link>http://japonyol.net/editor/archives/2008/03/marker_new_gicon.html</link>
<guid>http://japonyol.net/editor/archives/2008/03/marker_new_gicon.html</guid>
<description><![CDATA[<p>オリジナルのアイコンで Google マップに個性を。そのおさらい。</p>
<p>たとえば Illustrator で線を引き、フィルタで手形の矢印を作って PSD に書き出して、</p>
<img src="http://japonyol.net/editor/archives/images/mano1.gif" width="273" height="206" alt="mano1" />  <img src="http://japonyol.net/editor/archives/images/mano2.gif" width="281" height="233" alt="mano2" />
<p>さらに Photoshop で寸法を整えたり加工したりして、GIF や JPG でなく PNG24 に書き出すと。</p>
<p>この例のアイコン画像の場合、サイズは幅36ピクセル、高さ80ピクセルなので、</p>
<pre>iconSize = new GSize(36, 80);</pre>
<p>という指定（「でかすぎ。」という声が聞こえるが、わざと巨大にした）。</p>
<img src="http://japonyol.net/editor/archives/images/mano5.gif" width="200" height="218" alt="mano5" />  <img src="http://japonyol.net/editor/archives/images/mano4.jpg" width="250" height="169" alt="mano4" />
<p>ポイントの位置（画像では警視庁屋上ヘリポートの「Ｈ」中心）が iconAnchor。<br />
このアイコン画像の場合、人差し指の先端が左下なので、</p>
<pre>iconAnchor = new GPoint(4, 80);</pre>
<p>左上カドから右へ４ピクセル、下へ80ピクセルの位置・・・としてみる。<br />
そしてフキダシ（infoWindow）の指す尖った先端の位置が infoWindowAnchor。<br />
たとえば手首の右端に指示してみる。</p>
<pre>infoWindowAnchor = new GPoint(32, 1);</pre>
<p>左上カドから右へ32ピクセル、下へ１ピクセルの位置、というふうな設定。</p>
<p>つまりアイコンの形や用途次第で、右や左、上や下に、好き勝手に工夫できるというあんばい。<br />
実行例： 各アイコンのアンカー設定は、てんでばらばら。</p>
<iframe src="http://japonyol.net/editor/marker.html" title="latlng" frameborder="0" height="320" scrolling="no" width="620"></iframe>
<p>（<small><a href="http://japonyol.net/editor/marker.html" target="_blank">新しいウィンドウで開く</a></small>）</p>
<p>アイコンにもシャドウがないとイヤ！　なら、icon.shadowSize = new GSize(**, **); とか書くように。と<a href="http://code.google.com/apis/maps/documentation/reference.html#GIcon" target="_blank">グーグルのリファレンス</a>は言ってます。<br />
参考：テイクアウト用</p>
<p><img src="http://japonyol.net/editor/archives/images/36-80.png" width="36" height="80" alt="mano" />&nbsp;&nbsp;<img src="http://japonyol.net/editor/archives/images/24-44.png" width="24" height="44" alt="arrow" />&nbsp;&nbsp;<img src="http://japonyol.net/editor/archives/images/cup-a.png" width="40" height="24" alt="a-cup" />&nbsp;&nbsp;<img src="http://japonyol.net/editor/archives/images/cup-b.png" width="40" height="24" alt="b-cup" />&nbsp;&nbsp;<img src="http://japonyol.net/editor/archives/images/cup-c.png" width="40" height="24" alt="c-cup" />&nbsp;&nbsp;<img src="http://japonyol.net/editor/archives/images/infobox.png" width="75" height="33" alt="rightbox" />&nbsp;&nbsp;<img src="http://japonyol.net/editor/archives/images/fukidashi-size.png" width="75" height="32" alt="box" />&nbsp;&nbsp;<a href="http://japonyol.net/editor/iconos.html">こちら</a>にも少し。<br />
「この記事が役に立ったという方は、 クリックを」・・・役に立ちませんね</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Wed, 12 Mar 2008 21:03:02 +0900</pubDate>
</item>
<item>
<title>Re: MySQL + PHP + Google Maps API 復習</title>
<link>http://japonyol.net/editor/archives/2008/03/re_mysql_php_google_maps_api.html</link>
<guid>http://japonyol.net/editor/archives/2008/03/re_mysql_php_google_maps_api.html</guid>
<description><![CDATA[<p>MySQL データベースに php でアクセスして Google マップを作る方法を書き直し再録します。ただし、以下の例はレンタルサーバーがロリポップのケースです。お使いの環境によって多少変わるかもしれないことをご了承下さい。</p>
<p>今回は、例として次のような地図を作ります。</p>
<iframe src="http://japonyol.net/editor/mlb-sql.html" title="latlng" frameborder="0" height="465" scrolling="no" width="694"></iframe>
<p>（<small><a href="http://japonyol.net/editor/mlb-sql.html" target="_blank">新しいウィンドウで開く</a></small>）</p>
<p>・まず、phpMyAdmin で MySQL にアクセス。</p>
<p><img src="http://japonyol.net/editor/archives/images/myadmin.jpg" height="270" width="430" alt="mysql" /></p>
<p>・ひとつテーブルを設けます。</p>
<p><img src="http://japonyol.net/editor/archives/images/sql.jpg" height="278" width="542" alt="sql" /></p>
<p>・このフィールドに、以下を記述。例として、テーブル名を「MLB」とします。</p>
<pre>CREATE TABLE MLB (
  id int(11) NOT NULL auto_increment,
  stadium varchar(255) NOT NULL default '',
  lat decimal(10,6) NOT NULL default '0.000000',
  lng decimal(10,6) NOT NULL default '0.000000',
  category varchar(255) NOT NULL default '',
  name varchar(255) NOT NULL default '',
  PRIMARY KEY  (id)
) TYPE=MyISAM;</pre>
<p>・これは、「MLB」テーブルに６つのフィールド（すなわち "id", "stadium", "lat", "lng", "category", "name"）を設けるという意味です。用途によって、例えば「telephone」「address」などといったフィールドを加えればいいわけです。</p>
<p>そして、「追加」タブから入力していきます。「id」フィールドは自動的にナンバーが付与されますから空白で構いません。</p>
<p><img src="http://japonyol.net/editor/archives/images/sql-table.gif" height="262" width="564" alt="mesa" /></p>
<p>別の方法として、<a href="http://japonyol.net/editor/map/mlb.xml" target="_blank">既存のデータ</a>からインポートも可能です。既存データをコピー＆ペーストし、エディタで置換え（各項目をセミコロン『；』で区切っています）、次のようなテキストファイルを作っておきます（フィールド順に）。</p>
<pre>1;Oriole Park at Camden Yards;39.284091;-76.621528;ALE;ボルティモア・オリオールズ
2;Skydome;43.641534;-79.389138;ALE;トロント・ブルージェイズ
3;Tropicana Field;27.768336;-82.653387;ALE;タンパベイ・デビルレイズ
4;Fenway Park;42.346675;-71.097089;ALE;ボストン・レッドソックス
5;Yankee Stadium;40.827011;-73.927485;ALE;ニューヨーク・ヤンキース
......</pre>
<p><img src="http://japonyol.net/editor/archives/images/add-data.gif" height="40" width="248" alt="add" /></p>
<p>例としてデスクトップに「import.txt」ファイルを作りました。これを実行します。</p>
<p><img src="http://japonyol.net/editor/archives/images/sql-import.gif" height="459" width="509" alt="import" /></p>
<p>そうして「表示」タブをクリックすると、次のように出来上がっています。</p>
<p><img src="http://japonyol.net/editor/archives/images/sql-table-fin.gif" height="532" width="652" alt="mesa2" /></p>

<p><strong>次にPHPファイルを２種作ります</strong></p>
<p>各ファイルの保存エンコード形式はUTF-8で。まず、MySQL データベースの情報を収納するPHPファイル（例：sql-info.php）。</p>
<pre>&lt;?php
$hostname="mysql**.lolipop.jp";
$username="LA********";
$password="******";
$database="LA********";
?&gt;</pre>
<p>そして、XML を生成するPHPファイル（例：MLB.php）。</p>
<pre>&lt;?php
require("sql-info.php"); //  データベース情報ファイルを要する
// 以下、XML 生成
$doc = domxml_new_doc("1.0");
$node = $doc-&gt;create_element("MLB"); // テーブル名「MLB」
$parnode = $doc-&gt;append_child($node);
// 以下、MySQL へのコネクション・セット
$connection=mysql_connect ($hostname, $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}
// 以下、「MLB」テーブルからフィールド選択
$query = "SELECT * FROM MLB WHERE 1"; // 場合により応用
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");
// 以下、XML へフィールドの値を渡す
while ($row = @mysql_fetch_assoc($result)){
  $node = $doc-&gt;create_element("marker");
  $newnode = $parnode-&gt;append_child($node);
  $newnode-&gt;set_attribute("stadium", $row['stadium']);
  $newnode-&gt;set_attribute("lat", $row['lat']);
  $newnode-&gt;set_attribute("lng", $row['lng']);
  $newnode-&gt;set_attribute("category", $row['category']);
  $newnode-&gt;set_attribute("name", $row['name']);
}
$xmlfile = $doc-&gt;dump_mem();
echo $xmlfile;
?&gt;</pre>
<p>これにブラウザからアクセスしてみます＝<a href="http://japonyol.net/editor/MLB.php" target="_blank">MLB.php で XML が生成されました</a>。</p>
<p>応用例：　$query = "SELECT....の行を、例えば</p>
<pre>$query = "SELECT * FROM MLB WHERE 1 ORDER BY stadium LIMIT 0 , 20";</pre>
<p>と書けば、stadium のABC順に並べて最大20件まで表示します。</p>
<p><strong>最後に、PHP が生成した XML を読み込む HTML を書きます</strong></p>
<p><a href="http://japonyol.net/editor/mlb-sql.html" target="_blank">サンプルのマップ</a>を新しいウィンドウで開き、ブラウザの「メニュー」から「表示」→「ソース」で見てください。コピー＆ペーストするのが楽でしょう。これも保存エンコード形式はUTF-8で。<br />
category ごとにチェックボックスで呼び出します。キモはこの1行</p>
<pre>GDownloadUrl("./MLB.php", function(doc) {</pre>
<p>category の分類は、「ALE」（＝アメリカンリーグ東部地区）、「NLW」（＝ナショナルリーグ西部地区）などとしています。</p>
<p>30件程度のポイント数なら単に XML ファイルを作れば充分、MySQL を使う必要性はありませんから、あくまでサンプルということです。</p>
<p>SQL + PHP の他の応用例１：<a href="http://japonyol.net/gm/guestmap.php" target="_blank">投稿可能な（閲覧者がポイントを加える）マップ</a><br />
SQL + PHP の他の応用例２：<a href="http://japonyol.net/editor/archives/2008/02/google-maps-php-mysql-query.html" target="_blank">検索機能</a><br />
SQL + PHP の他の応用例３：<a href="http://japonyol.net/editor/company_j.html" target="_blank">特定のフィールドから項目選択</a></p>
<p>・以上は、<a href="http://code.google.com/support/bin/answer.py?answer=65622&amp;topic=11364" target="_blank">Google Code FAQ の方法その１</a>および<a href="http://code.google.com/support/bin/answer.py?answer=87134&amp;topic=11364" target="_blank">Google Code FAQ の方法その２</a>を少し書き換えただけです。これらを読んで自助努力・自己完結してください。<br />
用途により<a href="http://japonyol.net/editor/googlemaps.html" target="_blank">こちら</a>も参考に努力してください。</p>
<p>私はエンジニアでもプログラマでもないシロウトですから、本来ならこういうマニュアルを書くべきでありません。<br />
しかし質問が多いので、書きました。専門家の方から見れば瑕疵がある可能性は否定できません。<br />
それでも質問される文系の方は、作成されているページのリンクなどをなるべく添えてください（でなきゃ答えようがありません）。<br />
シロウトとして分かる範囲でお答えします。分からないものは分かりません。<br />
間違ってもエンジニアやプログラマの人は質問しないでください。困ります。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Sat, 08 Mar 2008 13:32:02 +0900</pubDate>
</item>
<item>
<title>getPoint(): 復習</title>
<link>http://japonyol.net/editor/archives/2008/03/getpoint.html</link>
<guid>http://japonyol.net/editor/archives/2008/03/getpoint.html</guid>
<description><![CDATA[<p>地図を作るとき、何よりもまず緯度・経度を求めないと始まらない。<br />
ドラッグ＆ドロップできるアイコン（Draggable Marker）で getPoint() メソッドを利用すると、実に便利。</p>
<iframe src="http://japonyol.net/editor/latlng.html" title="latlng" frameborder="0" height="320" scrolling="no" width="670"></iframe>
<p><small>（<a href="javascript:;" onmousedown="if(document.getElementById('my080307a').style.display == 'none'){ document.getElementById('my080307a').style.display = 'block'; } else { document.getElementById('my080307a').style.display = 'none'; }">緯度経度取得スクリプト・ソース</a>）</small></p>
<div id="my080307a" style="display: none;">
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;Lat, Lng&lt;/title&gt;
&lt;script src="http://maps.google.com/maps?file=api&amp;v=2.s&amp;key=「キー」"
 type="text/javascript"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body onunload="GUnload()"&gt;
&lt;form action="#"&gt;&lt;p&gt;&lt;input type="text" id="location" value="" /&gt;&lt;/p&gt;&lt;/form&gt;
&lt;div id="map" style="width: 500px; height: 400px;"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
if (GBrowserIsCompatible()) {
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(35.69,139.70), 9);
  map.addControl(new GMapTypeControl(true));
  map.addControl(new GSmallMapControl());
  var point = new GLatLng(35.69,139.70);
  var marker = new GMarker(point, {icon:G_DEFAULT_ICON, draggable: true, bounceGravity:1});
  map.addOverlay(marker);
  marker.enableDragging();
  GEvent.addListener(marker, "drag", function(){
    document.getElementById("location").value=marker.getPoint().toUrlValue();
  });
  GEvent.addListener(marker, "click", function(){
    marker.openInfoWindowHtml("ドラッグ＆ドロップ");
  });
}
//]]&gt;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</div>
<p>たんに緯度・経度を取得するだけでなく、Google の乗換検索（トランジット）に渡したり</p>
<iframe src="http://japonyol.net/editor/transit.html" title="transit" frameborder="0" height="274" scrolling="no" width="670"></iframe>
<p><small>（<a href="javascript:;" onmousedown="if(document.getElementById('my080307').style.display == 'none'){ document.getElementById('my080307').style.display = 'block'; } else { document.getElementById('my080307').style.display = 'none'; }">乗換スクリプト・ソース</a>）</small></p>
<div id="my080307" style="display: none;">
<pre>&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
if (GBrowserIsCompatible()) {
    var to_htmls;
    var from_htmls;
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl(true));
    map.setCenter(new GLatLng(35.706343,139.751801), 15);
    var point = new GLatLng(35.706343,139.751801);
    var marker = new GMarker(point, {draggable: true});
    map.addOverlay(marker);
    marker.enableDragging();
    GEvent.addListener(marker, "click", function(){
      point = marker.getPoint();
      var html = 'ドラッグ＆ドロップで乗換検索&lt;br&gt;&lt;a href="javascript:tohere()"&gt;ここへ&lt;\/a&gt; - &lt;a href="javascript:fromhere()"&gt;ここから&lt;\/a&gt;';
      to_htmls = '&lt;b&gt;ここへ&lt;\/b&gt; - &lt;a href="javascript:fromhere()"&gt;ここから&lt;\/a&gt;' +
         '&lt;br&gt;出発地点:&lt;form action="http://maps.google.co.jp/maps" method="get" target="_blank"&gt;' +
         '&lt;input type="text" size=20 maxlength=40 name="saddr" id="saddr" value="" /&gt;' +
         '&lt;input value="検索" type="submit"&gt;' +
         '&lt;input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + 
         '"/&gt;';
      from_htmls = '&lt;a href="javascript:tohere()"&gt;ここへ&lt;\/a&gt; - &lt;b&gt;ここから&lt;\/b&gt;' +
         '&lt;br&gt;到着地点:&lt;form action="http://maps.google.co.jp/maps" method="get" target="_blank"&gt;' +
         '&lt;input type="text" size=20 maxlength=40 name="daddr" id="daddr" value="" /&gt;' +
         '&lt;input value="検索" type="submit"&gt;' +
         '&lt;input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
         '"/&gt;';
      marker.openInfoWindowHtml(html);
    });
    function tohere() {
      marker.openInfoWindowHtml(to_htmls);
    }
    function fromhere() {
      marker.openInfoWindowHtml(from_htmls);
    }
}
//]]&gt;
&lt;/script&gt;</pre>
</div>
<p>さらに、こんな使い方も</p>
<iframe src="http://japonyol.net/editor/message.html" title="message" frameborder="0" height="400" scrolling="no" width="670"></iframe>
<p><small>（メッセージ地図を<a href="http://japonyol.net/editor/message.html" target="_blank">新しいウィンドウで開く</a>）</small></p>
<p>ところで Analytics は Google の他のサービスとデータ共有を設定できるようになった。広告等の効率的な運用に資するという目算なのか？<br />
この japonyol.net のページビューは１日あたり約7000～8000程度（多くはカミサンのブログ）。このサンプル数からベネフィットのための最適化などを期待できるものなのか、たんにベンチマークなのか。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Thu, 06 Mar 2008 13:38:01 +0900</pubDate>
</item>
<item>
<title>手作りマッシュアップなど</title>
<link>http://japonyol.net/editor/archives/2008/03/map-list.html</link>
<guid>http://japonyol.net/editor/archives/2008/03/map-list.html</guid>
<description><![CDATA[<p>国内の地図サイトの利用者数トップは「Yahoo!地図情報」で、2位の「Google マップ」に倍近くの差があるとのこと。私は両方ともあまり使う機会がないが、さほど違いがないように思う。ポータルとしての集客力の現状がそのまま差として出ているのだな。<br />
しかし、オリジナルの地図作成なら Google の API が優位だと思う。ユーザーには不親切だが。</p>

<p>これまで Google Maps API のサンプル、パーツなどを（イロイロなところも参考にしつつ）作った。<br />
＝（ついでに<a href="http://japonyol.net/wizard.html" target="_blank">超カンタンな作成ウィザード</a>日本語版）<br />
それらをさらに叩き台・踏み台としてイロイロなサイトで利用・応用していただいているので、以下に相互リンクということで列記。まず、ソースの引用・活用を明示されたり連絡をいただいた主なサイト</p>
<ul>
<li><a href="http://med.iwaki.or.jp/~iwaki/" target="_blank">いわき市医療機関検索システム</a></li>
<li><a href="http://www.japanesebooks.jp/" target="_blank">Explore Japan with YouTube videos on Google Maps!</a></li>
<li><a href="http://mf10.jp/futsal/contents/court_map.htm" target="_blank">全国フットサルコートマップ検索</a>（フットサル情報倶楽部）</li>
<li><a href="http://www.ra-menkoike.com/ra-menmap/ra-menmap.htm" target="_blank">池袋ラーメンマップ</a></li>
<li><a href="http://www.brics-jp.com/russian/map.html" target="_blank">モスクワ（ロシア）の観光案内地図</a></li>
<li><a href="http://richard111.blog.ocn.ne.jp/richard/map.html" target="_blank">ばら戦争関係地図</a></li>
<li><a href="http://www7b.biglobe.ne.jp/~map/g_map/071214.html" target="_blank">氷川神社・香取神社分布地図</a></li>
<li><a href="http://kossyan.jp/maps/cake.html" target="_blank">Shiga Sweets Map</a></li>
<li><a href="http://www.sawa-sawa.jp/index-630.html" target="_blank">ウォーキング・マップ</a>（馬場内科）</li>
<li><a href="http://www.ikugo.com/worldHeritage.php" target="_blank">世界遺産紹介</a></li>
<li><a href="http://nara.cool.ne.jp/fukucyan/MyHomePage/google_map_api/aaa_onsen_map.html" target="_blank">日帰り温泉マップ</a></li>
</ul>
<p>教育・大学関係では以下に引用されたほか、いくつかの大学の学生さんにデータ等提供</p>
<ul>
<li><a href="http://www.media.osaka-cu.ac.jp/~nakano/InfoKiso07/GIS2007.pdf" target="_blank">大阪市立大学中野研究室</a></li>
<li><a href="http://www.juce.jp/archives/taikai_2006/f_15.pdf" target="_blank">Ajax による GIS 導入教育 Web アプリケーションについて</a>（社団法人 私立大学情報教育協会）</li>
</ul>
<p>以下は、ソースを活用いただいたことが暗示的に判るサイト（抄録）</p>
<ul>
<li><a href="http://www.sendaibank.co.jp/atm/" target="_blank">仙台銀行</a>（店舗・ATMのご案内）</li>
<li><a href="http://www.pref.yamanashi.jp/fc/rokemap05.html" target="_blank">山梨県</a>（富士の国やまなしフィルム・コミッション）</li>
<li><a href="http://www.geocities.jp/masakiyc50/gmap_hm.html" target="_blank">ホノルルマラソンコースマップ</a></li>
<li><a href="http://www4.tokai.or.jp/TFSURF/map/m.html" target="_blank">TF SURF SHOP</a>静岡SURF POINT MAP</li>
<li><a href="http://www.st-vincent.jp/contact/" target="_blank">レストラン　サン.ヴァンサン</a>（那覇市）</li>
<li><a href="http://www.miura-aoiro.com/map.html" target="_blank">横須賀青色申告会三浦会</a></li>
<li><a href="http://www.masumura.co.jp/aba_kanko/abamap.html" target="_blank">網走観光情報マップ</a>（ベータ）</li>
<li><a href="http://cgi.konan-lakebiwa.or.jp/map/index.html" target="_blank">湖南広域行政組合 消防地図</a></li>
<li><a href="http://www.touseikyou.com/" target="_blank">東都聖典協同組合</a></li>
<li><a href="http://temmabashinavi.tank.jp/" target="_blank">天満橋NAVI</a></li>
<li><a href="http://www.mikumano.net/maps/" target="_blank">熊野の観光名所</a></li>
<li><a href="http://www.shikinokura.com/activity_map/" target="_blank">ホテル四季の蔵 周辺マップ</a></li>
<li><a href="http://www.uwamachi-ginza.com/uwamachimap.html" target="_blank">上町銀座通り商店会</a></li>
<li><a href="http://www.ryukyujin.net/googlemap.php?sch_code=0&amp;sch_type=2" target="_blank">琉求人</a></li>
<li><a href="http://shizupan.aslia.net/map.php" target="_blank">しずパンナビ 静岡市のパン屋さん情報検索サイト</a></li>
<li><a href="http://www.teu.ac.jp/i-lab/users/tate/testg6.html" target="_blank">東京工科大学・画像作成用地図</a></li>
</ul>
<p>google-analytics のコード（urchinTracker）は削除していいんですよ。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Tue, 04 Mar 2008 20:57:02 +0900</pubDate>
</item>
<item>
<title>Google Code: Subversion への移行</title>
<link>http://japonyol.net/editor/archives/2008/02/google-code-subversion.html</link>
<guid>http://japonyol.net/editor/archives/2008/02/google-code-subversion.html</guid>
<description><![CDATA[<p>先般つくった <a href="http://japonyol.net/editor/archives/2008/02/google-maps-php-mysql-query.html" target="_blank">MySQL + PHP + Google Map</a> は

<pre>$query  = "SELECT * FROM kintama WHERE ketsu.......";</pre>

<p>この部分を書き換えたらいろいろ応用（流用）できるなぁ、と思い</p>

<iframe src="http://japonyol.net/editor/company.html" title="company" frameborder="0" height="480" scrolling="no" width="696"></iframe>

<p><small>（<a href="http://japonyol.net/editor/company.html" target="_blank">別ウィンドウで開く</a>）　※重ねて書くが私は「鉄ちゃん」ではありません。</small></p>

<p>さて本題。木曜日に、ロリポップから１日分のアクセスログをダウンロードしてみたら、そのログファイルは128MBもあった（記録が38万行に及んで矢鱈と重い）。主な原因はコレ</p>

<p><a href="http://www.google.com/ig/directory?hl=en&amp;synd=open&amp;num=24&amp;url=http://japonyol.net/tokyo.xml&amp;output=html" target="_blank">Google に差し出しているガジェット</a></p>

<p>ガジェット自体は単純・軽量な XML ファイルだが、Google Map の HTML を引っ張る構造にしている。この HTML が46枚ものデータ XML と AJAX 通信する上、Prototype や Script.aculo.us、PdMarker といったライブラリを使うものだから、負荷がかかって当然といえば当然。</p>

<p>通信量とサーバーのレスポンスの因果関係について私は無知だが、まったく影響がないとは考え難い。Google にメリットを提供しても私にはメリットがなく、逆に負荷を強いられるのは如何なものか？<br />
ガジェット利用者の増加傾向は以前から分かっていて、いちど Google Page Creator にこれらファイル群を移動させたことがあったが、あっけなく帯域制限を超過してしまいガジェットが表示されなくなった。<br />
使ってくれる人々がいる以上、いまさら「ガジェット邪魔だ捨てちまえ」というわけにもいかない。うっかりガジェットを作ってしまったばかりに。<br />
そこで金曜日、</p>

<p><a href="http://code.google.com/intl/ja/apis/gadgets/docs/tools.html#Host" target="_blank">Google ガジェット - API 開発者向けガイド: Google ソースコードのホスティング</a></p>

<p>Subversion クライアントでレポジトリに Checkout したり Commit したり、最後に苦悶</p>

<p><a href="http://code.google.com/p/flexlib/wiki/HowToBuild" target="_blank">Enabling Subversion Auto-Props</a></p>

<p>config を edit して、なんとかガジェット本体の Map を緊急避難。javascript のライブラリは外した。</p>

<p>言わずもがな Google Code は開発者・技術者のためのサービス。<br />
本来ならば私のような因数分解も解けない文系シロウトの40歳オヤジなどお呼びでない。しかしその敷居のお高い感じが<big>とてもクヤシイ</big>のでやってみた次第（いつものとおり技術的理論・方法論等は一切無視）。</p>

<p>そしてきょう日曜。再度ロリポップから24時間分のログをダウンロードしてみたら、サイズは19.2MB（82,178行）に激減していた。「Service Temporarily Unavailable」も出なくなった。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Sun, 17 Feb 2008 09:17:02 +0900</pubDate>
</item>
<item>
<title>Google Maps API + PHP + MySQL + Search</title>
<link>http://japonyol.net/editor/archives/2008/02/google-maps-php-mysql-query.html</link>
<guid>http://japonyol.net/editor/archives/2008/02/google-maps-php-mysql-query.html</guid>
<description><![CDATA[<p>１月30日、Google のパメラさんがマップ API に <a href="http://googlemapsapi.blogspot.com/2008/01/article-creating-store-locator-with-php.html" target="_blank">PHP+MySQL を使った検索機能</a>を提示した。データベースにストアしたポイント群を表示するもので、別途<a href="http://code.google.com/support/bin/answer.py?answer=87134&amp;topic=11364&amp;fromblog=true" target="_blank">ドキュメントも用意されて</a>いた。</p>

<p>サンプル通りにやればいいのだが当該チュートリアルに記述ミスがあったり、</p>

<blockquote><p>First, check your configuration and make sure you are using PHP5. If you aren't, then adapt this code to use either the domxml or echo technique from <a href="http://code.google.com/support/bin/answer.py?answer=65622&amp;topic=11364#outputxml" target="_blank">our previous article</a>.</p></blockquote>

<p>などと書いてあったりして少しヤヤコシイ。私の借りているロリポップのサーバーは PHP4 のようなので、この環境に合うようゴニョゴニョ書き換えて作ってみた。<br />
必要なのは、（1）データベースの基礎事項を記した php、（2）XML を生成する php、（3）メインのHTML。<br />
データは東京近郊の鉄道駅。例えば「千代田区丸の内1-3」、「渋谷」などと入力して検索してみましょう。</p>

<p><strong><a href="http://japonyol.net/editor/sql-search-map.html" target="_blank">首都圏の駅検索: 地下鉄・JR・私鉄</a></strong>（1100以上の駅から）</p>

<p>GeoCoder を用いて至近の（半径 n km あるいは n mile 内にある）マーカーが表示される仕組み。<br />
日本の GeoCoder は厳密ではないから、おおよそのものと捉えないといけない。なお、クエリは最大で20件の設定。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Tue, 05 Feb 2008 20:28:06 +0900</pubDate>
</item>
<item>
<title>SIMILE Timeline + Google マップ（2）</title>
<link>http://japonyol.net/editor/archives/2008/02/simile-timeline-google-2.html</link>
<guid>http://japonyol.net/editor/archives/2008/02/simile-timeline-google-2.html</guid>
<description><![CDATA[<p>Google マップと SIMILE Timeline の組み合わせ、<a href="http://japonyol.net/editor/archives/2008/01/simile_timeline_map.html">前回</a>はXMLフィードを描画してライブに更新される動的な地図を試したので、今回は静的な地図をなんとなく AJAX みたく。</p>

<p><strong><a href="http://6pesos.googlecode.com/svn/trunk/timeline-map.html" target="_blank">なんとなく AJAX な Map + Timeline</a></strong></p>

<p>「時間軸の移動に伴う空間の移動」のケースということで、手っ取り早く輸送機関をサンプルにした。旅程図や物流のトレーサビリティなど、使途はいろいろ考えられるのでは？　GPS と組み合わせるとか。<br />
例えばギョーザが河北省の工場から天津港を経て神戸港に揚がり店舗へ・・・（コレは無意味か）。</p>

<p>「なぜギョーザに薬物が？」というより、「なぜ加工食品がそんなに消費されるのか？」という疑問のほうが私には大きい。加工食品に限らず冷凍食品やインスタント食品の類は、すべからくマズイのに。その反面、ミシュランガイド東京版が売れまくっているらしいから滑稽なものだ。</p>]]></description>
<author>Seis Pesos</author>
<category domain="http://www.sixapart.com/ns/types#category">Google</category>
<pubDate>Mon, 04 Feb 2008 13:17:02 +0900</pubDate>
</item>
<item>
<title>SIMILE: Timeline</title>
<link>http://japonyol.net/editor/archives/2008/01/simile_timeline_map.html</link>
<guid>http://japonyol.net/editor/archives/2008/01/simile_timeline_map.html</guid>
<description><![CDATA[<p>MIT のオープンソースプロジェクト、<a href="http://simile.mit.edu/" target="_blank">SIMILE</a> の Timeline と Google Maps と組み合わせる例があった。少し修正のうえ簡素に改変して覚書。<br />
米国地質調査所（USGS）による直近24時間に発生したマグニチュード2.5以上の地震情報を描画。時間軸（上段が時間、下段が日付）で補足する形。マップの infoWindow 中に現れる時刻は USGS のフィード（XML）の値を parse しているだけなので、GMT。Timeline 中は日本時間に補正してある（GMT+9）。<br />
フィードは5分おきにリロード。</p>

<iframe src="http://japonyol.net/editor/time.html" title="TimeLine" frameborder="0" height="630" scrolling="no" width="686"></iframe>

<p><small>（ソースを見る＝<a href="http://japonyol.net/editor/time.html" target="_blank">別ウィンドウで開く</a>）</small></p>

<p>XML をかませてスケジュール管理とか、年表等のスキーム作成など、いろんな応用方法があるらしい。<br />
で、Movable Type のテンプレートを簡単に作って、吐かせて、<strong><a href="http://japonyol.net/editor/archives.html" target="_blank">このブログのフィードを表示してみた</a></strong>。</p>

<p><a href="http://simile.mit.edu/timeline/docs/crea