私はこれを解決するのにかなり近づいていることを知っています.正しい方向に少し押すだけです. マーカーの位置と、クリック時にインフォボックスに表示されるその他のデータを含むデータベースから XML を生成しています。XML を適切に生成し、マーカーを正しくプロットします。私の問題はインフォボックスにあります。私のインフォボックスには、最後に配置されたマーカーのデータが表示されます。1 つのデータ (NAME) を格納する配列を作成しましたが、インフォボックスには最後のマーカーからの情報しか表示されません。NAME を適切に表示する方法がわかったら、残りのデータの配列を作成します。さらに説明するコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js? key=MY_KEY&sensor=true"></script>
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript">
var mapstyle = [styles-removed-for-space]
var icon = 'mapicon.png';
//<![CDATA[
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(10,-10),
zoom: 3,
minZoom: 3,
disableDefaultUI: true,
styles: mapstyle,
mapTypeId: 'roadmap'
});
var name = [];
downloadUrl("genxml.php", function(data) {
var xml = data.responseXML;
var places = xml.documentElement.getElementsByTagName("place");
for (var x = 0; x < places.length; x++) {
var getname = places[x].getAttribute("name");
name.push(getname);
var address = places[x].getAttribute("address");
var point = new google.maps.LatLng(
parseFloat(places[x].getAttribute("lat")),
parseFloat(places[x].getAttribute("lng")));
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon,
title: getname
});
var boxText = document.createElement("div");
boxText.id = "infobox"
boxText.style.cssText = " margin-top: 8px; background: white; padding: 5px;";
boxText.innerHTML = name[x];
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-250, -173)
,zIndex: null
,boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat"
,opacity: 0.75
,width: "500px"
,height: "300px"
,textAlign: "center"
}
,closeBoxMargin: "13px 5px 0px 0px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
google.maps.event.addListener(marker, 'click', function(e) {
map.setZoom(13);
map.setCenter(this.getPosition());
ib.open(map, this);
});
}
});
}
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" style="width:100%; height:100%"></div>
</body>
</html>
私は単純なものを見落としていると思います。どんな助けでも大歓迎です。どうもありがとうございました。