webサービス上のkmlをgooglemapsに表示させたい
googlemapsとルート表示のwebapiをマッシュアップ
したいと考えています。
GGeoXmlでルートをmaps上に表示したく、
以下のようなコードを作りましたが
地図自体も表示されなくなってしまいました。
それほど詳しくないので、
わかりやすく教えていただけると助かります。
apikeyの部分はサービスを提供していただいて
いる身としての責任上mykeyと表示しておりますが
ご理解いただければと思います。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=mykey"
type="text/javascript" charset="utf-8"></script> <script type="text/javascript">
//<![CDATA[
function onLoad() {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(38.348, 140.839), 13);
}
var geoXml = new GGeoXml(http://api.cirius.co.jp/wrs/1.0.0/suuchi/lonlat/shortest_path.kml?start=140.839%2038.348&end=140.899%2038.355&sridIn=4301&api_key=mykey,
function(){
map.addOverlay(geoXml);
});
//]]>
</script>
</head>
<body onload="onLoad()">
<div id="map" style="width: 500px; height: 350px;"> </div>
</body>
</html>
以下はwebサービスのルート情報のkmlファイルです。
途中省略しております。
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head><body><kml xmlns="http://earth.google.com/kml/2.1">
<document>
<name>WebRouting Service</name>
<style id="LineStyle">
<LineStyle>
<color>7f0000ff</color>
<width>4</width>
</LineStyle>
</style>
<placemark>
<description>No+description+available</description>
<name>Shortest Path</name>
<styleurl>#LineStyle</styleurl>
<multigeometry>
<linestring>
<coordinates>
140.851,38.348 140.852,38.347
</coordinates>
</linestring>
<linestring>
<coordinates>
140.853,38.343 140.854,38.343
140.855,38.344 140.856,38.345
</coordinates>
</linestring>
<linestring>
<coordinates>
140.858,38.343 140.860,38.343
</coordinates>
</linestring>
<linestring>
<coordinates>
140.863,38.343 140.899,38.555
</coordinates>
</linestring>
</multigeometry>
</placemark>
</document>
</kml></body></html>
どなたか詳しい方、よろしくお願いします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_3_thumbnail_img_sm.png)
