1
祖先の出生地を表す約20個のマーカーが付いた地図があります。マーカーはXMLから作成されます。後世代は前世代と後世代にしたいと思っていますが、Google Mapsはデフォルトで最も南側のマーカーになります。その最も単純な形態では、コードは次のようになり：ZインデックスのGoogle Maps API V3 Z-インデックスが動作しない
<!DOCTYPE html >
<head>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map = null;
var thisLatLng = {lat: 51, lng: -3.5};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: thisLatLng,
zoom: 9,
mapTypeId: 'roadmap'
});
// Change this depending on the name of your PHP file
downloadUrl("php-to-xml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("person");
var gender = markers[i].getAttribute("gender");
var z_index = markers[i].getAttribute("z_index");
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var comment = markers[i].getAttribute("comment");
var colour = markers[i].getAttribute("colour");
var html = "<b>" + name + "</b> <br/>" + comment;
var icon = "images/" + gender + "_" + colour + ".png";
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon,
optimized: false,
zIndex: z_index
});
}
});
}
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>
値は、世代に応じて、10刻みで100〜200ごとに異なります。しかし、私は9100〜9200、その他様々なものを作ってみました。
私は、アイコンがZインデックスを動作させるためにCSSの「位置」を持つ必要があることを知りました。しかし、私は試してみました
#map img[src^='/myfamilyroots/images'] {position:relative!important;}
とそのテーマの多くのバリエーションは成功しません。
これは私を怒らせる。私が見る限り、私はGoogle Mapsリファレンスガイドに従っていますが、私が行うことはマーカーの表示方法を変えるものではありません。
明か時間を割り当てる前
は数に文字列を変換します。ありがとう、モリー博士。 – TrapezeArtist