サイドバー表示をして項目を選ぶと吹き出しが表示したい。
708
前回、XMLを読み込んでマーカを表示、マーカの吹き出し内に写真を表示というのを質問させてらいとてもたすかりました。
次のステップで、地図の横にサイドバーを表示し、項目をクリックすると表示されたマーカーに行き、吹き出しが表示されるとのを取りかかってたのですが、
どうも上手くいきません。
例として http://japonyol.net/editor/archives/2006/04/google_maps_5xml.html
このようなサイドバーを付けたいです。
CSSを外部ファイルとしてあり、
div#sidebar {
border: 1px solid #666;
overflow:auto;
}
だけがCSSファイルに入っています。
どこをどのように加えたらいいのか教えてもらえたら幸いです。
どうかよろしくお願いします。
Masashi.K
こんにちは。『GEvent.trigger( marker, 'click' );』を使えばできますよ。
たぶんこれが一番簡単です。
過去ログだと、この辺りを参考にしてください。
http://groups.google.com/group/Google-Maps-API-Japan/browse_thread/thread/9d483fb42e43526f/8be9b61c778c049d
使わない方法だったら、↓この辺。
http://googlemaps.googlermania.com/map_example_5.html
function click_function(){
marker.openInfoWindow("開く");
}
<a href="javascript:void(0);" onclick="javascript:click_function();">テス
ト</a>
708
ＨＰのCSSは少しわかるのですが、プログラム系は初心者なので飲み込み遅いのでいつも細かい返事とても嬉しいです。
GEvent.trigger( marker, 'click' ）を使ってソース書いてみたんですが、表示されなくなってしました。
なんとなく言いたいのは分かるのですがどこが違うのが全くわかりません。。。
ソース張って見ますので違う所ありましたご指摘よろしくお願いします。
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="http://maps.google.com/maps?
file=api&v=2&key=ABQIAAAA--
gvrL_2oG0EQ5Fz9r1PpxRp_abyFQG97ZA5BEvZQv4Jiu-
lAhT_qpgSxAeBWavNk_kS43FGZ3FeNQ"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load(){
if (GBrowserIsCompatible()) {
var sidebar_html = "";
var gmarkers = [];
var htmls = [];
var i = 0;
//===== 基礎部分、中心座標とズームレベル
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.6588, 139.745407), 16);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
//----- XMLを読み込んで、地図にマーカを追加 ------//
GDownloadUrl("g_map.xml",function(data, responseCode) { //指定されたURLの
データを読み込み
var xmlDoc = GXml.parse(data); //XMLテキストをXMLオブジェクト (DOM) に変換
var markers =
xmlDoc.documentElement.getElementsByTagName("marker"); //markerタグの位
置情報を取り出し配列にいれる
for (var i = 0; i < markers.length; i++) { //位置情報を配列からとりだ
す
var mpoint = new GLatLng( //地図上の緯度経度を指定
markers[i].getAttribute("lat"),
markers[i].getAttribute("lng")
); //位置情報から緯度と経度をlat,lngで取り出し、浮動小数点型の数値に変換
//位置情報から緯度と経度をlat,lngで取り出し
var daimei=markers[i].getAttribute("daimei");
var name=markers[i].getAttribute("name");
var photo=markers[i].getAttribute("photo");
var masege=markers[i].getAttribute("masege");
var marker = createMarker(mpoint, daimei, name, photo, masege);
map.addOverlay(marker); //マーカーの描画
}
});
//====moveendイベントで中心の座標を表示しています。
GEvent.addListener(map, 'moveend',
function() {
var xy = map.getCenter();
document.getElementById("show_x").innerHTML = xy.lng();
document.getElementById("show_y").innerHTML = xy.lat();
});
}
}
function createMarker(mpoint, daimei, name, photo, masege) {
//----- マーカを作る ------//
//表示するHTMLを作成
var html="<div><b>"+daimei+"</b></div>"
+"<div>"+name+"</div>"
+"<p>"
+"<img src='"+photo+"' ></center>"
+"</p>"
+"<div>"+masege+"</div>";
//マーカを作成
var marker = new GMarker(mpoint); //地図にマーカーを追加し表示
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html); //マーカー上に情報ウィンドウを表示
});
gmarkers[i] = marker;
side_bar_html += '<a href="javascript:myclick(' + i + ')">' +
name + '<\/a><br \/>';
i++;
return marker;
}
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
}
// ===== サイドバー書き出し=====
document.getElementById("side_bar").innerHTML =
side_bar_html;
//]]>
</script>
</head>
^<body onload="load()" onunload="GUnload()">
<table >
<tr>
<td valign="top"><div id="side_bar" style="overflow:auto;width:
88px;height:348px;"></div></td>
</tr>
</table>
<P>x</P><DIV id="show_x"></DIV>
<P>y</P><DIV id="show_y"></DIV>
</body>
</html>
Masashi.K
えっと、いろいろと初心者が陥りやすいポイントにはまっていました。
とりあえず、コードだけ貼っておきます。
また後でポイントの解説をしますので、とりあえずご自分のソースと見比べてみてください。
===========================================================================
<!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" xmlns:v="urn:schemas-
microsoft-com:vml" >
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<script src="http://maps.google.com/maps?
file=api&v=2&key=[APIキー]"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
side_bar_html = "";
gmarkers = [];
htmls = [];
i = 0;
function load(){
if (GBrowserIsCompatible()) {
//===== 基礎部分、中心座標とズームレベル
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.6588, 139.745407), 16);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
//----- XMLを読み込んで、地図にマーカを追加 ------//
GDownloadUrl("g_map.xml",function(data, responseCode) {
//指定されたURLのデータを読み込み
var xmlDoc = GXml.parse(data);
//XMLテキストをXMLオブジェクト (DOM) に変換
var markers =
xmlDoc.documentElement.getElementsByTagName("marker");
//markerタグの位置情報を取り出し配列にいれる
for (var i = 0; i < markers.length; i++) {
//位置情報を配列からとりだす
var mpoint = new GLatLng(
markers[i].getAttribute("lat"),
markers[i].getAttribute("lng")
);
//位置情報から緯度と経度をlat,lngで取り出し
var daimei=markers[i].getAttribute("daiemi");
var name=markers[i].getAttribute("name");
var photo=markers[i].getAttribute("photo");
var masege=markers[i].getAttribute("masege");
var marker = createMarker(mpoint, daimei, name, photo,
masege);
map.addOverlay(marker); //マーカーの描画
}
// ===== サイドバー書き出し=====
document.getElementById("side_bar").innerHTML =
side_bar_html;
});
//====moveendイベントで中心の座標を表示しています。
GEvent.addListener(map, 'moveend', function() {
var xy = map.getCenter();
document.getElementById("show_x").innerHTML = xy.lng();
document.getElementById("show_y").innerHTML = xy.lat();
});
}
}
//----- マーカを作る ------//
function createMarker(mpoint, daimei, name, photo, masege) {
//表示するHTMLを作成
var html="<div><b>"+daimei+"</b></div>"
+"<div>"+name+"</div>"
+"<p>"
+"<img src='"+photo+"' ></center>"
+"</p>"
+"<div>"+masege+"</div>";
//マーカを作成
var marker = new GMarker(mpoint); //地図にマーカーを追加し表示
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html); //マーカー上に情報ウィンドウを表示
});
gmarkers[i] = marker;
side_bar_html += '<a href="javascript:myclick(' + i + ')">' +
name + '<\/a><br \/>';
i++;
return marker;
}
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<table >
<tr>
<td><div id="map" style="width:500px;height:500px;"></div></td>
708
Masashi.Kさん、ありがとうございました。
照らし会わせたらコードの書く場所、いらないコード？がありました。
まだまだ勉強不足です。。。。
今後の為に、ポイントなんどあったら教えてください。
また、分からないことあったら聞くからもしれませんがその時はよろしくお願いします。