サイドバー付きGoogle Mapについて

解決済

質問者：kiyo4rou
質問日時：2013/01/16 08:45
回答数：3件

初めまして～
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">

</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" …
<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">

</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>

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3ベストアンサー

回答者： fujillin
回答日時：2013/02/01 12:56

ANo2です。

補足が付いたのを気付きませんでした。

＞「理屈」を教えていただくのではなくてソースをご教授いただけないでしょうか
とのことなので。（変数名は変えています）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">

</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" …

<script type="text/javascript">
function initialize(map, list){

function createMarker(marker){
var mark = new google.maps.Marker(marker);
mark.setMap(mapCanvas);
google.maps.event.addListener(mark, "click", function(){showInfo(marker);});
}

function createSideList(marker){
var li = document.createElement("li");
var anchor = document.createElement("a");
anchor.href = marker.href;
anchor.appendChild(document.createTextNode(marker.title));
li.appendChild(anchor);
markerList.appendChild(li);
google.maps.event.addDomListener(li, "mouseover", function(){showInfo(marker);});
}

function showInfo(marker){
infoWnd.setOptions(marker);
infoWnd.open(mapCanvas);
}

var markerData = [
{lat:43.4056, lng:141.4348, title:"厚田公園",
href:"http://www.hokudai.ac.jp/", img:"A.jpg"},
{lat:43.4045, lng:141.4313, title:"厚田公園キャンプ場",
href:"http://www.google.co.jp/", img:"B.jpg"}
];

var mapCanvas = new google.maps.Map(document.getElementById(map));
mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);
var bounds = new google.maps.LatLngBounds();
var infoWnd = new google.maps.InfoWindow();
var markerList = document.getElementById(list);

for(var i=0, marker; marker=markerData[i++];){
marker.position = new google.maps.LatLng(marker.lat, marker.lng);
bounds.extend(marker.position);
var content = '<div id="infoWindow"><span>' + marker.title + '<' + '/span><br>';
content += '<a href="' + marker.href + '"><img src="' + marker.img + '"><br>';
content += '詳細を開く<' + '/a><' + '/div>';
marker.content = content;
createMarker(marker);
createSideList(marker);
}

mapCanvas.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", function(){
initialize("map_canvas", "marker_list")
});
</script>
</head>
<body>

<div id="map_box" >
<div id="map_canvas" align="left"></div>
<ul id="marker_list"></ul>
</div>

</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
想定通りに動いています。

虫がよすぎた・・・と他力本願を諦めて
4000円もする本を買い込んで、
一人で悩んでいたところに
救いの手を差し伸べていただいて、
本当に感謝しています。

scriptの部分は跡形も無かったので
付け焼刃の知識で切った貼った程度では
なんともならないことに取り組んでいたんだと
思い知らされました。
出来る人が、羨ましい限りです。

li要素をjqueryで動かせるか試してみて
うまくいけば、理想のゴール。
そうでなくても、ほぼ理想に近いものが出来そうです。
重ね重ね、ありがとうございました。

通報する

お礼日時：2013/02/01 22:54

No.2

回答者： fujillin
回答日時：2013/01/18 09:25

構成が私には読取り難いので、間違っているかもしれませんが…

サイドバー作成時に<li>と同様に、<a>要素を作成し入れ子にしてあげればよいのではないでしょういか。

＞が、サイドバーの<li>を作る過程で
＞リンク先のURLを読み込むことができません。
わざわざ引数をマップ内のmarkerにしていますが、元データのstationList[i]にするとか、そのインデックスの i だけを渡すとかで問題は解決すると思いますが…
（title用のデータは元データにもあるので。　なぜ変数名がstationなのかのほうが、私には謎ですが）

この回答への補足

ありがとうございます。

変数名は、ネットで拾ってきたままです。
おそらく大元は、勝俣氏の本に記載されているかと思います。

テーブル構造を簡略化し、配列を内部に取り込んで
myStr,myImg を追加。情報ウィンドウの内容を書き換えて
CSSを追加・・・あとはチョコチョコといじっています。

<a>タグの埋め込みはできています。
問題は、リンク先としてmyStrを引っ張ってくるところでして、
getContent では、ダメでした。
「理屈」を教えていただくのではなくて、
ソースをご教授いただけないでしょうか。

何卒よろしくお願いいたします。

補足日時：2013/01/20 01:00

通報する

- 0
- 件

通報する

No.1

回答者： wf9a5m75
回答日時：2013/01/17 07:28

このあたりが参考になりませんか？

■サイドバー付きの地図を作る
http://googlemaps.googlermania.com/google_maps_a …

■サイドバー + カテゴリ分け
http://googlemaps.googlermania.com/google_maps_a …

■FusionTablesLayerで使えるサイドバー
http://googlemaps.googlermania.com/google_maps_a …

この回答への補足

ありがとうございます。

挙げていただいた3つのページの内、上2つは、チェック済みでして
3つ目も、面白い内容ですが私の求めているものではありません。

サイドバーの<li>要素がscriptによって自動生成されます。
この過程で、<a>タグを付けたいんですよ。
これによって、サイドバーの項目に対して

(1)mouseover時に、地図上で情報ウィンドウが開く
(2)click時に、リンクが開く

ようにしたいのです。
情報ウィンドウ内に、画像とリンクを表示させるようには
出来ましたが、同じようにサイドバーにもリンクを作りたいのです。

引き続き、アドバイスをお待ちしております。