webサービス上のkmlをgooglemapsに表示させたい

解決済

質問者：aaasssdddf
質問日時：2009/01/06 15:15
回答数：4件

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.dt …
<html>
<head>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=myk …
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/ …
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>

どなたか詳しい方、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： yyr446
回答日時：2009/01/08 10:59

自前のサーバーは入りません。

私も無料のレンタルサーバーを
使っています。保存する仕組みは、PHPやcgiが使えないレンタル
サーバーだと無理ですが。自分の手でKMLをアップできるのなら
表示可能のはずです。その際、KMLのファイル名でなくURLを指定
してWebサーバー経由で読込みます。
以下リファレンスの抜粋です。
＜class GGeoXml＞
GGeoXml オブジェクトは地理的コンテンツをパブリックにアクセス可能なウェブサーバー上でホストされている XML ファイル (KML ファイルなど) の地図に追加します。これは、GOverlay インターフェースを実装し、このため GMap2.addOverlay() メソッドを使用して地図に追加されます。
====＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

参考URL：http://code.google.com/intl/ja/apis/maps/documen …

- 0
- 件

通報する

この回答へのお礼

何とか表示できました！
何度も分かりやすく教えていただき
本当に助かりました。
どうもありがとうございました！！

通報する

お礼日時：2009/01/08 23:22

No.3

回答者： yyr446
回答日時：2009/01/07 15:53

No1,No2です。

時間があったので色々試し手見たのですが、
GGeoXmlのURLに直接
"http://api.cirius.co.jp/wrs/1.0.0/suuchi/lonlat/ …
をセットすると何故かうまくいかないですね。MapApiでエラーになります。同期が取れないみたいです。
"http://api.cirius.co.jp/wrs/1.0.0/suuchi/lonlat/ …
の結果を、いったんそのまま保存して、保存したものを
var geoXml = new GGeoXml("http://myweb/shortest_path.kml",
function(){
のようにセットすると出来るのですが．．．．
解決にいたってなくて申し訳ありません。

- 0
- 件

通報する

この回答へのお礼

いろいろ試していただきうれしい限りです。
自分のjavascriptファイルは無料サーバ上のフォルダ内においてあり、
kmlファイルを同じフォルダ内に置くことはできますが、認識されていません。自前サーバーを作るしかないのでしょうか？
できれば保存の操作無しでいけるとありがたいですが・・・・
いずれにしてもご教授に心から感謝いたします！！！！！

通報する

お礼日時：2009/01/07 19:04

No.2

回答者： yyr446
回答日時：2009/01/07 14:43

No1の補足です。

KMLファイルのタグ名は大文字小文字は区別されます
ので注意してください、（xhtmlとは違います。）
例だと以下の様なkmlファイルを作れば表示できます。
<?xml version="1.0" encoding="UTF-8"?>
<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>
<name>Shortest Path</name>
<description>No+description+available</description>
<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>

ちなみに、JAVASCRIPTの方は、
var geoXml = new GGeoXml(kmlファイルのURL名,
　function(){
map.clearOverlays();
map.addOverlay(geoXml);
map.panTo(geoXml.getDefaultCenter());
map.setZoom(map.getBoundsZoomLevel(geoXml.getDefaultBounds()));
geoXml.show();
});
みたいにしてfunction onLoad()の中の
map.setCenter(new GLatLng(38.348, 140.839), 13);
の後ろに入れてみたらどうでしょう？