2012年6月25日月曜日

Google Maps JavaScript API V3のKmlLayerについて


Google Maps JavaScript API V3のKmlLayer

KmlLayer オブジェクトは、KML と GeoRSS データ形式をサポートしていて、どちらのファイルを指定しても、オーバーレイとして取り込むことができる。

では早速、KMLでオーバーレイを追加してみた。
追加したデータは私がつくっている金沢市 コインパーキング&レンタサイクル「まちのり」のkmlデータ。


























ううーん。KMLを読み込むと真っ白になる!!!!
なぜ???
ローカルにHTMLとして保存したら表示できる!!!
どういうこと???
もしかしてbloggerでの表示はきびしいのか?

ローカル表示















とりあえずソースは以下の通り。
----

var map;

//座標一覧
var kanazawa = new google.maps.LatLng(36.564139, 136.659402);

function initialize10() {

  var myOptions = {
    zoom: 11,
    center: kanazawa ,
    mapTypeId: google.maps.MapTypeId.ROADMAP
   
  };

  map = new google.maps.Map(document.getElementById("map_canvas10"),myOptions);
  //KMLの指定
  var kmlLayers = new google.maps.KmlLayer('https://maps.google.co.jp/maps/ms?authuser=0&vps=2&hl=ja&brcurrent=h3,0x5ff8beaf3b742b4f:0xa41b1476580dbbbd&ie=UTF8&msa=0&output=kml&msid=202602666216122263377.0004c1c8172c9cf0370f3',
  {suppressInfoWindows: true,map: map});

  //マーカーをクリックしたときの処理
  google.maps.event.addListener(kmlLayers, 'click', function(kmlEvent) {
    var text = kmlEvent.featureData.description;
    showInDiv(text);
  });
}

function showInDiv(text) {
  var sidediv = document.getElementById('contentWindow');
  sidediv.innerHTML = text;
}

google.maps.event.addDomListener(window, 'load', initialize10);


----

0 件のコメント:

コメントを投稿