Google MapsにKMLのデータを表示する (v2,v3)

KMLファイルを使えばGoogleMapsのマーカー設定とかが凄い簡単にできるっていう話。
KMLはXMLのように書式が決まってて手打ちはだいぶややこしいんだけど、GoogleEarth使えば簡単に作れる。

GooleEarthを開くと左側に「場所」ってのがあって、マークされた目印とかが表示されていると思う。
デフォルトだとお気に入りの中に観光ツアーというモノがあります。

自分でポチポチマーキングしてもいいんだけど、手順を解説するのは本題から外れるので割愛。
詳しくはマニュアル参照で。
「場所」タブの横にあるコンテンツを追加を押すと、ユーザーが作ったデータをギャラリーからインポート出来る。
とりあえずサンプルとして28日間で日本一周を読み込でみると、保留って所に表示されると思う。

そしたら一番親のタイトルの所を右クリックして「名前をつけて場所を保存」を選ぶ。

ファイルタイプでkmlを選べばkmlファイルがエクスポートされます。

Google Maps APIでのKMLファイルのロード

前の手順でエクスポートしたkmlファイルを使えば、埋め込んであるGoogleMapsにGoogleEarthの情報をそっくりそのまま表示出来る。

Maps API V2

V2はDeprecatedになってるんだけど一応書いておく。

new geoXml = new google.maps.GeoXml("KMLファイルのアドレス");
map.addOverlay(geoXml);

GGeoXmlクラスはKMLファイルを読み込むとGOverlayオブジェクトを返すので、addOverlayするだけでデータが反映されるわけです。
クリックとかinfowindowとかの設定は何もいらないし、アイコンはEarthで「場所のプロパティ」で設定すればそれが使用される。

Maps API V3

軽くV3について説明しとくと

APIキーが不要になった
モバイル端末とかの位置情報に対応
MVCフレームワーク改良で中身が激変

こんな感じで、いろいろ変わってます。

基本ソース：

<html> 
<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: KmlLayer KML</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
function initialize() {
  var chicago = new google.maps.LatLng(41.875696,-87.624207);
  var myOptions = {
    zoom: 11,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
  <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 
</html>

V3でも上のGeoXmlが使えるんだけど、非推奨なんでV3のKmlLayerクラスを使う。

var ctaLayer = new google.maps.KmlLayer('KMLファイルのアドレス');
ctaLayer.setMap(map);

GoogleのサンプルにFlickerのRSSを読み込んでるマップがあるように
KML形式であれば他のサービスが提供するデータも使えるので便利。

Google MapsにKMLのデータを表示する (v2,v3)

Google Maps APIでのKMLファイルのロード

Maps API V2

Maps API V3

関連