001.
<!DOCTYPE html >
002.
<head>
003.
<meta name=
"viewport"
content=
"initial-scale=1.0, user-scalable=no"
/>
004.
<meta http-equiv=
"content-type"
content=
"text/html; charset=UTF-8"
/>
005.
<title>แผนผังการเดินทาง</title>
006.
<style>
007.
008.
009.
#map {
010.
height: 100%;
011.
}
012.
013.
html, body {
014.
height: 100%;
015.
margin: 0;
016.
padding: 0;
017.
}
018.
</style>
019.
</head>
020.
021.
<body>
022.
<iframe style=
"width:2000px;height:30px"
scrolling=
"no"
src=
"iframe.php"
>
023.
</iframe>
024.
<div id=
"map"
></div>
025.
026.
<script>
027.
var
customLabel = {
028.
มรณภาพ: {
029.
label:
'ม'
030.
},
031.
บรรพชา: {
032.
label:
'บ'
033.
},
034.
จำพรรษาตอนนี้: {
035.
label:
'จ'
036.
},
037.
เคยจำพรรษา: {
038.
label:
'ค'
039.
},
040.
ลาสิกขา: {
041.
label:
'ล'
042.
}
043.
};
044.
045.
function
initMap() {
046.
var
map =
new
google.maps.Map(document.getElementById(
'map'
), {
047.
center:
new
google.maps.LatLng(13.847860,100.604274),
048.
zoom:6
049.
});
050.
var
infoWindow =
new
google.maps.InfoWindow;
051.
<?php $Label=
"$_GET[Label]"
;?>
052.
053.
downloadUrl(
'sas.php?Label=<?php echo $Label?>'
,
function
(data) {
054.
055.
var
xml = data.responseXML;
056.
var
markers = xml.documentElement.getElementsByTagName(
'marker'
);
057.
Array.prototype.forEach.call(markers,
function
(markerElem) {
058.
var
idmap = markerElem.getAttribute(
'idmap'
);
059.
var
point =
new
google.maps.LatLng(
060.
parseFloat(markerElem.getAttribute(
'la'
)),
061.
parseFloat(markerElem.getAttribute(
'lo'
)));
062.
var
Temple_name = markerElem.getAttribute(
'Temple_name'
);
063.
var
Label = markerElem.getAttribute(
'Label'
);
064.
var
mtyear = markerElem.getAttribute(
'mtyear'
);
065.
var
type = markerElem.getAttribute(
'type'
);
066.
067.
068.
var
infowincontent = document.createElement(
'div'
);
069.
var
strong = document.createElement(
'strong'
);
070.
strong.textContent = Temple_name
071.
infowincontent.appendChild(strong);
072.
infowincontent.appendChild(document.createElement(
'br'
));
073.
074.
var
text = document.createElement(
'text'
);
075.
text.textContent = mtyear
076.
infowincontent.appendChild(text);
077.
078.
var
icon = customLabel[type] || {};
079.
var
marker =
new
google.maps.Marker({
080.
map: map,
081.
position: point,
082.
label: icon.label
083.
});
084.
marker.addListener(
'click'
,
function
() {
085.
infoWindow.setContent(infowincontent);
086.
infoWindow.open(map, marker);
087.
});
088.
});
089.
});
090.
091.
}
092.
093.
094.
095.
function
downloadUrl(url, callback) {
096.
var
request = window.ActiveXObject ?
097.
new
ActiveXObject(
'Microsoft.XMLHTTP'
) :
098.
new
XMLHttpRequest;
099.
100.
request.onreadystatechange =
function
() {
101.
if
(request.readyState == 4) {
102.
request.onreadystatechange = doNothing;
103.
callback(request, request.status);
104.
}
105.
};
106.
107.
request.open(
'GET'
, url,
true
);
108.
request.send(
null
);
109.
}
110.
111.
function
doNothing() {}
112.
</script>
113.
<script async defer
115.
</script>
116.
</body>
117.
</html>