サイドバー付きGoogle Mapについて
初めまして～
Google maps api v3 初心者です。
どうかよろしくお願いいたします。
How to本でも紹介されているソースを元に
サイドバー付き地図を作っています。
サイドバーをclickからmouseoverに変更し
mouseoverで情報ウィンドウを表示し
clickで、リンクに飛ばそうとしています。
が、サイドバーの<li>を作る過程で
リンク先のURLを読み込むことができません。
手でリストを作っておいて、
clickでリンクへ飛んで
mouseover時に情報ウィンドウ表示でも構いません。
どなたかお力添えをお願いいたします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
<!--
body {
background-color: #ffffff; font-size: 11px; font-family: "メイリオ", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック ", Arial, sans-serif; text-align: left;
}
#myInfo img{
width:200px;height:160px;border:none;
}
#myInfo span{
font-size:16px;font-weight:bold;
}
#myInfo a{
font-size:12px;
}
-->
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var stationList = [
{"latlng":[43.40559401552279,141.4347595785141],name:"厚田公園",myStr:"http://www.hokudai.ac.jp/",myImg:""},
{"latlng":[43.40450276438633,141.43127270679474],name:"厚田公園キャンプ場"},
]
var infoWnd, mapCanvas;
function initialize() {
var mapDiv = document.getElementById("map_canvas");
mapCanvas = new google.maps.Map(mapDiv);
mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);
infoWnd = new google.maps.InfoWindow();
//■地図上にマーカーを配置していく
var bounds = new google.maps.LatLngBounds();
var station, i, latlng;
for (i in stationList) {
//■マーカーを作成
station = stationList[i];
latlng = new google.maps.LatLng(station.latlng[0], station.latlng[1]);
bounds.extend(latlng);
var marker = createMarker(
mapCanvas, latlng, station.name,station.myStr,station.myImg
);
//■サイドバーのボタンを作成
createMarkerButton(marker);
}
//■マーカーが全て収まるように地図の中心とズームを調整して表示
mapCanvas.fitBounds(bounds);
}
function createMarker(map, latlng, title,myStr,myImg) {
//■マーカーを作成
var marker = new google.maps.Marker({
position : latlng,
map : map,
title : title,
content:myStr,
content:myImg
});
//■マーカーがクリックされたら、情報ウィンドウを表示
google.maps.event.addListener(marker, "click", function(){
infoWnd.setContent('<div id="myInfo"><span>' + title + "</span><br><a href="+myStr+ ">"+"<img src="+myImg+"><br>"+"詳細を開く</a>"+ "</title></div>");
infoWnd.open(map, marker);
});
return marker;
}
function createMarkerButton(marker) {
//■サイドバーにマーカ一覧を作る
var ul = document.getElementById("marker_list");
var li = document.createElement("li");
var title = marker.getTitle();
li.innerHTML = title;
ul.appendChild(li);
//■サイドバーがクリックされたら、マーカーを擬似クリック ★clickをmouseoverに改変
google.maps.event.addDomListener(li, "mouseover", function(){
google.maps.event.trigger(marker, "click");
});
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
<style type="text/css">
<!--
#map_canvas {
width: 75%;
height: 500px;
float: left;
}
ul#marker_list {
padding:0;
margin: 0;
width: 23%;
height: 500px;
float: right;
}
ul#marker_list li {
list-style: none;
border: 1px solid #ccc;
cursor: pointer;
background-color: #eeeeee;
}
-->
</style>
</head>
<body>
<DIV align="center">
<TABLE>
<TR>
<TD width="600" valign="top">
<DIV id="map_canvas" style="width:600px; height:400px;float: left" align="left"></DIV>
</TD>
<TD width="250" valign="top" align="left">
<ul id="marker_list" style="width:250px;float: right; font-size:13px;"></ul>
</TD>
</TR>
</TABLE>
</DIV>
</body>
</html>
お礼
そうですか。ちなみに私の場合は外部cssファイルにdivの幅を指定しているのですが、その場合はやっぱり 時々はみ出してしまいます。 外部cssファイルはなく、divタグに直接widthを記述 しなければいけないんでしょうか？とりあえず試して みます。 どうも有り難うございました。