003. <head>
004. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
005. <title>แสดงแผนที่จังหวัดสมุทรสงคราม</title>
007. <script src="js/gmaps.CircleOverlay.js" type="text/javascript"></script>
008. <script src="js/gmaps.CircleOverlay.js" type="text/javascript"></script>
009. <script type="text/javascript">
010.
011. var circle = null;
012. var circle2 = null;
013. var map;
014. var geocoder;
015.
016. var iconBlue = new GIcon();
017. iconBlue.image = '../images/red2.png';
018. iconBlue.shadow = '../images/shadow.png';
019. iconBlue.iconSize = new GSize(32, 37);
020. iconBlue.shadowSize = new GSize(32, 37);
021. iconBlue.iconAnchor = new GPoint(15, 45);
022. iconBlue.infoWindowAnchor = new GPoint(5, 1);
023.
024. var icongreen = new GIcon();
025. icongreen.image = '../images/green2.png';
026. icongreen.shadow = '../images/shadow.png';
027. icongreen.iconSize = new GSize(32, 37);
028. icongreen.shadowSize = new GSize(32, 37);
029. icongreen.iconAnchor = new GPoint(15, 45);
030. icongreen.infoWindowAnchor = new GPoint(5, 1);
031.
032.
033. var customIcons = [];
034. customIcons["เตาตาลที่ไม่ได้ใช้งานแล้ว"] = iconBlue;
035. customIcons["เตาตาลที่ยังใช้งานอยู่"] = icongreen;
036.
037.
038. function load() {
039. if (GBrowserIsCompatible()) {
040. map = new GMap2(document.getElementById("map_canvas"));
041. geocoder = new GClientGeocoder();
042. map.addMapType(G_PHYSICAL_MAP);
043. map.removeMapType(G_NORMAL_MAP);
044. map.addControl(new GLargeMapControl());
045. map.addControl(new GMapTypeControl());
046. map.setCenter(new GLatLng(13.386279,99.9568471), 11);
047.
048. GDownloadUrl("ajax_markers_samutsongkhram.php", function(data) {
049. var xml = GXml.parse(data);
050. var markers = xml.documentElement.getElementsByTagName("marker");
051. var sidebar2 = document.getElementById('sidebar2');
052. sidebar2.innerHTML = '';
053. if (markers.length == 0) {
054. sidebar2.innerHTML = 'No results found.';
055. return;
056. }
057.
058. var bounds = new GLatLngBounds();
059.
060. for (var i = 0; i < markers.length; i++) {
061. var name = markers[i].getAttribute("name");
062. var address = markers[i].getAttribute("address");
063. var type = markers[i].getAttribute("type");
064. var datamap = markers[i].getAttribute("datamap");
065. var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")) ,
066. parseFloat(markers[i].getAttribute("lng")));
067. var marker = createMarker(point, name, address, type, datamap);
068. map.addOverlay(marker);
069.
070. var sidebarEntry = createSidebarEntry(marker, name, address);
071. sidebar2.appendChild(sidebarEntry);
072. bounds.extend(point);
073. }
074. });
075. }
076.}
077.
078. function createMarker(point, name, address, type, datamap) {
079. var marker = new GMarker(point, customIcons[type]);
080.
081.
082.
083.
084. GEvent.addListener(marker, "click", function() {
085.
086. this.openInfoWindowHtml(" ชื่อ : "+name+"<br>ตำบล: "+address+"<br>ประเภท: "+type+"<br>ละติจูด:"+this.getLatLng().lat()+"<br> ลองติจูด : "+this.getLatLng().lng()+"<br>ข้อมูล:"+datamap+"<br>");
087.
088.
089. });
090.
091. return marker;
092. }
093.
094.
095.function createSidebarEntry(marker, name, address) {
096. var div = document.createElement('div');
097. var html = "<b>ชื่อ : " + name + "</b> <br/>ตำบล : " + address +"<br/> ------------------------------";
098. div.innerHTML = html;
099. div.style.cursor = 'pointer';
100. div.style.marginBottom = '5px';
101. GEvent.addDomListener(div, 'click', function() {
102. GEvent.trigger(marker, 'click');
103. });
104. GEvent.addDomListener(div, 'mouseover', function() {
105. div.style.backgroundColor = '#eee';
106. });
107. GEvent.addDomListener(div, 'mouseout', function() {
108. div.style.backgroundColor = '#fff';
109. });
110. return div;
111.}
112.
113. </script>
114. <style type="text/css">
115.<!--
116.body {
117. background-image: url(file:
118.}
119..style1 {color: #FF0000}
120..style2 {color: #FF9B9B}
121..style3 {
122. font-size: 14px;
123. font-weight: bold;
124.}
125..style4 {color: #0000FF}
126..style5 {color: #00FF00}
127.-->
128. </style></head>
129. <body onload="load()" onunload="GUnload()">
130. <table align="center">
131. <tbody>
132. <tr id="cm_mapTR">
133. <td width="652" height="402"> <div id="map_canvas" style="width: 750px; height: 550px"></div> </td>
134. <td width="158" height="402" valign="top"><div align="center">
135. <p>จังหวัดสมุทรสงคราม</p>
136. <table width="100%">
137. <tr>
138. <th scope="col"><form id="form3" method="post" action="search_tambon_samutsongkhram.php">
139. <input type="submit" name="button3" id="button3" value="ค้นหาจากตำบล" />
140. </form></th>
141. </tr>
142. <tr>
143. <th scope="row"><form id="form4" method="post" action="search_type_samutsongkhram.php">
144. <input type="submit" name="button3" id="button4" value="ค้นหาจากประเภท" />
145. </form></th>
146. </tr>
147. <tr>
148. <th scope="row"><form id="form" method="post" action="search_type_samutsongkhram.php">
149. <input type="submit" name="button" id="button" value="ค้นหาจากเรื่อง" />
150. </form></th>
151. </tr>
152. </table>
153. </div>
154. <div id="sidebar2" style="overflow: auto; height: 420px; font-size: 11px; color: #000"></div> </td>
155. </tr>
156. </tbody>
157.</table>
158.</body>
159.</html>
