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>
どなたか詳しい方、よろしくお願いします。
No.4ベストアンサー
- 回答日時:
自前のサーバーは入りません。
私も無料のレンタルサーバーを使っています。保存する仕組みは、PHPやcgiが使えないレンタル
サーバーだと無理ですが。自分の手でKMLをアップできるのなら
表示可能のはずです。その際、KMLのファイル名でなくURLを指定
してWebサーバー経由で読込みます。
以下リファレンスの抜粋です。
<class GGeoXml>
GGeoXml オブジェクトは地理的コンテンツをパブリックにアクセス可能なウェブサーバー上でホストされている XML ファイル (KML ファイルなど) の地図に追加します。これは、GOverlay インターフェースを実装し、このため GMap2.addOverlay() メソッドを使用して地図に追加されます。
===================
参考URL:http://code.google.com/intl/ja/apis/maps/documen …
No.3
- 回答日時:
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(){
のようにセットすると出来るのですが....
解決にいたってなくて申し訳ありません。
いろいろ試していただきうれしい限りです。
自分のjavascriptファイルは無料サーバ上のフォルダ内においてあり、
kmlファイルを同じフォルダ内に置くことはできますが、認識されていません。自前サーバーを作るしかないのでしょうか?
できれば保存の操作無しでいけるとありがたいですが・・・・
いずれにしてもご教授に心から感謝いたします!!!!!
No.2
- 回答日時:
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);
の後ろに入れてみたらどうでしょう?
分かりやすく丁寧な回答に感謝します!!
実際にご提案どおりにさせて頂きましたが、
やはり地図も表示されず残念ですがまだ未解決です。
三つ目のご回答に沿ってこれから試してみたいと思います。
知恵を拝借させていただき本当に助かっております!!!
No.1
- 回答日時:
kmlファイルって
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
で始めるのではないでしょうか?
質問に載せている例ではhtmlのような...
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
迷路探索プログラムを作るには...
-
カンマ区切りのデータを配列に...
-
JQueryでAjax通信をキャンセル...
-
readyStateが4にならない原因
-
フレーム内の要素へのXPATHはど...
-
[jQuery UI] sortableを使いaja...
-
JavascriptからPHPへのAjax通信...
-
jQuery toggle() 戻るで開いた...
-
階層別の組織図の自動作成について
-
要素内を常に一番下を表示させたい
-
IndexedDB を使ってファイルア...
-
.txtファイルの読み込み
-
スクリプトの外部からの読み込み
-
bxsliderで画像毎に表示時間を...
-
Javascriptを使ってQRコード読...
-
Selenium4でボタンをクリックで...
-
SQLのmaxで求めた値を変数に代...
-
FullCalendar の複数月表示につ...
-
メールを送信するボタンでOutlo...
-
日付が変わると自動更新
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
カンマ区切りのデータを配列に...
-
二つのbxsliderをレスポンシブ...
-
たくさんの経由地がある巡回ル...
-
迷路探索プログラムを作るには...
-
C言語の 配列の中 出力について
-
google maps api v3のルート検索
-
Google Maps:同マップ内でそれ...
-
Googleストリートビューの写真...
-
webサービス上のkmlをgooglemap...
-
Googleマップのウィンドウの表示
-
Haskellのsubtractについて
-
google maps 吹き出しカウント...
-
数字をピクチャボックスの上に...
-
GoogleMapの移動量
-
GoogleMapでアイコンを500件表...
-
googleマップが表示されない。
-
グーグルマップにマーカーを色...
-
ドラッグ & ドロップでのド...
-
JavascriptからPHPへのAjax通信...
-
階層別の組織図の自動作成について
おすすめ情報