« Google Maps テンプレート(4)Polylines、OverviewMapControl サンタカロリーナ・シャルドネ »
Google Maps テンプレート(5)XML読み込み
※html と xml および画像を一括したパッケージのダウンロードはこちら。
(5)XML読み込み - Sample
Google Mapsは専門知識のある人でないと出来ないのでは? というような敷居の高さを感じないでもないですが、ここもなるべく平易なひながたにしています。
外部からXMLファイルを呼び出します。マーカーの数が多い場合など、用途はいろいろ=XMLファイル・サンプル
・以下のテンプレートをコピーし、メモ帳などにペーストして★印の箇所を好きなように書き換えてください。「名前を付けて保存」するときは、文字コードを「UTF-8」とすることを忘れずに。
緯度(lat)と経度(lng)はこのツールで割り出してください。
注意: Google Page Creator(googlepages.com)でXMLを使うマップを作る場合、以下の記述に留意しましょう。
var xmlDoc = request.responseXML; これはダメ。表示されません
var xmlDoc = GXml.parse(request.responseText); これはOKです。
★ プルダウンのセレクトボックスによるサンプルもあります。
★ XML を使わないで項目表示する別のサンプルもあります。
★ 複数のXMLファイルを選択してロードする、いわばAJAX的なサンプルはこちらです。


わかりやすく説明して頂きありがとうございます。今、google MAPを「月と六ペソ」さんのサイトを読みながら、頑張っています。
XMLで読み込まないほうのサンプルでは、イメージ画像と、HPリンクがあるので、表示させて頂いたのですが、
XMLで読み込む方で、地図のふきだしに、イメージ画像と、HPリンクが出来ないかと考えているんですが、素人なので、全然わからないのです。
>> けいさん
XMLで読み込む方のサンプルを修正しておきました(渋谷駅のところに画像とリンクを組んであります)。
XMLは、そのままコピー・ペーストしないで、「ソース」から見るのがコツですね。
はじめまして。現在XML を使わないで項目表示するほうでソースをコピーさせて頂いて作っています。
噴出しをテーブルを使ってこんな感じに表示させたいのですが、http://zimotu.com/
javascriptの中にテーブルを作ろうとするとエラーが出てしまいます。もしお時間があればどこをいじったらいいのか教えて頂けないでしょうか。。
you さん
はじめまして。イメージとしては次のような感じでしょうか?
http://japonyol.net/editor/sidetable.html
ブラウザのメニュー「表示」の「ソース」から、議事堂のところを参照してください。
ダブルコーテーション=( " )と、シングルコーテーションを使い分けるのがコツでしょうかネ。
こんにちはー。ありがとうございます!
早速試してみたところ思い通りに吹き出しの中を変えられました^^
アイコンは自前のオリジナルを使用してたのですが今度はアイコンが変わらなくなってしまいました。。
いつも参考にさせて頂いております。おかげでXMLなどに興味をもちまして勉強させて頂いてます。
それでなのですがyouさんとは逆にXMLを使ってyouさんがやろうとしていたことは可能でしょうか。
お教え頂きたいと思います。
よろしくお願いします。
>> ルンさん
XMLで infoWindow を装飾するのは結構面倒ですね。いろんな方法があるとは思うのですが、
japonyol.net/editor/xml-table.html
こんな感じでしょうか。
XML は
japonyol.net/editor/sample.xml
です。javascript に書くほうがスマートかもしれません・・・
「月と六ペソ」さんのサイト非常にわかりやすく参考にさせていただいております^^
現在、PHP+MySQLでマップ情報を登録し、PHPでxmlを
生成したものを「月と六ペソ」さんのサンプルをもとに
GoogleMapに読み込ませているのですが、
それとは全く関係のない?情報ウィンドウの表示に関して
困っております。
私が原因かと思いましたが、こちらのページのサンプル
画面でも(こちらから見る限りですが)同様の現状が。。。
しかも、私の作成したものと「月と六ペソ」さんのサンプル画面のみで見られる現象です。。。
内容は、マップ内の情報ウィンドウの枠が1pxだけ
どうしてもずれて表示されます。。。
ブラウザはIE6.0です。
marker.openInfoWindowHtml()の中の問題ではなく
”外枠”の表示がどうしても崩れて見えます^^;
こちらキャプ画像です:http://www.livelog.jpn.org/zure2.jpg
枠がずれているのがわかりますでしょうか?・・・
いろいろとググってみたのですが、どうも同じ現象が
見当たらず、作業が止まってしまいました。。。
よろしければご教授いただけませんでしょうか?
>> まなさん
ご指摘ありがとうございます。私自身が Firefox を常用しているので気づきませんでした。
まず私の結論ですが、「しばらく様子を見る」です。
情報ウィンドウのレイアウトが一時的に崩れる現象は、しばしばあることだからです(Google 内部で API の仕様をいじくっている時間帯と想像されます)。
本日の場合、以下のブログ(cyberden さん)でも指摘されています。
http://blogs.dion.ne.jp/cyberden/archives/5537315.html
私が IE 7.0 にアップグレードする前(IE6.0のころ)は、当該サンプルで異常はありませんでした。1、2日様子を見て、もし直らないようであれば対策を練りたいと思います。
ただ、可能性としては、InfoWindowHtml を <div> で括っていない所為でしょうか・・・? ともあれ、しばしお待ちを。
ご丁寧にありがとうございます!
GoogleAPIの仕様側の事なのですね^^
そういわれてみれば確か「月と六ペソ」さんのサイトを
初めて拝見しましたのが2ヶ月ほど前だったのですが
その時は問題なく表示されておりました。
このまま様子を見てみます!
ご親切にありがとうございました^^
『情報ウィンドウの表示崩れ』の件解決しました!^^
「月と六ペソ」さんのサンプルの中で
マップを表示させるhtmlファイルの一行目に
「 」
の記述があるファイルのみ、情報ウィンドウが崩れて見えておりました。(IE6)
「月と六ペソ」さんのサンプルを参考に私が作成した
htmlファイルの一行目にも
「 」
の記述があり、はずすときれいに表示されました。
XMLファイルの読み込みには問題ありませんでした。
ひとまずは解決です。おさわがせいたしました^^;
すいません^^; 「 」の中は
「 <?xml version="1.0" encoding="utf-8" ?> 」
です^^;
お世話になっています。
月と六ペソ サンのサンプルの
XML読み込み での表示を勉強させて頂いています。
その中で 個々のデータにズームレベルと 写真表示を設定を出来るようにするには、どうしたら良いのでしょうか?
例として
渋谷は ズームレベル 17 で 写真で表示し
表参道 ズームレベル 12 で 地図と写真で表示したいのです。
色々やってみましたが、旨くいきません。
XMLデータは
zlev='17' MapTyp='G_SATELLITE_TYPE' を追加し
G02 Omotesando' eki='表参道' />
としました。
javascript の
function handleSelected(opt) の For 以下の記述が、どうしても分かりません
var lat = parseFloat(markers[i].getAttribute('lat'));
var lng = parseFloat(markers[i].getAttribute('lng'));
var point = new GLatLng(lat,lng);
var html = markers[i].getAttribute('html');
var eki = markers[i].getAttribute('eki');
var marker = createMarker(point,eki,html);
宜しくお願い致します。
>> SUN さん
うーん、考えたことがなかったですね・・・。正直なところ私もよくわかりません。
Google Group の以下のスレッドに該当するでしょうか?
Map Type
Zoom
お世話になります。
>Google Group の以下のスレッドに該当するでしょうか?
>Map Type
>Zoom
私は英語が苦手なので、翻訳してみましたが 大体そんな感じで、GISとして使用したいのです。
色々なサイトも閲覧させて頂きましたが、 どちらにも掲示されていませんでした。
色々 作っているうちに 欲張りですが、XMLに
1 マーカーの種類
2 噴出しに表示する画像 jpg等
等もデータとして書き込んでおき 表示できれば自分のイメージした奇麗なマップになるような気がします。
もっと勉強します。 ありがとうございました。
jpg で気が付いたのですが、 月と六ペソさんのページの jpg が全て非表示なのは、 IE だからですか?
Firefox をインストールしました。 ・・・まだ慣れないけど。 jpgが表示されました。
ご回答ありがとうございました。がんばってみます。
ところで、XMLファイルに別項目のtitleを追加してみたのですが、HTML上にうまく読み込まれませんでした。
function createMarker(point, name, html, title) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });
gmarkers[i] = marker;
htmls[i] = html;
sidebar_html += '<a href="javascript:myclick(' + i + ')">' + name + '<\/a>'+ title;
i++;
return marker;
}
undefinedと表示されてしまいます。XMLをみれていないてことになるのでしょうか。
難しいですね^^; もしよろしければご回答お願い致します。
↓これ消してしまったんですね。
http://japonyol.net/trace.html
大変、重宝して使わせていただいておりました。
もしよろしければソースだけでも公開していただけませんか?
>> ルンさん
意図されているのは次のようなものでしょうか。
http://japonyol.net/editor/xml-plus.html
>> プロさん
以下へ移動しました。
http://n.girasol.googlepages.com/tracer.html
ありがとうございます!
とても助かります!
はじめまして。
一点確認したく書き込みました。
-----------------------------------------
以下のテンプレートをコピーし、メモ帳などにペーストして★印の箇所を好きなように書き換えてください。
-----------------------------------------
と書いておりますが、テンプレートを配布していないのもをソースを読み取り利用することは可能でしょうか?
Google Maps API サンプル一覧のブルダウンを利用したいのですが。
もちろん貴サイトに情報源としてリンクさせていただきます。
Google Maps API サンプル一覧のソースを読み取り利用することは可能かどうか、返答いただけると幸いです。
よろしくお願い致します。
<< ABC さん
もちろん、すべてのサンプルをお使いいただいて結構ですよ。そもそも私もいろんなサイトを模倣して作っているわけですから。
Internet Explorer なら「表示(V)」から「ソース(C)」で、
Firefox なら「表示(V)」から「ページのソース(O)」で、開いてコピー&ペーストしてください。
あとはお好きなように書き換えていくだけです。
中には head の最後に Google Analytics のアクセス解析タグが入っているサンプルもありますので、このタグだけは削除してください。
特に情報源として明示していただかなくても結構ですよ(リンクをいただければそれはもちろん嬉しいことですけど)。
はじめまして。ひとつ教えて頂きたいのですが。
xmlファイルを読み込み複数のふきだしに他サイトへのリンクを張りたいのですが、その場合xmlファイルにどのように記述すればよろしいのでしょうか?javaを理解していないので質問がおかしいかもしれませんがよろしくご指導お願いします。
>> けん さん
次のページをご参照下さい。
http://japonyol.net/chile/
ここで使っている XML の例は以下です。
http://japonyol.net/chile/local.xml
メニューの「表示」から「ソース」を見てください。
メタ文字(<は < と、> は >)を使うことと、
2種のコーテーション(「 ' 」「 " 」)を使い分けるのがコツですね。
ありがとうございます。
さっそく使わせていただきます。
はじめまして。寮長と申します。
「Google Maps テンプレート(5)XML読み込み」を参考にさせて頂き、自分でマップを作ってみたのですが、FIREFOXでは通常通り表示できるのですが、IEではマップが表示されず「loading...」だけが二つ左右に表示されてしまいます。
作業としては、サンプルをそのままコピーし、取得したAPIkeyをいれ、eki.xmlの中の項目の名前を変更しました。色々原因を探してみたのですが、結局分からずじまいでした。
お時間ありましたら教えていただけませんでしょうか。宜しくお願いします。
>> 寮長さん
ソースを拝見しないと何とも申し上げにくいのですが、IE では以下の基本的な記述、
<!DOCTYPE>
<html>
<head>
</head>
<body>
</body>
</html>
いずれかが欠落すると表示されないおそれがあります。が、「Loading...」が出ているのなら、javascript あるいは XML のエラーでしょう。
XML は、コーテーション( ' や " )とかセミコロン( ; )などがひとつでも重複したり欠落すると問題を起こします。
XML の URL を Firefox で呼び出しエラー表示がなければ javascript です。
差し支えなければ n.girasol@gmail.com まで当該2ファイルをお送り下さい。ソースを見れば原因が判ると思います。
>>editorさん
ご指摘有難うございました!
もう一度見直してみたのですが、ソースではutf -8にしていたのですが、テキストエディタで保存するときの形式をutf-8にしていなかったのが原因でした。
きちんと表示されるようになりました。
ご丁寧に説明してくださり有難うございます!
もう一つヒントを頂きたいのですが、現在は右に表示している項目欄をマップの下に置き、各項目の右に住所と電話番号を記述したいのですが、方法はありますでしょうか?
>>editorさん
前回ご指導いただきありがとうございました。
もう一つ教えていただきたいのですが。
例えば「○○病院の場所」と書いたテキストをクリックするとgooglemapページが開き病院の場所を表示する。(マーカー吹き出しつき)
といったように別のページに書かれているテキストにgooglemapへのリンクをはることはできるのでしょうか?
再度ご指導よろしくお願いします。
>> 寮長さん
こんなあんばいでしょうかね。
http://japonyol.net/editor/xml_abajo.html
>> けんさん
Javascript へのリンク(function)はできないと思います(少なくとも私は存じません)。
もっとも単純な方法としては、こんなあんばいでしょうかね。
http://japonyol.net/editor/info_window.htm
>>editorさん
返事遅くなり申し訳ありません。
そうですか。お忙しい中超初心者の自分の質問にお答えいただき感謝です。
今回のサンプルも使用させていただきます。
ありがとうございました。
いつもお世話になっております(^ ^)
このページのサンプルのようにXMLのファイル読み込みを利用して、
http://japonyol.net/editor/side_indexed.html
の「大学」「官庁」「公園」のように項目に見出しをつけたいのですができますでしょうか。
お時間のあるときでかまいませんのでご教授宜しくお願いします。
連続ですいません。上記の質問に続くのですが、「大学」「官庁」「公園」の見出しがあるとすれば、その3つそれぞれに別のマーカーを表示させるのは可能でしょうか。
XMLを使用しないタイプですとeditorさんの作成されたサンプル通りに作れたのですが、XMLを利用する場合がよくわかりません。
宜しくお願いします!
>> 寮長さん
こんなあんばいでしょうかね。
http://japonyol.net/editor/side_index_xml.html
ちょっと雑な書き方ですが。
本当にいつも有難うございます。助かりました!
これからやってみます!
「月と六ペソ」さん、こんにちは。
とてもわかりやすいサイトの提供ありがとうございます。
現在、「世界の国」を参考に複数のXMLを読み込んで
ポイントを表示させる地図を作成しています。
「世界の国」はボタンになっていますが、
これをチェックボックスにして、チェックが入った項目のXMLの
内容だけ表示したいのですが、うまくいきません(TT)
まったくのド素人で申し訳ありませんが、どうすればよいか
教えてください。
よろしくお願いします。
>> めぐ さん
「世界の国」は AJAX ですが、この方式で複数の XML を同時に呼び出す方法を私は残念ながら存じません。
たとえば5個のXMLを用意し、チェックボックスにてすべてチェックが入ったならば、5つをまとめ合わせた1個のXML を呼び出すのと同じです。だから、以下の例の方法のように XML をひとつにして作るのが適当で、スマートじゃないかな、と思います。
http://japonyol.net/editor/mlb.html
ご検討下さい。
先日は、お返事いただきありがとうございます。
実はいろいろ試してみたのですが、まだ解決できてません・・・(TT)
やりたいことは、チェックボックスを利用してカテゴリーごとに
ポイントを呼び出し、さらにそのポイントの画像を建物によって
変更するというものです。
こういった動きは可能でしょうか?
>> めぐ さん
・・・意図されていることが判りにくいのですが、先の XML に画像のタグを書き込めばいいのではないかと思うのですが? 例として、
http://japonyol.net/chile/test1029.html
editorさま
助言ありがとうございました。
また言葉足らずですみません(><)
チェックボックスで選択したカテゴリに属する建物のポイントを
表示する際、そのポイントの画像を種類によって
分けたかったのです。
たとえば、保育所というカテゴリの中で私立と公立のポイント画像を
変えるなど。。。
ご紹介いただきましたページを参考に
なんとか解決できました。
ありがとうございます。
JavaScripts初挑戦で、かなり苦戦していますが
このサイトのおかげで大変助かりました。
これからも、分けわからん質問するかもしれませんが
どーーーかよろしくお願いします。
おじゃまします。。。
「解決しました」と書きましたが、またちがうところで
つまずいてます・・・。
スクリプトを外部ファイルにしたいのですが、
紹介していただいたページ↓を使ってやってみるとできませんでした。
http://japonyol.net/chile/test1029.html
どこか変更しなければならないのでしょうか?
>> めぐ さん
外部 js ファイルも UTF-8 にせにゃならんでしょうねぇ。ソース参照ください。
http://japonyol.net/chile/test1031.html
さっそくのお返事ありがとうございました。
おかげさまで解決しました。
とっても初歩的なミスでした。。。
ありがとうございました!
初めまして、よろしくお願い致します。
現在、google MAPを使ってMY旅行記を作ろうと思い、「月と六ペソ」さんのサイトを読みながら、いろいろ試しているのですが、カスタマイズに苦労しております。。
ご相談させて頂いてもよろしいでしょうか?
作りたいものとして、
・xml読み込み
・地図の位置の簡易検索機能(例えば、MAPをクリックすると位置を取れる、住所を入れると自動で位置を取得など)
・カテゴリー分け
・マーカー、等の装飾を変更
・ポップアップ内:タイトル、リンク、写真、ズームイン&アウト
・最初の立ち上げ位置(中心)を最新記事の場所に。
以下、可能なら(最終的にたどり着ければ・・・)
・MAPサイズがブラウザに追従(ペソさんの座標の取得ページのような)
・マウスポイントを移動させるとMAPが動く
以上を盛り込めれば、再考なのですが、現実は厳しく・・・
javascript,xmlは言葉程度の知識なので、いま猛烈にやっておりますが、
是非参考になりそうなある程度セットになっているものがありましたら、
教えて頂けますでしょうか?
よろしくお願い致します。
はじめまして!このサイトにたどり着き初心者でもすいすいすすむことが出来感謝しております。
ひとつ、ご教授くださいませ!
xmlファイルを読み込みふきだしにリンクを張ったのですが、
その場合にウィンドウ枠を指定することは出来るのでしょうか?
現在、新しいウィンドウが開きリンク先が表示されるのですが、
画面いっぱいに広かって開いてしまいます。
普通のhtmlならjsで指定できるのですが、
xmlファイルの中に書くとうまくいきません‥
お時間のある時で、かまいませんのでお返事お待ちしております。
>> みちよ さん
うーん、ずいぶん豪勢なリクエストですね・・・。残念ながら私のところでそれだけセットになっているものはありません。「サンプル一覧」に提示しています各機能を抱き合わせで、ということになりますね・・・けっこうタイヘンだと思います。
http://japonyol.net/editor/googlemaps.html
>> yoti さん
ウィンドウ枠の指定は javascript で、window.open() ...というのが一般的かと思いますが、XML にそれを書き込むのは出来ないと思います(少なくとも私はそういう手法を存じません)。
html に書き込む javascript ならば、理屈の上ではリンクごとにサイズを指定することも可能なのではないかと思いますが、ブラウザにも依存する(Firefox は大丈夫なのに IE6 はダメ、とか)と想像されます。
参考までに、私の場合、困ったときは以下を頼っています。
http://groups.google.com/group/Google-Maps-API/topics
お返事ありがとうございます。
あれから、ペソさんの野球場MAPを見つけ参考にさせて頂き、頑張っております!
orunica.com/loadmap2/index.html
※すみません!作業中なものでアイコン、xmlテキスト等そのまま使わせて頂いてますが、最終的には変更しますのでお許し下さい。
次のステップとして、xmlで画像を読み込みたいのですが、どうやってもうまくいきません。
japonyol.net/editor/xml-table.html
これを試してみたんですが、どうも駄目でして・・・。
このページの一番最初の質問に、「渋谷」がxmlで画像読み込みになっていると書かれていたんですが、見つからなくて、すみませんがもう一度教えて頂けますでしょうか?
よろしくお願い致します。
たびたび失礼致します。
xmlで画像読み込みですが、なんとかできました!
感動してます〜、これから次のステップですが、
サイトを参考にさせて頂き、ちょっとずつ頑張っていこうと思います。
またご相談させて頂くかと思いますが、そのときはよろしくお願い致します。
ありがとうございました。
>> みちよ さん
Google Maps API は、そうやって少しずつハマッていくようになってますね。
ご健闘をお祈りします。
早速のご回答ありがとうざいました。
そうですね〜やっぱりXMLの中にjavascriptは書き込めませんか、、、
代替え案考えてみます!
ありがとうございました。
お世話になっております(^ ^)
二ヶ月ほど前、こちらのサイトで教えていただきながらマップを作ることができました。
サーバーにアップし、何もいじらずにいた(と思うのですが)ところ、今日FIREFOXで見てみると「Loading」となり表示されなくなってしまいました。
IEでは普通に表示できています。
何か自分でしてしまったのでしょうか。
調べてみたのですがわかりませんでした・・・
初歩的な質問かも知れませんが、宜しく御願いします。
連続投稿申し訳ありません。
調べてみたところ、無事直りましたので勝手ながらご報告させて頂きました。
これからも宜しく御願いいたします(^ ^)
お世話になります。
以前はいろいろ助言いただきありがとうございます。
またまたお聞きしたいことがありまして・・・。
XMLを読み込み、チェックボックスを使ってカテゴリーごとに
ポイントを表示する地図を作成しました。
その地図のポイントをクリックし、吹き出しにあるリンクをクリックすると
別ウィンドウでその施設の詳細を掲載したいと思っています。
別ウィンドウで開いたページに施設ポイントが中心となった地図を
掲載したいのですが、同じXMLからピンポイントにデータをひっぱることが
できません。
現在は、別ウィンドウで開くページに
(script type="text/javascript")
map_default_id = "01_001"; //初期ID
(/script)
を設定し、以下のようなプログラムで呼び出そうと
しています。
ちなみにXMLはこんな感じです。
(marker id="01_001" category="group01" name="市役所" lat="34.733729" lng="135.406361"~~)
(~~には吹き出しに表示する内容を記載)
ようは「idが”XX”の場合は、そのタグの中にあるlatとlngを呼んできなさい」
と命令したいのです。
ややこしい質問で申し訳ありませんが、なにかヒントがありましたら
お教えください。よろしくお願いします。
---------------------------------------------
//===アイコン設定===//
var baseIcon = new GIcon();
baseIcon.iconSize = "./img/coco.gif";
baseIcon.iconSize = new GSize(22, 37);
baseIcon.iconAnchor = new GPoint(12, 14);
baseIcon.infoWindowAnchor = new GPoint(12, 1);
//===マーカ生成関数===//
function createMarker(point) {
var icon = new GIcon(baseIcon);
var marker = new GMarker(point,icon);
return marker;
}
//=== 地図生成 ===//
var map = new GMap2(document.getElementById("map_i"));
map.setCenter(point, 15);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl(true));
map.addControl(new GScaleControl());
//=== データ呼び出し ===//
GDownloadUrl("./xml/sisetu.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
var lat = parseFloat(markers[map_default_id].getAttribute("lat"));
var lng = parseFloat(markers[map_default_id].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var marker = createMarker(point);
map.addOverlay(marker);
}); // function(doc)
} // if (GBrowserIsCompatible())
} // function load()
----------------------------------------
>> めぐ さん
なるほど有効な利用方法ですね。私も試したいと思います。
が。
ただいま本業が多忙を極めて煮えきっておりまして、時間がありません。
もぉ煮え煮えで・・・ちょっと猶予を下さい。
お急ぎなら、以下を参照されることをオススメします。
http://groups.google.com/group/Google-Maps-API
煮え煮え・・・ですか(@@)
お仕事がんばってください!
参考URLありがとうございました。
英語が苦手な私にはとても使いこなすことは
できそうにありません・・・。
特に急ぎませんので、できましたら教えていただけますでしょうか(^^)
よろしくお願いします。
>> めぐ さん
いくつか試行錯誤したのですが、できませんでした(難しいです)。データベース(MySQL とか)のほうが、XML より出来る可能性があるのかもしれません。
あるいは、以下のような maxContent 機能で代用するとか如何でしょう。
http://japonyol.net/editor/archives/2007/11/info_windows_to_the_max.html
いろいろとありがとうございました。
やはり、難しいのですね・・・(TT)
maxContent 機能、勉強してみます。
大変参考にさせていただいています。
Google Maps API: MLB アメリカ大リーグ30球団・スタジアムマップ
http://japonyol.net/editor/mlb.html
でテストサンプルを作成中ですがエラーが出てしまいます。
document.getElementById(category + "box") has no properties
[Break on this error] document.getElementById(category+"box").checked = true;
document.getElementById(category + "box") has no properties
[Break on this error] document.getElementById(category+"box").checked = false;
チェックボックス制御ができていないのですがポイントを教えていただきたいと
思いお尋ねしました。
xmlにはcategoryを表示しています。
単に
function show(category)
function hide(category)
の設置場所が悪いだけなのでしょうか?
教えてください。
またロード時に
show("AmericanLeague"); チェックする
hide("NationalLeague"); チェックしない
がこちらのテストサンプルで利いていないのも不思議に思っています。
よろしくお願いします。
>> Little Google さん
ソースを拝見できないと何とも返事のしようがありません。
MLB のひな型としたのは以下です。ご参照ください。
http://googlemapsapi.blogspot.com/2007/04/v277-gmarker-show-hide-and-ishidden.html
ありがとうございます。
http://japonyol.net/editor/sample.php
にチェックボックス選択を行うとどのようになりますでしょうか?
たとえば
category="metro"
category="jr"
category="tokyu"
になります。
function show(category)
や
show("metro");
hide("jr");
hide("tokyu");
makeSidebar();
の設置場所がわかりません。
教えてください。
よろしゅうお願い申し上げます。
>> Little Google さん
"GDownloadUrl { }" の範囲内ですね。ソースを読めば判るはずです。
私GOOGLEMAPを使って世界遺産紹介するページを作りました。
http://www.ikugo.com/worldHeritage.php
このサイトからいろいろ勉強になりました。
いつも興味深く拝見しています。
またもやご教授いただきたくコメントさせて頂きましたm(_ _)m
このページのXMLを読み込むタイプをお手本にしてMAPを作成しているのですが、MAP内のマーカーをクリックすると出てくる吹き出しの中の文章を改行させて5行にしているのですが、行数が多くて吹き出しからはみ出してしまいます。
フォントサイズを小さく変えようかとしてみたのですが、変わりませんでした。。
どうか宜しく御願いします!
>> 寮長 さん
スタイルの適用で対処できると思います。
次のサンプルのソース17行目と46行目を参照してください。
http://japonyol.net/editor/xml_b.html
有難うございます!早速試してみたら出来ました!
CSSを埋め込む場所が全然わからなくてエラーにばかりなっていました。
本当にためになりましたm(_ _)m
「Google と国土地理院が業務提携した件について」楽しませていただきました。
素直に「へ〜」でした。
xmlで画像を読み込む方法を教えていただきたいのですが、最初の質問の、『「渋谷」がxmlで画像読み込み』の、「sample.xml」がサーバー上から消えているようです。
「みちよ」さんはできたようですが、わたしにはどうしてもできません。
画像の読み込みとリンクの設定の行だけでも結構ですので、よろしくお願いいたします。
>> アイ さん
xml ファイルをサーバーに上げました。ソースをご覧ください。
「xml ファイル」ありがとうございました。
実は、参考にさせていただいているページが下記でして、
http://japonyol.net/editor/radio.html
http://japonyol.net/editor/radio.xml
この中に、「photo」を表示したいと思っています。(できればリンクも)
アップしていただいた「xml」は、上記ページでの書き方とちょっと違うようで、色々挑戦してみたのですが力不足です。
もう少し頑張ってみますが、できればアドバイスいただければ幸いです。
>> アイ さん
html="<img src='ginza-mark.gif' width=32 height=32><br>銀座線 渋谷駅<br>G01 Shibuya"
html="<a href='http://japonyol.net/editor/' target='_blank'>表参道</a><br>G02 Omotesando"
こんな感じです。実際には、括弧は半角英数字で
< = &lt;
> = &gt;
と書かなければダメです
ありがとうございました。できました。
考え方は間違っていなかったのですが、タグの書き方と、クォーテーションが間違っていました。
xmlの書き方をしっかり理解せず、生かじりでやっていて大変失礼しました。
勉強になりました。