KMLデータを読み込み表示する(折れ線表示)

説明

KMLデータで折れ線を表示するにはLineStringタグを使います。LineStringタグ内にcoordinatesタグを記述します。coordinatesタグ内では「経度,緯度,高度」の順番で場所を指定します。改行や半角空白で区切って次の場所を記述します。これを繰り返すことで地図上に折れ線を表示することができます。
Google API Expertが解説する Google Maps APIプログラミングガイド Google API Expertが解説する Google Maps APIプログラミングガイド。Google Maps API Expertが最新のGoogle Maps API等について解説しています。
アマゾンで購入する

サンプルコード [実行]

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Google Maps API ver 3 Sample/グーグルマップAPIサンプル/Google Maps API样品</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="gmap"></div>
<script type="text/javascript">
var map = new google.maps.Map(
document.getElementById("gmap"),{
zoom : 10,
center : new google.maps.LatLng(0,0),
mapTypeId : google.maps.MapTypeId.ROADMAP
}
);
// KML読み込み表示
var ctime = (new Date()).getTime();
var myKMLLayer = new google.maps.KmlLayer("http://www.openspc2.org/reibun/Google/Maps/API/ver3/code/map/KML/0004/sample/station.kml?t="+ctime);
myKMLLayer.setMap(map);
</script>
</body>
</html>

■KML
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<name>test</name>
<description>line sample</description>
<LineString>
<extrude>1</extrude>
<tessellate>1</tessellate>
<altitudeMode>absolute</altitudeMode>
<coordinates>
135,36,2000
135.5,35,2000
136,36,2000
136.5,35,2000
</coordinates>
</LineString>
</Placemark>
</kml>