0
私は以下のコードを使用して、MySQLデータベースに保存された各場所のマーカーを表示しています。Googleマップのサイドバー
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>All Locations</title>
<link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript">
var customIcons = {
0: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
1: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpfile.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var locationname = markers[i].getAttribute("locationname");
var address = markers[i].getAttribute("address");
var finds = markers[i].getAttribute("finds");
var totalfinds = markers[i].getAttribute("totalfinds");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("osgb36lat")),
parseFloat(markers[i].getAttribute("osgb36lon")));
var html = locationname + ', No.of finds: ' + "<b>" + totalfinds + "</b>";
var icon = customIcons[totalfinds] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
title: address,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body onLoad="load()">
<div id="map"></div>
</body>
</html>
私は今、ユーザーがサイドバーに場所をクリックした場合、それは黄色の背景で選択を強調することにより、サイドバーを追加することでさらに少しページの機能を拡張できるようにしたいと思いますし、次に、関連するマーカーの中心にマップをパンして情報ウィンドウを開きます。ユーザーがマーカーをクリックする必要がある場合は、情報ウィンドウを開き、サイドバーの関連する場所を黄色の背景で強調表示します。
これはいつか研究していましたが、私がここで好きなサイドバーのタイプを見つけましたhttp://econym.org.uk/gmap/example_map2c.htmlしかし、これはGoogleマップAPIのv2にあります。
私は、これを動作させるために必要なことを誰かに教えてください。
更新されたコード
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>All locations</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<div id="map_canvas" style="width: 900px;height: 600px;">
</div> <div id="locations"></div>
<body onload="showLocations()">
<script>
var map;
var markers = new Array();
function showLocations() {
downloadUrl("phpfile.php", function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var locationname = markers[i].getAttribute("locationname");
markerId = "id_"+i;
location_list += "<div id="+markerId+">"+locationname+"</div>";
}
document.getElementById("location_list").innerHTML = location_list;
initialize_member_map("lang")
});
}
function initialize_member_map(lang) {
map = new google.maps.Map(document.getElementById("map-canvas"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom: 6,
mapTypeId: 'roadmap'
});
var xml = data.responseXML;
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var infoWindow = new google.maps.InfoWindow;
var locationname = markers[i].getAttribute("locationname");
var address = markers[i].getAttribute("address");
var locationid = markers[i].getAttribute("locationid");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("osgb36lat")),
parseFloat(markers[i].getAttribute("osgb36lon")));
var html = "<b>" + locationname + "</b> <br/>" + address;
bounds.extend(point);
var marker = new google.maps.Marker({
map: map,
position: point,
locationid: locationid
});
markerId = "id_"+i;
bindInfoWindow(gmarker, map, infoWindow, html, markerId);
}
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
}
function scrollToMarker(index) {
map.panTo(gmarkers[index].getPosition());
}
function bindInfoWindow(marker, map, infoWindow, html, markerId) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markerObj = document.getElementById(markerId);
google.maps.event.addDomListener(markerObj, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
map.panTo(marker.getPosition());
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing(){
}
</script>
</body>
</html>
こんにちは、私の投稿に返信する時間をとってくれてありがとう。私は既にGoogleサイトのドキュメントとインターネット上で検索して利用できる多くの例を見てきましたが、初心者の観点から包括的ではありますが、私がここに来た理由を理解するのは少し難解でした。敬具。クリス – IRHM
こんにちは、私は誰かが私を助けることができるかもしれないかと思います。私はこのフォーラムで私の問題を解決することを願っています。http://stackoverflow.com/questions/4904549/open-infowindow-of-specific-marker-from-outside-google-maps-v3私はこれを私のデータに合うように修正しました。オリジナルの投稿への更新として示されています。しかし、私がこれを実行すると、次のエラー 'オブジェクトが行33の文字7で期待されています。これを元と照合して、問題の内容を知ることができません。おそらく誰かが私が間違っている場所を見るためにこれを見てください。多くの感謝とクリスについて – IRHM