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

　
　自作地図を作成するのに便利していた Google Maps API のバージョンが、 V2 から V3 に大幅に変更され、来年５月には 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 というライブラリーが使われている。どうも、ｊQuery の方が本流らしいが、私にとっては、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 の学習も再開せねばと思うが、なにしろやりたいことが多すぎる。
　来年５月までに、順次 V2 の地図を V3 にしていくつもりである。

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

タグ:

トラックバック

コメント

コメントする