Google Earth APIのサンプルを読む その１

妻「実家に帰らせていただきます。」 　というのはネタですが、お盆で妻は実家へ。時間が出来たので久々にブログの更新をしようと思い立ちました。 　というわけで、Google Earth APIのサンプルを読んで、使い方を学んでみようと思います。ちなみに、Google Earth APIのリファレンスが公開されていましたので、そちらも要チェックです。 　「別に、GoogleEarthAPIではなく、Google Maps APIで良いんじゃない？」みたいな部分もあろうかと思いますが、そういうことは考えないことにします。 http://cubic-sight.net/kura/blog/080810/index.html 　動作としては、Yahoo!ローカルサーチで東京のある地点の緯度経度をクーポン検索し、それをGoogleEarth上に展開。その後、最初のアイテムの緯度をポップアップするという感じです。 　javascriptの記述をまとめたものはこちらです。中身を順に見ていきます。

google.load("earth", "1");
var ge = null;
function init() {
   google.earth.createInstance("map3d", initCallback, failureCallback);
}
function initCallback(object) {
  ge = object;
  ge.getWindow().setVisibility(true);
}
function failureCallback(object) {
}

まずは、Google Earth APIを利用するための初期化部分です。サンプル通りです。

function setplacemark(xmldata){
  var xml = xmldata.responseXML;
  var ydata = xml.getElementsByTagName("Item");
  var feature =  ge.getFeatures();　→①
  for(var i = 0; i <>
    var name = ydata[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue;
    var wgs = ydata[i].getElementsByTagName("DatumWgs84");
    var latitude = wgs[0].getElementsByTagName("Lat")[0].childNodes[0].nodeValue;
    var longitude = wgs[0].getElementsByTagName("Lon")[0].childNodes[0].nodeValue;
    var placemark = ge.createPlacemark("");　→②
    placemark.setName(name);
    feature.appendChild(placemark);　→③
    var item = feature.getChildNodes().getLength();
    var point = ge.createPoint("");　→④
    point.setLatitude(latitude);
    point.setLongitude(longitude);
    placemark.setGeometry(point);　→⑤
    var balloon = ge.createFeatureBalloon('');
    balloon.setFeature(placemark);
    placemark.setDescription(item);
    ge.setBalloon(balloon);
  }
  window.alert(feature.getChildNodes().item(0).getGeometry().getLatitude());
}

Google Earth APIと関係の無いXMLデータの取得などもあるのでゴチャゴチャしています。番号を振りましたので、番号順に見ていきます。 ①Placemarkの入れ子としてFeaturesを作ります。リファレンスを見るとFolderとかDocumentといったところも使えるようですが、ここでは試さずに、直接Featuresを呼んでしまいます。 ②Placemarkを作ります。次の行ではPlacemarkの名前をつけています。 ③FeaturesにPlacemarkをしまいます。 ④ここからPlacemarkに緯度・経度を設定するのに使うPointを作成します。 ⑤Placemarkに先ほど作ったPointを設定します。 　とりあえず、Placemarkを設定するのはこんな感じです（他のitem数を得たり、緯度を得たりするのはまた今度。）。抽象タグまで含めてKMLのリファレンスを念頭に置いておくと、しっくりくるような気がします。