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

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 にしていくつもりである。

トラックバックURL

このエントリーのトラックバックURL:
http://n-shuhei.net/cgi/mt/mt-tb.cgi/2576

トラックバック

» 隠居のパソコン備忘録: Google Maps API V3 で Polyline を描く from Atelier
 自作地図を作成するのに便利していた Google Maps API のバージ... 続きを読む

» 隠居のパソコン備忘録: Google Maps API JS V3 での地図でマーカー地点をズームイン・アウトする from Atelier
 V3 にバージョンアップした Google Maps JS API で旅行地... 続きを読む

» 隠居の花見:泉北ニュータウン栂地区の桜(2012) from Atelier
 4月8日の週、ソメイヨシノは満開である。泉北ニュータウンの栂地区の桜を訪ね歩... 続きを読む

コメント

初めまして、白井と申します。

Google maps API v3を使って地元の防災マップを作成しようとしているのでが上手くいかず悩んでおります。

イメージ的には貴方のホームページにある 『ハチ高原近辺私的観光地図』のようなサイドバーがある地図で、ポイントをクリックすると危険箇所の情報が開くようにしたいと考えています。

取り敢えず、貴方のページを再現させようと思い、下記のようにやってみたのですが、上手くいきません。

① IEで 『ハチ高原近辺私的観光地図』ページを開き、開発者ツールでスクリプトタグから maps_hachi.htm をコピーして保存しました。

② http://n-shuhei.net/atelier/maps/hachi.xml でxmlファイルをコピーして保存しました。

③ 2つファイルを同じフォルダに入れて、アップロードしました。

しかし、maps_hachi.htm で、地図は表示されるのですが、サイドバーに表示されるはずのxmlデータが表示されません。

当方全くの初心者で、上記の方法が正解なのか、全くトンチンカンなことをやっているのかも判らない状態なのですが、もしよければアドバイスをお願い致します。

白井さん

地図に出てくる山小屋にいっていたため、返答が遅くなりました。

今、姫路市飾磨消防団の災害マップを見させていただきました。
私のものより、はるかに立派な地図ができているので、アドバイスするところはありません。

ブログにも書いている通り、私もずぶのシロウトですので、アドバイスできるか自信がありませんが、私なりにつまづいたところをお知らせします。

  • Javascript ライブラリーの downloadxml.js (maps_hachi.htm の8行目あたりにある。)をアップロードしてください。
    フルパスは、http://n-shuhei.net/atelier/V3test/downloadxml..jsです。文中の【lLoading the data from an XML file translated to v3】からもダウンロードできます。.
  • 文中の【Google MAPS JavaScript APIでのデバッグ】を開いて見ていただくと分かるとおもいますが、日本語のコードがすべて UTF-8 になっているでしょうか。私は、これに気づくのが遅れて四苦八苦しました。
  • その他、ファイルのありかへのパスなどでよくミスをしますので、そのへんも確認ください。

API V3 のコードについては、質問されてもわかりませんのであしからず。
私も、随分試行錯誤しました。

ご回答ありがとうございます。

試行錯誤の結果、再現することが出来ました!

でも、ポイント数が多いので、サイドバーの縦にズラーッと並んでしまいました。

今後は危険地帯をチェックボックスなどで絞り込んだり、スクロールバーを表示させるなどの工夫をしたいと思います。

いつになることやら(;^_^A  気長にやっていきます。

今回はありがとうございました。m(_ _)m

白井さん

うまく表示されたようで、良かったです。
スクロールバーがうまくいったら教えてください。

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)
 MovableType または TypeKey のサインインができない方には、「匿名でコメントする」をクリックください。スパム・コメントを防止するためにコメント入力欄の下のCaptcha:画像で表示されている文字入力をお願いしています。
 できれば、MovableType または TypeKey の登録をしていただければ、Captcha:画像で表示されている文字入力の必要はありません。
MovableType のアカウントの取得は、下のサインインの文字をクリックするとでる画面で「サインイン画面のアカウントがないときはサインアップしてください。」のサインアップをクリックすれば登録画面が表示されます。「ウェブサイトURL」には、http://n-shuhei.net/atelier/ と入力ください。
 また、TypeKey は、 TypeKey サインインをクリックし新規登録ボタンから無料で取得できます。取得された TypeKey で他の多くのブログにコメントができます。)