このブログを検索

大文字小文字を区別する 正規表現

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

2012年9月 2日

隠居のパソコン備忘録: Google Maps API JS V3 で、カテゴリー別に色違いマーカーを表示する


 酷暑で屋外での活動は歳を考えて自粛していた。それで、自然とパソコンに向かう時間が多くなっていた。取り組んだのは、V3 にバージョンアップした Google Maps JS API で旅行地図などを作成するなどのいろいろなトライである。

 といっても、一から Google Maps JS API で希望する地図を作成する能力はないから、公開されている人様のコードをいじることが主体である。このようなときに、重宝させていただいているのは、Using the Google Maps API v3にあるサンプルである。
 Mike Williams' tutorial というサイトで V2 でサンプル表示されていた More advanced stuff - Part 25 Marker Categoriesを、V3 コードに置き換えた translated to v3というのが紹介されている。これを利用すれば、野鳥撮影地点を種別に表示するときなどに使えそうと思い自分のできる範囲でいじって見ることにした。

 このような作業をする時の手順は、だいたい次のようにしており、備忘録として記録しておきたい。
  1. サンプル画面のソース・コード(IE の場合、メニューバーの表示⇒ソース)を取得する。これを、テキスト編集ソフト(私の場合:秀丸)にコピペし、名前をつけて、適当なフォルダーに、html ファイルとして保存する。
  2. サンプルコードで使用されている Javascript ユティリティ ファイル(今回の例では、downloadxml.js ファイル)や使用するマーカイメージ・ファイル(今回のサンプルでは、marker_red.png のようなファイル)を用意し、ファイル転送ソフト(私の場合:FFFTP )でサーバー(私の場合:Xserver )上の適当なフォルダーにアップロードしておく。
  3. サンプル・コードで使用されている xml ファイル(普通はサンプル・コード内で相対パスで表示されている。これを絶対パスにして、ブラウザで表示させる)をC&P して、秀丸の新しいファイルとする。適当な名前(xmlファイルで)で保存する。これも、先ほどと同じサーバー上の同じフォルダーにアップロードしておく。
  4. 秀丸画面で、自分の環境に合うように、サンプルコードのそれらのファイルの path を書き換える。私の場合、ミスがないように、絶対パスで書くことにしている。
  5. 自分のサーバー環境に合わせたサンプル・コードをブラウザで表示してみる。これで、參照サンプルと同じように表示されたら、サンプルのコピーは成功である。
  6. このサンプルコードを少しづついじって、目的とする地図(今回、地元の公園・ホームセンター・大型電気店を種別( category )に表示することを目指した。)に近づけていく。先ず、地図の中心を地元にするために、地図の center 緯度・経度を置き換えた。
  7. と同時に、xml ファイルも、サンプルで使われているファイルを真似して、新たに日本語を含むファイルを作って(XML ファイルの編集は、XmlNotepad を使っている)サーバー上にアップロードした。(日本語のエンコードは、UTF-8 )
  8. その他、category の名前を変えたことに対応する修正などを加えて保存、サーバーにアップロードして、ブラウザで表示してみた。地図やチェックボックス、日本語のサイドバーは、期待通り表示されたが、肝心のマーカーが表示されない。元のサンプルコードと見比べながら、チェックしてみたが、原因が分からない。
    JavaScriptや HTML のコードは、カンマ一つ抜けても動かないことがあるので、再度やり直すなど作業を続けて見たが、うまくいかない。
  9. 3日間ほど悩んで、諦めかけていたが、原因はどうやら XML ファイルにあるらしいと思われたので、再度フィルを眺めていると、ing(longitude:経度) と lat(latitude:緯度)の数字が入れ替わっていることに気がついた。今まで、このような XML ファイルは lat ⇒ lng という順序で記入していたのに、今回使ったサンプル XML ファイルは順序が逆になっていたのだ。サンプル XML ファイルの経度・緯度が海外の地点を示していたので、気づくのが遅れたらしい。
     数字を入れ替えてみると期待通りに表示されるようになった。ミスというのは大体において、このようにうっかりミスが多いものだが、ついつい難しく考えてしまいがちだ。
  10. このサンプルコードを土台に、マーカーの吹きだし(infowindow) に画像やリンクURL を表示を試みたが、それらも OK のようである。
     なお、写真の表示が、画面の中心に表示され背景がフェードアウトする lightbox も使えるので、今後いろいろな応用ができるのではないかと考えている。


 作成例:泉北ニュータウンの公園・ホームセンター・大型電気店地図 サンプル・ページ

  

2012年8月26日

隠居のパソコン備忘録: Google Maps API JS V3 での地図でマーカー地点をズームイン・アウトする


 V3 にバージョンアップした Google Maps JS API で旅行地図などを作成することをいろいろとトライしている。
 当サイト内の Studio YAMAKO のオーナーは、お住まいの横浜近郊はもちろんのこと、海外をも含めて様々なところを旅行され、それぞれの地点での綺麗な写真をブログにUPされている。
 旅行先を一枚の地図で表示することは無理なので、海外旅行については、その都度旅行先の地図を作って表示させてもらっているが、国内旅行については、年度別に、一枚の日本地図にプロットしている。(例:2011年旅行地図) だが、これでは地図が大まかすぎて、訪問先地点毎に、コントロールを使って、ズームインと地図の移動をする必要がある。

 それで何か良いサンプルはないかと探ってみると、Google Maps API links に、V2 で作成されたMike Williams' tutorial の The Basics - Part 3: Loading the data from an XML file with added "Zoom To, Zoom In, Zoom Out links in infowindow V3 に書き換えたサンプルコードが見つかった。
 2011年旅行地図では、隠居のパソコン備忘録: Google Maps API JS V3 でXML ファイルを読み込むに記録したサンプルコードを使った。今回のコードは、そのコードに、Zoom in・out の機能を付け加えたものである。呼び込んでくる XML ファイルは、同じ形式である。サンプルコードには、XML ファイルに zoom というタグが組み込まれていたが、なしでも機能するようである。
 2012年の旅行地図では、このコードを使った。見た目は、2011年旅行地図と変わらないが、地点をクリックして出てくる吹きだし(infowindow)に、表示される Zoom to [+] [-] をクリックすると、その地点が地図の中心となる。 さらに、[+] をクリックしていくと、Zoom が一段ずつUPする。2011年旅行地図に比べれば、少し改良された。
 下は、そのコードである。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Javascript API v3 Example: Loading the data from an XML</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://xxxxxxxxxx/JSlibrary/downloadxml.js"></script>
<style type="text/css">
html, body { height: 100%; } 
</style>
<script type="text/javascript"> 
//<![CDATA[
      // this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 
      // arrays to hold copies of the markers and html used by the side_bar 
      // because the function closure trick doesnt work there 
      var gmarkers = []; 
     // global "map" variable
      var map = null;
// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html, zoom) {
    var contentString = html;
    // add the zoom links
    contentString += '<br><a  href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom('+zoom+');">Zoom To</a>';
    contentString += ' - <a  href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())+1);">[+]</a>';
    contentString += ' - <a  href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())-1);">[-]</a>';

    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: new google.maps.MarkerImage('http://labs.google.com/ridefinder/images/mm_20_blue.png'),         
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
    marker.MyZoom = zoom;
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}
function initialize() {
  // create the map
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(34.717876,137.851424),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);
  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });
      // Read the data from example.xml
      downloadUrl("http://xxxxxxxx/xxxxxxxxx/xxxx/V3_yamako_2012.xml", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var html = markers[i].getAttribute("html");
          var label = markers[i].getAttribute("label");
          var zoom = markers[i].getAttribute("zoom");
          if (!zoom) zoom = 15;
          // create the marker
          var marker = createMarker(point,label,html,zoom);
        }
        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = side_bar_html;
      });
    }

var infowindow = new google.maps.InfoWindow(
  { 
//    size: new google.maps.Size(150,100),
    maxWidth: 450
  });

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/
    // from the v2 tutorial page at:
    // http://econym.org.uk/gmap/basic3.htm 
//]]>

</script> 
  </head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 
    <!-- you can use tables or divs for the overall layout --> 
     <table border="1"> 
<tr>
<td bgcolor="#FFFFCC" align="center" colspan="2"><font color="#000000"><strong><big>Yamako 国内旅行地図:2012年
</big></strong><br /></font></td></tr>      
<tr> 
        <td> 
           <div id="map_canvas" style="width: 780px; height: 820px"></div> 
        </td> 
        <td width = 220 valign="top"  bgcolor="#ffffe0" style="text-decoration: underline; color: #000000; font-size: small;" >
           <div id="side_bar"></div> 
        </td> 
      </tr> 
    </table> 


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

  </body> 
</html> 


2012年7月21日

隠居のパソコン備忘録: Google Maps API JS V3 でXML ファイルを読み込む

 
 自作地図を作成するのに便利していた Google Maps API のバージョンが、 V2 から V3 に大幅に変更され、来年5月には V2 で作成した地図が動かなくなりそうだということは、隠居のパソコン備忘録:Google Maps API V3 で旅行地図を作成するで、記録した。

  V2 で作成した多くの地図では、外部ファイルである XML ファイルを読み込んでマーカを立てる地点やマーカをクリックすると出てくる吹きだしの中に、リンク先などの情報を表示していた。年間の旅行先などマーカが順次増える場合には、XML ファイルに経度・緯度や必要なリンクを書き足すだけでいいので便利をしていた。
 今まで V2 で作成してきた地図を V3 にバージョンアップして XML ファイルを読み込むためのサンプル・コードを探し回したが、適切なコードが見つからなかった。一から、作成する能力はからきしない。途方に暮れて、上のブログに記録した前回の方法で、XML ファイルを使わず直接 JavaScript に書き込むことも挑戦しかけたが途方も無い作業のようなのでやめて、今までの XML ファイルが使えそうなサンプル・コードで、再度粘ってみることにした。

 拝借したサンプル・コードは、上のブログに記録した前回の方法ときにも拝借した、【Using the Google Maps API v3】 というページにある【lLoading the data from an XML file translated to v3】のソース・コードである。
 V3 のGoogle Maps API にXML ファイルを読み込む方法は、多くの場合、前回に lightbox 2.51 の導入で紹介した JavaScript のライブラリー jQuery が使われている。拝借したサンプル・コードでは、jQuery ではなく、downloadxml.js というライブラリーが使われている。どうも、jQuery の方が本流らしいが、私にとっては、V3 で今までの XML ファイルが使えるサンプル・コードの方がありがたい。
 一週間以上かなりの時間を使って粘った甲斐があって、下のようなコードで XML が読み込めるようになった。
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Javascript API v3 Example: Loading the data from an XML</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://n-shuhei.net/XXXXX/XXX/XXXXX/downloadxml.js"></script>

<style type="text/css">
html, body { height: 100%; } 
</style>

<script type="text/javascript"> 
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 

      // arrays to hold copies of the markers and html used by the side_bar 
     // because the function closure trick doesnt work there 

      var gmarkers = []; 

     // global "map" variable
      var map = null;

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });

    // save the info we need to use later for the side_bar
    gmarkers.push(marker);

    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function initialize() {
  // create the map
  var myOptions = {
    zoom: 12,
    center: new google.maps.LatLng(35.377556,134.534862),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

      // Read the data from hachi.xml
      downloadUrl("hachi.xml", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {

          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new google.maps.LatLng(lat,lng);
          var html = markers[i].getAttribute("html");
          var label = markers[i].getAttribute("label");

          // create the marker
          var marker = createMarker(point,label,html);
        }

        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = side_bar_html;
      });
    }

var infowindow = new google.maps.InfoWindow(
  { 
//    size:  new google.maps.Size(200,50)
  });

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/
    // from the v2 tutorial page at:
    // http://econym.org.uk/gmap/basic3.htm 

//]]>

</script> 
  </head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 

    <!-- you can use tables or divs for the overall layout --> 
    <table border="1"> 
<tr>
<td bgcolor="#FFFFCC" align="center" colspan="2"><font color="#000000"><strong><big>ハチ高原近辺私的観光地図</big></strong><br /></font></td></tr>      
<tr> 
        <td> 
           <div id="map_canvas" style="width: 800px; height: 600px"></div> 
        </td> 
        <td width = 200 valign="top"  bgcolor="#ffffe0" style="text-decoration: underline; color: #000000; font-size: small;" >
<!--<td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;">-->
           <div id="side_bar"></div> 
        </td> 
      </tr> 
    </table> 

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

  </body> 
</html> 
サンプル地図

 試行錯誤は、拡張子の前につける . (ピリオド)が抜けていたり、ファイルのアップロード先を間違ったりなど実に単純なミスの連続であった。
 とくに、Geekなぺーじの【Google MAPS JavaScript APIでのデバッグ】にも書かれているように、日本語コードで最後までつまづいた。V2 のときには、Shift-JIS でも OK だったXML ファイルが、UTF-8 でないとエラーを起こすというより、全く読んでくれない。
 この試行錯誤のお陰で、Google Maps API について、少し理解が深まったが、JavaScript に十分な知識がない老人にはやっぱり難解な世界である。中断していた JavaScript の学習も再開せねばと思うが、なにしろやりたいことが多すぎる。
 来年5月までに、順次 V2 の地図を V3 にしていくつもりである。

2012年7月12日

隠居のパソコン備忘録:Google Maps API V3 で旅行地図を作成する


 Google が提供する自分好みの地図を作成できるサービス Maps JavaScript API の バージョンUP(V2 ⇒ V3)が2009年5月に発表されている。最近になって、V2 は廃止され、V3 がリコメンドされていることを知った。プロ向けと思われる【Google Deveopers】というサイトにある【Google Maps JavaScript API V3】 のページには、次のような記載がある。
注: このページに記載されている Google Maps JavaScript API バージョン 3 は、正式な JavaScript API となりました。JavaScript API バージョン 2 は、Google の廃止ポリシーにより正式に廃止されました。アップデート、拡張された新しいバージョンに、コードを移行することをおすすめします。

さらに、Deprecated(非推奨という意味か?) と記されている V2 のページには、次の記載がある。
Note: The Google Maps JavaScript API Version 2 has been officially deprecated as of May 19, 2010. The V2 API will continue to work until May 19, 2013. We encourage you to migrate your code to version 3 of the Maps JavaScript API.

なんと来年5月には、動かなくなりそうだ。私のサイトには、V2 作成した地図を数多く掲載している。慌てて、V3 の学習を始めた。V2 に比べると大幅に変更になっている。サンプルコードをパクリして、作成してきた地図を、基本的な知識が乏しい老人が、今までのコードをバージョンアップするのは至難の技に思われる。それで、今までのコードのバージョンアップは諦めて、ネットで紹介してくれているV3 版のサンプルコードを頼りに、新しく書いて見ることにした。

 ようやくたどり着いたのが、7月10日に収載した【加賀地方旅行地図】である。この地図を例として、作成方法を備忘録として記録しておきたい。

 やりたいことは、
  1. 旅行した地域をカバーする地図を表示する。
  2. 観光した地点にマーカーを立てる。
  3. マーカーをクリックすると吹きだし(infowindow) がでる。
  4. infowindow には、撮った写真の表示や観光地点のURL へリンクを表示できるようにする。
  5. 地図の枠外に訪問地点名を表示し、クリックすると地図上の該当マーカに、infowindow が表示するようにする。
  6. できあがった地図は、私のブログ(Movable Type 4)で、エントリーとして機能するようにする。

 このような地図は、Google Maps API V2 では、できていたのであるが、V3 では初めての試みである。
 ささやかな JavaScript の知識か持たない私の技術では、これを一から作成することは困難である。Sample コードをネットで探し回したところ、【Using the Google Maps API v3】 というページに、要望にあったコード(Mike Williams' tutorial The Basics - Part 2: Adding a clickable sidebar translated to v3)を見つけることができた。Mike Williams' tutorial は、V2 の地図を作成するときにほとんど丸写しに近く参照させていただいたサイトである。残念ながら、このサイトでの V3 によるサンプルコードはない。このV2 でのコードをどなたかが、V3 に translate されたコードである。

 このサンプルコードをもとに、作成した旅行地図 のコードは、以下のとおりである。
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps Javascript API v3 Example: Adding a clickable sidebar</title><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<style type="text/css">
  html, body { height: 100%; } 
</style>

<script type="text/javascript"> 

//<![CDATA[

    var side_bar_html = ""; 
    var gmarkers = []; 
    var map = null;

function initialize() {
    var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(36.338359,136.446075),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  google.maps.event.addListener(map, 'click', function() {
   infowindow.close();
   });

  var point = new google.maps.LatLng(36.056871,136.355095);
  var marker = createMarker(point,"永平寺","<a href='./travel-eiheiji.html' target='_blank'>永平寺 写真サムネイル画像</a>")

  var point = new google.maps.LatLng(36.237628,136.125712);
  var marker = createMarker(point,"東尋坊","<a href='./travel-tojinbo.html' target='_blank'>東尋坊  写真サムネイル画像</a>")

  var point = new google.maps.LatLng(36.228506,136.175559);
  var marker = createMarker(point," そば処あおき","<a href='http://fukui-shop.net/soba/208449/' target='_blank'>URL: そば処あおき</a>")

  var point = new google.maps.LatLng(36.243996,136.374664);
  var marker = createMarker(point," 山中温泉","<a href='./travel-yamanaka.html' target='_blank'>山中温泉 写真サムネイル画像</a><br /><a href='http://yoshinoyairokuen.jp/viewpoint/map_aki_fuyu.pdf' target='_blank'>PDF: 山中温泉案内図</a><br /><a href='http://www.daiwaresort.co.jp/kajikasou/' target='_blank'>URL: 河鹿荘ロイヤルホテル</a>")

  var point = new google.maps.LatLng(36.322871,136.294327);
  var marker = createMarker(point," 鴨池観察館","<a href='./travel-kamoike.html' target='_blank'>鴨池観察館 写真サムネイル画像</a><br /><a href='http://park15.wakwak.com/~kamoike/' target='_blank'>URL: 鴨池観察館</a>")

  var point = new google.maps.LatLng(36.56098,136.658249);
  var marker = createMarker(point," 金沢21世紀美術館","<a href='./travel-21seiki.html' target='_blank'>金沢21世紀美術館 写真サムネイル画像</a><br /><a href='http://ja.wikipedia.org/wiki/%E9%87%91%E6%B2%A221%E4%B8%96%E7%B4%80%E7%BE%8E%E8%A1%93%E9%A4%A8' target='_blank'>URL: 金沢21世紀美術館</a>")

  document.getElementById("side_bar").innerHTML = side_bar_html;
}
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });

    gmarkers.push(marker);

   side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a>  ';
}
 
//]]>

</script> 

</head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 
     <table border="1"> 
      <tr> 
        <td> 
           <div id="map_canvas" style="width: 720px; height: 650px"></div> 
        </td>
      </tr><tr>   
        <td valign="top" style="width:720px; font-size:small; color: #4444ff;"><strong>観光場所:クリックすると該当場所に吹きだしがでます。</strong><div id="side_bar"> </div> 
        </td> 
      </tr> 
    </table> 

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

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> 
 </body> 
</html> 


 このコードについて、若干補足して記録しておきたい。
  • マーカーを立てる経度・緯度の数値は、「Google マップ 地図検索」で検索した地点に出てくるマーカを右クリックすると出てくるポップアップにある「この場所について」をクリックすると 検索文字を入れるボックスに表示される。
  • infowindow の中に表示するURLや写真ページヘのリンクは、HTMLコードを書く要領で書けば良い。
  • side-bar は サンプルコードでは 地図の右枠外であるが、HTMLコードでテーブルを作成する要領で(</tr><tr> ) 行を変えれば、地図の下枠外に表示できる。


 なお、写真の表示に、ブログで使ってきた lightbox (当ブログで使っている写真表示手法)のコードを書いても、Google Maps API というJavaScript の中で、lightbox というJavaScript を使うことになり、うまく表示されない。もう少し勉強すればできるのかもしれないが、次善の策として、ワンクッションおいてサムネイル画像を表示することにした。なお、lightbox については、今回の学習中に、jQuery.js という JavaScript のライブラリーを使ったバージョンが出ていることが分かった。(従来は、prototype.js を使っていた)
jQuery 版lightbox については、稿を改めて記録したい。

 作成した地図を、MT4 のブログにエントリーするには、<iframe>をつかって次のようにブログの中に取り込めば良い。
<iframe src="http://n-shuhei.net/atelier/maps/travel-kaga.html" width="740" height="700" scrolling="NO" frameborder="0"></iframe>


 なお、ブログの右フレームに載せている地図は、Google Maps API V2 で作成しているが、ここでは、xml ファイルを使っている地図が多い。V3 でのXML との連携についても学習しなければならない。おかげで、当分痴呆にはならないだろうが。

2011年1月29日

隠居のGoogle Maps: (続)Google Maps API を使って野鳥出現地点をカスタム・マーカーでプロットする

 先にエントリーした【隠居のGoogle Maps: Picasa を使って野鳥出現地点をプロットする】の方法では、プロットする地点を追加しようとすると、そこで記録した 4. 以降のかなり厄介な作業を、一からやり直さなければならないことが分かった。これでは不便である。

 それで、もとに戻って、自由度の高い Google Maps API を応用することを再度試みることにした。右フレームにおいている【京都・滋賀・奈良近辺私的観光地図】のような方式に変えれば、XML ファイルに位置情報と写真へのリンクを追加するだけで、プロット地点を増やしていけることが分かっている。ただ、先のエントリーのように、プロット地点に立てるマーカーを鳥のアイコンにする方法が、乏しい知識ではなかなかわからなかった。マーカーを任意のものに変える方法は色々と紹介されているが、外部のXML ファイルを呼びこんでくるようなコードは紹介されていなかった。

 いろいろとトライしているうちに、どうやら使えそうにコードが、Google から紹介されているのを見つけた。このコードを応用して追加・訂正することで カスタム・マーカー ができたので、忘れないうちに記録しておくことにした。

 仕樣は【野鳥の写真サムネイル】の種別名欄に、【撮影地点地図】 というボタンを置き、これをクリックすると新しい画面が開き、小鳥のマーカーが地図上にプロットされる。このマーカーか、右フレームの地名をクリックすると、その地点で撮影した野鳥の写真が吹きだしに表示される仕組みである。
そして、ここが肝心なのだが、新しい写真とその撮影地点は、XML ファイルで容易に追加することができるようにしたことである。カワラヒワの撮影地点地図を例にとって、以下、順を追って記録する。

  1. まず、XML ファイルを呼びこんで地図にマーカーを立てるもととなる html コード(Google Maps API の JavaScript が含まれている。)を用意する。このオリジナルは、Google Maps API Tutorial からいただいたもので、【道東ドライブ:Google Maps API Traial_3】のエントリーで紹介している。
    このHTML コードの中で、使用している JavaScript は、以下のようなものである。
    
    <script type="text/javascript">
        //<![CDATA[
    
        if (GBrowserIsCompatible()) {
          // this variable will collect the html which will eventualkly be placed in the side_bar
          var side_bar_html = "";
        
          // arrays to hold copies of the markers and html used by the side_bar
          // because the function closure trick doesnt work there
          var gmarkers = [];
          var htmls = [];
          var i = 0;
    
          // A function to create the marker and set up the event window
          function createMarker(point,name,html) {
            var marker = new GMarker(point);
            GEvent.addListener(marker, "click", function() {
              marker.openInfoWindowHtml(html);
            });
            // save the info we need to use later for the side_bar
            gmarkers[i] = marker;
            htmls[i] = html;
            // add a line to the side_bar html
            side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
            i++;
            return marker;
          }
    
          // This function picks up the click and opens the corresponding info window
          function myclick(i) {
            gmarkers[i].openInfoWindowHtml(htmls[i]);
          }
    
    
          // create the map
          var map = new GMap2(document.getElementById("map"));
          map.addControl(new GLargeMapControl());
          map.addControl(new GMapTypeControl());
          map.setCenter(new GLatLng( 43.745305,144.431763), 9);
    
    
          // Read the data from example.xml
          var request = GXmlHttp.create();
          request.open("GET", "http://n-shuhei.net/xxxx/xxx/trial.xml", true);
          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              var xmlDoc = request.responseXML;
              // obtain the array of markers and loop through it
              var markers = xmlDoc.documentElement.getElementsByTagName("marker");
              
              for (var i = 0; i < markers.length; i++) {
                // obtain the attribues of each marker
                var lat = parseFloat(markers[i].getAttribute("lat"));
                var lng = parseFloat(markers[i].getAttribute("lng"));
                var point = new GLatLng(lat,lng);
                var html = markers[i].getAttribute("html");
                var label = markers[i].getAttribute("label");
                // create the marker
                var marker = createMarker(point,label,html);
                map.addOverlay(marker);
              }
              // put the assembled side_bar_html contents into the side_bar div
              document.getElementById("side_bar").innerHTML = side_bar_html;
            }
          }
          request.send(null);
        }
    
        else {
          alert("Sorry, the Google Maps API is not compatible with this browser");
        }
    
        //]]>
        </script>
    

    上のコードの赤字部分を、下のコードと置き換えれば、標準マーカーを小鳥のアイコン(この場合、カワラヒワのアイコン)で表示できることが分かった。この時、用いるイメージは、必ずしも .png ファイルだけではなく .gif ファイル、.jpg ファイルでもOKである。
    
    // Create birds marker icon
           var birdIcon = new GIcon(G_DEFAULT_ICON);
           birdIcon.image = "http://n-shuhei.net/Libraly/Icon/birds/kawarahiwa.gif";
           birdIcon.iconSize = new GSize(20, 34);
                    
    // Set up our GMarkerOptions object
           markerOptions = { icon:birdIcon };
    
    // A function to create the marker and set up the event window
          function createMarker(point,name,html) {
          var marker = new GMarker(point,birdIcon);
    

  2. このコードを入れた JavaScript は以下のようになる。
    
    <script type="text/javascript">
        //<![CDATA[
    
        if (GBrowserIsCompatible()) {
    // this variable will collect the html which will eventualkly be placed in the side_bar
        var side_bar_html = "";
        
    // arrays to hold copies of the markers and html used by the side_bar
    // because the function closure trick doesnt work there
        var gmarkers = [];
        var htmls = [];
        var i = 0;
    
    // Create birds marker icon
        var birdIcon = new GIcon(G_DEFAULT_ICON);
         birdIcon.image = "http://n-shuhei.net/xxxxxxx/Icon/birds/kawarahiwa.gif";
           birdIcon.iconSize = new GSize(20, 34);
                    
    // Set up our GMarkerOptions object
           markerOptions = { icon:birdIcon };
    
    // A function to create the marker and set up the event window
        function createMarker(point,name,html) {
        var marker = new GMarker(point,birdIcon);
         GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
            });
    
    // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        htmls[i] = html;
    
    // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
            i++;
        return marker;
          }
    
    // This function picks up the click and opens the corresponding info window
        function myclick(i) {
            gmarkers[i].openInfoWindowHtml(htmls[i]);
          }
    
    // create the map
          var map = new GMap2(document.getElementById("map"));
          map.addControl(new GLargeMapControl());
          map.addControl(new GMapTypeControl());
          map.setCenter(new GLatLng(34.48675,135.490608),14);
    
    // Read the data from example.xml
          var request = GXmlHttp.create();
          request.open("GET", "http://n-shuhei.net/atelier/xxxxx/xxxxxxxx/API_kawarahiwa.xml", true);
          request.onreadystatechange = function() {
          if (request.readyState == 4) {
          var xmlDoc = request.responseXML;
    // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
              
          for (var i = 0; i < markers.length; i++) {
    // obtain the attribues of each marker
                var lat = parseFloat(markers[i].getAttribute("lat"));
                var lng = parseFloat(markers[i].getAttribute("lng"));
                var point = new GLatLng(lat,lng);
                var html = markers[i].getAttribute("html");
                var label = markers[i].getAttribute("label");
    // create the marker
                var marker = createMarker(point,label,html);
                map.addOverlay(marker);
              }
    
    // put the assembled side_bar_html contents into the side_bar div
              document.getElementById("side_bar").innerHTML = side_bar_html;
            }
          }
          request.send(null);
        }
    
        else {
          alert("Sorry, the Google Maps API is not compatible with this browser");
        }
    
        //]]>
        </script>
    

  3. 上の JavaScript で青色文字で示したのは、以下の3箇所である。
    • マーカーに使うアイコン
    • 地図の中心となる経度・緯度と地図の縮尺の大きさ
    • 呼びこんでくる XML ファイル
    この3箇所は作成する地図ごとに書き換えねばならない。
  4. 呼びこんでくる XML ファイルには、
    • マーカーを立てる位置(経度・緯度)
    • リンクする写真のサーバー内のありか
    • ラベル(地図の右フレームに表示する地名)
    をリストする必要がある。このファイルの編集には、私は XML Notepad というソフトを使っている。duplicate 機能があるので楽ちんである。
  5. マーカーを立てる経度・緯度の値は10進法でなければならない。これは、【隠居のGoogle Maps: Picasa を使って野鳥出現地点をプロットする】で記載した方法(2. および 3.)のように Picasa のウェブアルバムで行うと、アルバムにある写真をクリックすると、右フレームに10進法の経度・緯度が表示される。
     Picasa の写真プロパティで表示される EXIF では、表示は 60進法になっている。 Picasa のウェブアルバムの助けを借りるのは、そのためである。
  6. リンクする写真のありか(例えば、 http://n-shuhei.net/xxxx/xxxx/xxxxx.jpg )は、【野鳥の写真サムネイル】で、種別表示をして写真サムネイルの下に表示されているリンク先のエントリーのソースからコピーしてくる。これが、少々煩わしいが、仕方ない。なにかいい方法がないか考えてみたい。
     このようにして作成した小鳥マーカーが表示された地図のサンプルは、以下である。
     Example:
  7. 【野鳥の写真サムネイル】の種別名欄に、【撮影地点地図】 というボタンを置き、これをクリックするとこの地図が、新しい Window で開くようにするために、下のような別の JavaScript を使っている。
    // POPUP Window
    
    function open_win_kawarahiwa(){
    window.open("http://n-shuhei.net/atelier/xxxxx/xxxxxxxxx/API_kawarahiwa_m.htm","","
    menubar=no,toolbar=no,location=yes,status=yes,scrollbars=yes,resizable=yes,
    width=950,height=600,left=50,top=50"); }

    この JavaScripr ファイルを、【野鳥の写真サムネイル】の、種別表示をしているページのHTML の <head> 部分に次のように読み込み、
    <script type="text/javascript" src="http://n-shuhei.net/atelier/xxxxx/xxxxxxxxx/pup_kawarahiwa.js"></script>
    、【撮影地点地図】 というボタンをクリックすると地図が新しい window に開くように、<body> 部の適切な位置に、次のコードを置いた。
    <input type="button" value="撮影地点地図" onClick="open_win_kawarahiwa()">

  8. 作成した地図は、まだカワラヒワだけであるが、順次時間を見て増やしていきたいと思う。泉北ニュータウンのごく限られた地域ではあるが、記録としては面白いのではないかと思っている。
     カワラヒワのプロット地図

2010年1月29日

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

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

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

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

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

全体地図用HTML(include Google Maps API JavaScript)
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

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

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

</head>

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

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

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

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

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

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

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

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

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

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

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

    //]]>
    </script>

   </body>
</html>

このコードでの学習した点は、114行目あたりの各都市間を訪問順に結んでいるブルーのライン(Google Maps API では、polyline という)を描くための Javascript 挿入することである。この polyline を描くのは、IE8 では次の処理をしなくてもいいらしいが、IE7 以下では、HTML 上部(head 部より前)に、
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
という記述が(斜め書き部分)必要であり、head 部分に次のスタイルを設定する必要がある。
<style type="text/css">
    v\:* {   behavior:url(#default#VML);   }
    </style>

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


市街地図(例として、プラハ市街図)のHTML(include Google Maps API JavaScript)は、つぎのようなコードである。ここでは、XML ファイルは使っていない。(学習不足で使うことができなかった。)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="http://n-shuhei.net/litebox/???/lightbox.css" type="text/css" media="screen"/>
<script type="text/javascript" src="http://n-shuhei.net/litebox/???//prototype.lite.js"></script>
<script type="text/javascript" src="http://n-shuhei.net/litebox/???/moo.fx.js"></script>
<script type="text/javascript" src="http://n-shuhei.net/litebox/???/litebox-1.0.js" charset="utf-8"></script>
<title>Google Maps JavaScript API map_13</title>
<script src="http://maps.google.co.jp/maps?file=api&amp;v=2&amp;key=ABQIAAAA_--TOJLbO9UBLVgjJC7W8hRCNFlWI0Fg????????????
  mm9hSKsn5IFaeCnFgl????????????" charset="utf-8" type="text/javascript"></script> </head> <body onload="initLightbox()"> <div align="center"> <table width="auto" border="1" bgcolor="#FFFFCC"> <thead ><tr><td id="th1" colspan="2" align="middle" ><big><strong>プラハ<strong></big></td></tr></thead> <tbody align="left"> <tr><td> <div id="map" style="width:730px; height:530px"></div> </td><td width ="210px" valign="top" style="text-decoration: color: #000000; font-size: small;">左の地図は、Google Mapsの機能を持っています。拡大・縮小・移動ができます。
下のチェックボックスをチェックすると該当位置にマークが立ちます。また、青文字をクリックすると写真がでてきます。<br/><input type="checkbox" name="cb1" onClick="checkbox1clicked()">   1. プラハ城<br />   <a href="http://n-shuhei.net/studio_yamako/????????????/091130_008.jpg" title="プラハ城からの眺め" rel="lightbox[os]">プラハ城からの眺め</a><br />
<input type="checkbox" name="cb2" onclick="checkbox2clicked()"> 2. 聖ヴィート教会<br/>
   <a href="http://n-shuhei.net/studio_yamako/????????????/091130_003.jpg" title="プラハ城 聖ヴィート教会" rel="lightbox[os]">聖ヴィート教会</a><br />
;   <a href="http://n-shuhei.net/studio_yamako/????????????/091130_004.jpg" title="ミュシャのステンドグラス(部分)" rel="lightbox[os]">ミュシャのステンドグラス</a><br />
   <a href="http://n-shuhei.net/studio_yamako/????????????/091130_005.jpg" title="聖ヴィート教会の祭壇" rel="lightbox[os]">聖ヴィート教会の祭壇</a><br />
   <a href="http://n-shuhei.net/studio_yamako/????????????/091130_006.jpg" title="聖ヴィート教会前景" rel="lightbox[os]">聖ヴィート教会前景</a><br/>
<input type="checkbox" name="cb3" onclick="checkbox3clicked()"> 3. 聖イジー教会<br/>
   <a href="http://n-shuhei.net/studio_yamako/????????????/091130_007.jpg" title=""聖イジー教会と修道院 rel="lightbox[os]">聖イジー教会と修道院</a><br />
<input type="checkbox" name="cb4" onclick="checkbox4clicked()"> 4. カレル橋<br/>
   <a href="http://n-shuhei.net/studio_yamako/????????????/091130_009.jpg" title="カレル橋 水害の跡" rel="lightbox[os]">カレル橋 水害の跡</a><br/>
   <a href="http://n-shuhei.net/studio_yamako/????????????/091130_010.jpg" title="カレル橋" rel="lightbox[os]">カレル橋</a><br/>
   <a href="http://n-shuhei.net/studio_yamako/????????????/091130_011.jpg" title="カレル橋の聖像" rel="lightbox[os]">カレル橋の聖像</a><br/>
   <a href="http://n-shuhei.net/studio_yamako/????????????/091203_003.jpg" title="モルダウ川河畔" rel="lightbox[os]">モルダウ川河畔</a><br />
<input type="checkbox" name="cb5" onclick="checkbox5clicked()"> 5. 旧市街入口<br/>
   <a href="http://n-shuhei.net/studio_yamako/????????????/091203_004.jpg" title="旧市街入口" rel="lightbox[os]">旧市街入口</a><br/>
   <a href="http://n-shuhei.net/studio_yamako/????????????/091203_005.jpg" title="プラハ城を望む" rel="lightbox[os]">プラハ城を望む</a><br />
<input type="checkbox" name="cb6" onclick="checkbox6clicked()"> 6. 旧市街広場<br/>
   <a href="http://n-shuhei.net/studio_yamako/????????????/091203_006.jpg" title="火薬塔" rel="lightbox[os]">火薬塔</a><br/>
   <a href="http://n-shuhei.net/studio_yamako/????????????/091203_007.jpg" title="ティーン教会" rel="lightbox[os]">ティーン教会</a><br/>
   <a href="http://n-shuhei.net/studio_yamako/????????????/091203_008.jpg" title="旧市庁舎の時計塔" rel="lightbox[os]">旧市庁舎の時計塔</a><br/>
   <a href="http://n-shuhei.net/studio_yamako/????????????/091203_009.jpg" title="仕掛け時計" rel="lightbox[os]">仕掛け時計</a><br/>
   <a href="http://n-shuhei.net/studio_yamako/????????????/091203_010.jpg" title="ヤン・フス像" rel="lightbox[os]">ヤン・フス像</a><br />
<input type="checkbox" name="cb7" onclick="checkbox7clicked()"> 7. レギー橋<br/>
   <a href="http://n-shuhei.net/studio_yamako/????????????/091203_002.jpg" title="プラハ城を眺める" rel="lightbox[os]">プラハ城を眺める</a><br />
<br />参照記事:<a href="http://n-shuhei.net/studio_yamako/????????????/01_1623.php" target="_blank">中欧旅行 その6 プラハ(1)</a></td></tr></tbody></table></div> <!-- 番号入りマーカーを表示する。-->     <script type="text/javascript">     //<![CDATA[     var map;     var marker1, marker2, marker3, marker4, marker5, marker6, marker7;     map = new GMap2(document.getElementById("map"));     map.addControl(new GLargeMapControl());     map.addControl(new GMapTypeControl());     map.addControl(new GScaleControl());     map.setCenter(new GLatLng(50.086473,14.410651),14);     map.setMapType(G_HYBRID_MAP);     var markerIcon1 = new GIcon();     markerIcon1.image = "http://n-shuhei.net/????????????/Markers/marker1.png";  //   markerIcon1.shadow = "./img/shadow.png";     markerIcon1.iconSize = new GSize(35, 40);  //   markerIcon1.shadowSize = new GSize(70, 56);     markerIcon1.iconAnchor = new GPoint(18, 40);     var markerIcon2 = new GIcon(markerIcon1, "http://n-shuhei.net/????????????/Markers/marker2.png");     var markerIcon3 = new GIcon(markerIcon1, "http://n-shuhei.net/????????????/Markers/marker3.png");     var markerIcon4 = new GIcon(markerIcon1, "http://n-shuhei.net/????????????/Markers/marker4.png");     var markerIcon5 = new GIcon(markerIcon1, "http://n-shuhei.net/????????????/Markers/marker5.png");    var markerIcon6 = new GIcon(markerIcon1, "http://n-shuhei.net/????????????/Markers/marker6.png");    var markerIcon7 = new GIcon(markerIcon1, "http://n-shuhei.net/????????????/Markers/marker7.png");     var opt1 = {icon:markerIcon1};     var opt2 = {icon:markerIcon2};     var opt3 = {icon:markerIcon3};     var opt4 = {icon:markerIcon4};     var opt5 = {icon:markerIcon5};     var opt6 = {icon:markerIcon6};     var opt7 = {icon:markerIcon7};     marker1 = new GMarker(new GLatLng(50.088814,14.395523), opt1);     marker2 = new GMarker(new GLatLng(50.090755,14.400759), opt2);     marker3 = new GMarker(new GLatLng(50.091023,14.402025), opt3);     marker4 = new GMarker(new GLatLng(50.086473,14.410651), opt4);     marker5 = new GMarker(new GLatLng(50.086129,14.413869), opt5);     marker6 = new GMarker(new GLatLng(50.087382,14.4208), opt6);     marker7 = new GMarker(new GLatLng(50.081186,14.410672), opt7);     var marker1_is_displayed = 0;     var marker2_is_displayed = 0;   var marker3_is_displayed = 0;   var marker4_is_displayed = 0;    var marker5_is_displayed = 0;    var marker6_is_displayed = 0;    var marker7_is_displayed = 0;     function checkbox1clicked() {       if (marker1_is_displayed == 0) {         map.addOverlay(marker1);         marker1_is_displayed = 1;       } else {         map.removeOverlay(marker1);         marker1_is_displayed = 0;       }     }     function checkbox2clicked() {       if (marker2_is_displayed == 0) {         map.addOverlay(marker2);         marker2_is_displayed = 1;       } else {         map.removeOverlay(marker2);         marker2_is_displayed = 0;       }     } function checkbox3clicked() {       if (marker3_is_displayed == 0) {         map.addOverlay(marker3);         marker3_is_displayed = 1;       } else {         map.removeOverlay(marker3);         marker3_is_displayed = 0;       }     } function checkbox4clicked() {       if (marker4_is_displayed == 0) {         map.addOverlay(marker4);         marker4_is_displayed = 1;       } else {         map.removeOverlay(marker4);         marker4_is_displayed = 0;       }     }     function checkbox5clicked() {       if (marker5_is_displayed == 0) {         map.addOverlay(marker5);         marker5_is_displayed = 1;       } else {         map.removeOverlay(marker5);         marker5_is_displayed = 0;       }     }     function checkbox6clicked() {       if (marker6_is_displayed == 0) {         map.addOverlay(marker6);         marker6_is_displayed = 1;       } else {         map.removeOverlay(marker6);         marker6_is_displayed = 0;       }     }     function checkbox7clicked() {       if (marker7_is_displayed == 0) {         map.addOverlay(marker7);         marker7_is_displayed = 1;       } else {         map.removeOverlay(marker7);         marker7_is_displayed = 0;       }     }    //]]>     </script> </body> </html>
 この市街地図での学習点は、最初の表示を航空写真と地図の合成(HYBRID)にすることと、番号入りのマークを表示することである。
 番号入りのマークを表示する方法については、以前のエントリーで記録している。
これだけのことをするために、基礎知識の少ない老人には、ずいぶん学習しなければならないことが多かった。痴呆予防には有効かもしれない。

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


2010年1月 3日

隠居のパソコン備忘録:Google Maps API を使った地図ページでの文字化け対策

 皆様、あけましておめでとうございます。今年も、よろしくお願いします。
 今年も、自分用の記録のために、ブログを続けたいと思います。ネット の世界の片隅に参加していることで、世の中の変化が、少しは肌で感じられるないかと不遜なことも考えています。

 GoogleMapsAPI を使った地図ページ、例えば、Studio YAMAKO「クロアチア・スロベニア・モンテネグロを巡る旅」は、GoogleMapsAPI を使いこなすためのtutorial の中から、自分でなんとか使えそうなサンプルを参考にというか、ほぼそのままに Copy&Paste して使っている。
 このページでは、Google Map をテーブルの中に表示しているが、ここで使っている表題の日本語が、場合によって文字化けを起こす現象が起きていた。
 文字化けを起こしている場合は、画面を右クリックし、出てくるポップアップ画面でエンコード→Unicode(UTF-8) を選択すれば治るのであるが、見にきてくれる人にお願いをするわけにはいかない。 
 そこで、何か方法はないかとネットサーチしてみると、上のHTML コードのなかの<head> ~</head> 部分に、その文書に関する日本語コード情報(メタ情報)を指定していなかったために起きたらしい。 つぎのようなメタコードを挿入すると、文字化けはなくなった。(と思う。)
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


 メールなどの文字化けについては、よく相談を受けるが原因がよく分からない場合が多い。多くは、使っているメーラーの設定によると思われるが、発信元・受信先を探らないとよく分からない。もう一つのよくある原因は、普通には使わない名前などで使われている特殊な2バイト文字が宛先とか文中に使われる場合である。また、ドイツ語のウムラクトつきu(ü)などでも、文字化けを起こすようである。

2009年3月31日

隠居のHP備忘録:mp3 streaming file(.wax) をウェブ・ページからリンクさせる

 レンタル・サーバーの容量に少し余裕があるので、自分用に Jazz 以外の mp3 ファイルをストリーミング化して、サーバー上におき、ウェブページからリンクボタンをクリックすると音楽流れるようにすることを試みた。
 もちろん、そのようなファイルを公開することは著作権に触れるので、そのファイルへは .htaccess を使って ID とパスワードがなければアクセス出来ないようにした。この方法については、別にエントリーを UP したい。

 以前に<MP3 のストリーミング・ファイルの作成>という記事をエントリーしているので、これを参考に同じようなストリーミング・ファイルを作成して試してみたが、うまく動かない。
 このとき、参考にさせてもらった英語のページがリンク切れになっている。それで新たにググッテいると、STREAMING MEDIA FILES ON THE WEB というページを見つけた。ここに示されている meta file (.wax) のコードは以前に使っていたコードと同じである。
<ASX VERSION="3.0"> 
      <Title>xyz</Title> 
      <ENTRY> 
      <REF HREF="http://www.example.com/xyz.wma" />
      </ENTRY> 
      </ASX> 
 だが、上手くいかない。以前に使っていた wax ファイルの中で、ひとつだけ動いてくれるファイルがある。よくよく見比べてみると、うまく動いてくれる wax ファイルは単純で<Title>xyz</Title> のタグがない。試しに、以前には動いていた wax ファイルから、<Title>xyz</Title> タグをはずしてみると動くようになった。どうやら、Webページの head 部分の <Title>abcdefg</Title> と競合しているためらしい。そこまでは分かったが、避ける方法が見つからないので、 wax ファイルから <Title>xyz</Title> タグをはずした。

  <Title>xyz</Title> をはずしても WindowsMediaPlayer では、曲名や Artist, 作曲者を表示してくれる。元となっている mp3 ファイルがそれらを属性として持っているためらしい。Title タグは是非とも必要ではないので、これで運用しようと思う。
 ただ、Internet Explorer、WindowsMediaPlayer という Microsoft の取り合わせでないと動作しない。

2008年8月 3日

隠居のお勉強:JavaScript(13) onerror

 梅雨明けから酷暑の日が続き、屋外での活動はほとんどできない。特に、ここ大阪堺市は全国的に見ても暑い都市で連日最高気温が35℃を超えている。老齢を自覚して、クーラーの効いた部屋で過ごすようにしている。

 幸いウェブを開いておれば退屈することはない。JavaScript の学習がおろそかになっていたので、例によって W3Schools の tutorial で再開することにした。今回は、前回に続いてエラー処理の script である。

 onerror イベントハンドラーは、エラーをキャッチしてメッセージを出す古くからの標準的な方法である。

 次はその使い方サンプルである。
<html>
<head>
<script type="text/javascript">
onerror=handleErr;
var txt="";

function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n";
txt+="Error: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="Line: " + l + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
return true;
}

function message()
{
adddlert("Welcome guest!");
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
</body>

</html>



上のスクリプトは、alert("Welcome guest!"); とすべきとろころが、adddlert("Welcome guest!"); となっているので、下のボタンをクリックするとスクリプトがエラーとなり、onerror イベントハンドラーが働き、エラーが表示される。



この間違ったスクリプトを訂正すると、"Welcome guest!" と本来のメッセージが表示され、エラーは表示されない。次のボタンをクリックしてみてください。



2008年7月27日

隠居のお勉強:JavaScript(12) throw

 MT のバージョンを 3.35 から 4.1 へアップグレードするのにずいぶん時間をとられて、続けていた JavaScript のお勉強がほったからしになっていた。
 過去の JavaSCript のエントリーを見直していると、 4.1 へアップグレードによってリンク切れを起こしていたり、必要なスクリプトがサーバーにアップされていなかったりしていた。それらを修復しながら復習することができた。

 W3School tutorial の続きで、今回は throw の勉強である。
  throw statement によって、例外処理ができる。前回の try....catch と一緒に使うと適切なエラー・メッセージによってプログラムを流すことができる。
 以下の例では、変数x に値を求め、x が 0 より小さかったり、10 より大きかったり、数字以外の文字がインプットされた場合に、それぞれにあったエラーを表示する。
 
<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","");
try
{ 
if(x>10)
  {
  throw "Err1";
  }
else if(x<0)
  {
  throw "Err2";
  }
else if(isNaN(x))
  {
  throw "Err3";
  }
}
catch(er)
{
if(er=="Err1")
  {
  alert("Error! The value is too high");
  }
if(er=="Err2")
  {
  alert("Error! The value is too low");
  }
if(er=="Err3")
  {
  alert("Error! The value is not a number");
  }
}
</script>
</body>
</html>


 上の例を実行するボタンを作ってみた。Script は外部化し<head> 部で呼び出している。 

 

 ボタンをクリックしたときに、上の js を実行するためには、関数化しておかねばならない。作った関数は以下である。
// throwEx sample
function throwEx()
{
  ・
  ・
(上の青字部分)
  ・
  ・
}


これを<body> で実行するボタン(上のボタン)を置く、HTML は、次のコードである。
<input type="button" onclick="throwEx()" value="throw statement Sample" />