001.
<HTML>
002.
<title>ตัวอย่างการแสดงสถานะบน google map</title>
003.
<script src=
"http://maps.google.com/maps?file=api&;v=2&key=ABQIAAAAKaJQ6galA0QmFhNdQzYuwRQnaT__a1y-hZdnJBN4Ggj_4W3wVRTkKlGxp0EJvRTbiAqcn-FCYSTDog"
type=
"text/javascript"
></script>
004.
<script type=
"text/javascript"
>
005.
006.
var
circle = null;
007.
var
circle2 = null;
008.
var
map;
009.
var
geocoder;
010.
var
bb;
011.
var
bounds =
new
GLatLngBounds();
012.
var
t_map;
013.
014.
var
iconRed =
new
GIcon();
015.
iconRed.image =
'picture/red_button_down.png'
;
017.
iconRed.iconSize =
new
GSize(20, 22);
018.
iconRed.shadowSize =
new
GSize(1, 1);
019.
iconRed.iconAnchor =
new
GPoint(12, 8);
020.
iconRed.infoWindowAnchor =
new
GPoint(5, 1);
021.
022.
var
icongreen =
new
GIcon();
023.
icongreen.image =
'picture/green_button_down.png'
;
025.
icongreen.iconSize =
new
GSize(20, 22);
026.
icongreen.shadowSize =
new
GSize(1, 1);
027.
icongreen.iconAnchor =
new
GPoint(12, 8);
028.
icongreen.infoWindowAnchor =
new
GPoint(5, 1);
029.
030.
var
iconyellow =
new
GIcon();
031.
iconyellow.image =
'picture/yellow_button_down.png'
;
032.
iconyellow.image.mouseover =
'picture/yellow_button_up.png'
;
034.
iconyellow.iconSize =
new
GSize(20, 22);
035.
iconyellow.shadowSize =
new
GSize(1, 1);
036.
iconyellow.iconAnchor =
new
GPoint(12, 8);
037.
iconyellow.infoWindowAnchor =
new
GPoint(5, 1);
038.
039.
var
customIcons = [];
040.
customIcons[
"F"
] = iconRed;
041.
customIcons[
"N"
] = iconyellow;
042.
customIcons[
"E"
] = icongreen;
043.
044.
var
status2 = [];
045.
status2[
"F"
] =
'เต็ม'
;
046.
status2[
"N"
] =
'ใกล้เต็ม'
;
047.
status2[
"E"
] =
'ว่าง'
;
048.
049.
function
load()
050.
{
051.
052.
if
(GBrowserIsCompatible())
053.
{
054.
055.
map =
new
GMap2(document.getElementById(
"mapnaja"
));
056.
geocoder =
new
GClientGeocoder();
057.
map.addMapType(G_PHYSICAL_MAP);
058.
map.addControl(
new
GLargeMapControl());
059.
map.addControl(
new
GMapTypeControl());
060.
map.setCenter(
new
GLatLng(18.77849,100.787819), 13);
061.
062.
063.
GDownloadUrl(
"ConvertXML.php"
,
function
(data) {
064.
var
xml = GXml.parse(data);
065.
var
markers = xml.documentElement.getElementsByTagName(
"marker"
);
066.
var
sidebar2 = document.getElementById(
'sidebar2'
);
067.
sidebar2.innerHTML =
''
;
068.
069.
if
(markers.length == 0)
070.
{
071.
sidebar2.innerHTML =
'No results found.'
;
072.
return
;
073.
}
074.
075.
var
bounds =
new
GLatLngBounds();
076.
077.
for
(
var
i = 0; i < markers.length; i++)
078.
{
079.
080.
var
name = markers[i].getAttribute(
"name"
);
081.
var
address = markers[i].getAttribute(
"address"
);
082.
var
status = markers[i].getAttribute(
"status"
);
083.
var
point =
new
GLatLng(parseFloat(markers[i].getAttribute(
"lat"
)),
084.
parseFloat(markers[i].getAttribute(
"lng"
)));
085.
var
marker = createMarker(point, name, address, status);
086.
map.addOverlay(marker);
087.
088.
var
sidebarEntry = createSidebarEntry(marker, name, address,status);
089.
sidebar2.appendChild(sidebarEntry);
090.
bounds.extend(point);
091.
092.
}
093.
});
094.
}
095.
function
refresh(){
096.
doCallAjax(
'id_res'
)
097.
var
clear = setTimeout(
"load();"
,5000);
098.
099.
GEvent.addListener(map,
"click"
,
function
() {
100.
clearTimeout(clear);
101.
});
102.
103.
104.
GEvent.addListener(map,
"mouseout"
,
function
() {
105.
setTimeout(
"load();"
,5000);
106.
});
107.
108.
}
109.
110.
refresh();
111.
112.
}
113.
114.
function
createMarker(point, name, address, status)
115.
{
116.
117.
var
marker =
new
GMarker(point, customIcons[status]);
118.
var
html =
"<table width=300><tr><td>"
+
"<b>ชื่อสถานที่ : "
+ name +
"</b> <br/>ที่อยู่ : "
+ address+
"<br>สถานะ : "
+ status2[status]+
"</td></tr></table>"
;
119.
120.
GEvent.addListener(marker,
'click'
,
function
() {
121.
marker.openInfoWindowHtml(html);
122.
});
123.
124.
return
marker;
125.
}
126.
127.
128.
function
createSidebarEntry(marker, name, address,status)
129.
{
130.
131.
var
div = document.createElement(
'div'
);
132.
var
html =
"<b>ชื่อ : "
+ name +
"</b> <br/>ที่อยู่ : "
+ address +
"</br><b>สถานะ : "
+ status2[status]+
"</b><br/> ------------------------------"
;
133.
div.innerHTML = html;
134.
div.style.cursor =
'pointer'
;
135.
div.style.marginBottom =
'5px'
;
136.
137.
138.
GEvent.addDomListener(div,
'click'
,
function
() {
139.
GEvent.trigger(marker,
'click'
);
140.
});
141.
142.
GEvent.addDomListener(div,
'mouseover'
,
function
() {
143.
div.style.backgroundColor =
'#eee'
;
144.
div.style.color=
'red'
;
145.
});
146.
147.
GEvent.addDomListener(div,
'mouseout'
,
function
() {
148.
div.style.backgroundColor =
'#fff'
;
149.
div.style.color=
'black'
;
150.
});
151.
152.
return
div;
153.
154.
}
155.
156.
</script>
157.
158.
<script type=
"text/javascript"
>
159.
var
HttPRequest = false;
160.
161.
function
doCallAjax(Sort) {
162.
HttPRequest = false;
163.
if
(window.XMLHttpRequest) {
164.
HttPRequest =
new
XMLHttpRequest();
165.
if
(HttPRequest.overrideMimeType) {
166.
HttPRequest.overrideMimeType(
'text/html'
);
167.
}
168.
}
else
if
(window.ActiveXObject) {
169.
try {
170.
HttPRequest =
new
ActiveXObject(
"Msxml2.XMLHTTP"
);
171.
} catch (e) {
172.
try {
173.
HttPRequest =
new
ActiveXObject(
"Microsoft.XMLHTTP"
);
174.
} catch (e) {}
175.
}
176.
}
177.
178.
if
(!HttPRequest) {
179.
alert(
'Cannot create XMLHTTP instance'
);
180.
return
false;
181.
}
182.
183.
var
url =
'ConvertXML.php'
;
184.
var
pmeters =
'mySort='
+Sort;
185.
HttPRequest.open(
'POST'
,url,true);
186.
187.
HttPRequest.setRequestHeader(
"Content-type"
,
"application/x-www-form-urlencoded"
);
188.
HttPRequest.setRequestHeader(
"Content-length"
, pmeters.length);
189.
HttPRequest.setRequestHeader(
"Connection"
,
"close"
);
190.
HttPRequest.send(pmeters);
191.
192.
HttPRequest.onreadystatechange =
function
()
193.
{
194.
if
(HttPRequest.readyState == 3)
195.
{
196.
document.getElementById(
"mySpan"
).innerHTML =
"Now is Loading..."
;
197.
}
198.
199.
if
(HttPRequest.readyState == 4)
200.
{
201.
document.getElementById(
"mySpan"
).innerHTML = HttPRequest.responseText;
202.
}
203.
}
204.
}
205.
206.
</script>
207.
208.
<BODY onload=
"load()"
onunload=
"GUnload()"
>
209.
210.
<table border=
"1"
>
211.
<tr>
212.
<td height=
"402"
> <div id=
"mapnaja"
style=
"width: 600px; height: 400px"
></div> <div id=
"message"
></div></td>
213.
<td width=
"180"
height=
"402"
valign=
"top"
>ข้อมูลร้านอาหาร<div id=
"sidebar2"
style=
"overflow: auto; height: 362px; font-size: 11px; color: #000"
></div> </td>
214.
</tr>
215.
</table>
216.
217.
<form>
218.
<p
class
=
"style3"
>*
219.
<label
for
=
"label"
></label>
220.
<input type=
"image"
name=
"imageField2"
src=
"picture/red_button_down.png"
id=
"label"
height=
"25"
width=
"25"
/>สถานะของร้านเต็ม<br/>
221.
222.
223.
*<label
for
=
"label2"
></label>
224.
<input type=
"image"
name=
"imageField3"
src=
"picture/green_button_down.png"
id=
"label2"
height=
"25"
width=
"25"
/>สถานะของร้านว่าง </br>
225.
226.
227.
*<label
for
=
"label2"
></label>
228.
<input type=
"image"
name=
"imageField3"
src=
"picture/yellow_button_down.png"
id=
"label2"
height=
"25"
width=
"25"
/>สถานะของร้านใกล้เต็ม </p>
229.
230.
</form>
231.
232.
<span id=
"mySpan"
></span>
233.
</BODY>
234.
235.
</HTML>