ゼロワンさん、こんにちは。
KMLファイルを地理院地図の上に表示する方法は、
http://anineco.nyanta.jp/omap.htmlで説明しています。
簡単にできるはずなので、まずはそちらを試して頂けませんか？
なお、KMLファイルを呼び出す方法ですが、
ダウンロードのページから、gpsweb-1.0.zip をダウンロードして展開すると、
js/omap.js というファイルがあり、この中にKMLファイルを呼び出す
JavaScriptコードが書かれていますので、これが参考になると思います。
具体的には下記の箇所です。
...(省略).....
var kmlLayer = new OpenLayers.Layer.Vector('GPSデータ', {
projection: proj_4326,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: param.url,
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true,
maxDepth: 2
})
})
});
map.addLayer(kmlLayer);
.....(省略).....
param.url は JavaScript の変数で、KMLファイルのURLを指定します。
js/omap.js はHTMLファイルから呼び出して使うことを前提に作っていますので、
書き換えは不要です。omap_ex1.html の方を次のように書き換えて下さい、
-----
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>地理院地図版ルート地図</title>
<script type="text/javascript" src="//map.jpn.org/sys/OpenLayers-2.13.1/OpenLayers.gsimaps.js"></script>
<script type="text/javascript" src="js/omap.js"></script>
<script type="text/javascript">//<![CDATA[
window.onload = function() {
init_omap({
div: 'map_gsimap',
lon: 131.081657, lat: 33.110523, zoom: 12, ★ここを書き換える
url: 'example/routemap.kml' ★ここをKMLファイルのURL（ただし相対URLのみ）に書き換える
});
};
//]]></script>
</head>
<body>
<div id="map_gsimap" style="width: 640px; height: 480px;">
</div>
</body>
</html>
-----