<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>แสดงแผนที่</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAffnVKpQz5Yo8uhjDuB2ovRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQqMSBz1MCHh481i7wpgqYfNFtGQ"
type="text/javascript"></script>
<script src="js/gmaps.CircleOverlay.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var circle = null;
var circle2 = null;
var map;
var geocoder;
var iconBlue = new GIcon();
iconBlue.image = '../images/food.png';
iconBlue.shadow = '../images/shadow.png';
iconBlue.iconSize = new GSize(32, 37);
iconBlue.shadowSize = new GSize(32, 37);
iconBlue.iconAnchor = new GPoint(15, 45);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var icongreen = new GIcon();
icongreen.image = '../images/home.png';
icongreen.shadow = '../images/shadow.png';
icongreen.iconSize = new GSize(32, 37);
icongreen.shadowSize = new GSize(32, 37);
icongreen.iconAnchor = new GPoint(15, 45);
icongreen.infoWindowAnchor = new GPoint(5, 1);
var iconred = new GIcon();
iconred.image = '../images/measure.png';
iconred.shadow = '../images/shadow.png';
iconred.iconSize = new GSize(32, 37);
iconred.shadowSize = new GSize(32, 37);
iconred.iconAnchor = new GPoint(15, 45);
iconred.infoWindowAnchor = new GPoint(5, 1);
var iconwrite = new GIcon();
iconwrite.image = '../images/shop.png';
iconwrite.shadow = '../images/shadow.png';
iconwrite.iconSize = new GSize(32, 37);
iconwrite.shadowSize = new GSize(32, 37);
iconwrite.iconAnchor = new GPoint(15, 45);
iconwrite.infoWindowAnchor = new GPoint(5, 1);
var iconblack = new GIcon();
iconblack.image = '../images/drink.png';
iconblack.shadow = '../images/shadow.png';
iconblack.iconSize = new GSize(32, 37);
iconblack.shadowSize = new GSize(32, 37);
iconblack.iconAnchor = new GPoint(15, 45);
iconblack.infoWindowAnchor = new GPoint(5, 1);
var iconyellow = new GIcon();
iconyellow.image = '../images/restaurant.png';
iconyellow.shadow = '../images/shadow.png';
iconyellow.iconSize = new GSize(32, 37);
iconyellow.shadowSize = new GSize(32, 37);
iconyellow.iconAnchor = new GPoint(15, 45);
iconyellow.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["ร้านอาหาร"] = iconBlue;
customIcons["โฮมสเตย์"] = icongreen;
customIcons["วัด"] = iconred;
customIcons["ร้านของที่ระลึก"] = iconwrite;
customIcons["ร้านเครื่องดื่ม"] = iconblack;
customIcons["ร้านของกิน"] = iconyellow;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
geocoder = new GClientGeocoder();
map.addMapType(G_PHYSICAL_MAP);
map.removeMapType(G_NORMAL_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(13.42456,99.95671), 17);
}
}
function searchLocationsNear() {
var asearch = document.getElementById('asearch').value;
var fsearch = document.getElementById('fsearch').value;
var searchUrl = "search.php?fsearch=" + fsearch + "&asearch=" + asearch ;
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName('markers');
var sidebar3 = document.getElementById('sidebar3');
sidebar3.innerHTML = '';
if (markers.length == 0) {
sidebar3.innerHTML = 'No results found.';
map.setCenter(new GLatLng(13.42456,99.95671), 17);
return;
}
var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute("id");
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type, id);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address);
sidebar3.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
}
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
//var html = "<table width=300><tr><td>"+"<b>ชื่อสถานที่ : " + name + "</b> <br/>ที่อยู่ : " + address+"</b><br/><img src='http://qrcode.kaywa.com/code/06FF0000/geo:13.38926,99.96269'/></td></tr></table>";
// var html = "<table width=300><tr><td>"+"<b>ชื่อสถานที่ : " + name + "</b> <br/>ที่อยู่ : " + address+"</b><br/><img src='http://qrcode.kaywa.com/code/06FF0000/geo:"+point+"'/></td></tr></table>";
//GEvent.addListener(marker, 'click', function() {
// marker.openInfoWindowHtml(html);
GEvent.addListener(marker, "click", function() {
this.openInfoWindowHtml(" ชื่อสถานที่ : "+name+"<br>ที่อยู่: "+address+"<br>ประเภท: "+type+"<br>ละติจูด:"+this.getLatLng().lat()+"<br> ลองติจูด : "+this.getLatLng().lng()+"<br>QR Code:<br><img src='http://qrcode.kaywa.com/code/06FF0000/geo:"+this.getLatLng().lat()+","+this.getLatLng().lng()+"'/><br>");
});
return marker;
}
function createSidebarEntry(marker, name, address) {
var div = document.createElement('div');
var html = "<b>" + name + "</b> <br/>" + address + "<br/> ------------------------------ <br/>" ;
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}
//]]>
</script>
<style type="text/css">
<!--
body {
background-image: url(picture/page1952.jpg);
}
.style1 {color: #FF0000}
.style2 {color: #FF9B9B}
.style3 {
font-size: 14px;
font-weight: bold;
}
.style4 {color: #0000FF}
.style5 {color: #00FF00}
-->
</style></head>
<body onload="load(),initialize()" onunload="GUnload()">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<table>
<tbody>
<tr>
<td width="600" height="402" rowspan="2"><div id="map_canvas" style="width: 600px; height: 400px"></div> </td>
<td width="180" height="402" valign="top"><div align="center">ค้นหา
<input name="text" type="text" id="asearch" value="ใส่ข้อมูลที่จะใช้ค้นหา" size="30"/>
ค้นหาจาก:
<select id="fsearch">
<option value="name" selected>ชื่อ</option>
<option value="id" >รหัสร้าน</option>
<option value="address" >ที่อยู่</option>
<option value="type" >ประเภท</option>
</select>
<input type="button" onclick="searchLocationsNear()" value="เริ่มค้นหา"/>
</p>
</div>
<div id="sidebar3" style="overflow: auto; height: 295px; font-size: 11px; color: #000"></div>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
ส่วนนี้คือหน้า search.php Code (PHP)
<?php
require("map_connect.php");
// Get parameters from URL
$fsearch = $_GET["fsearch"];
$asearch = $_GET["asearch"];
// Start XML file, create parent node
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
// Opens a connection to a mySQL server
$connection=mysql_connect ($hostname, $username, $password);
mysql_query("SET NAMES UTF8",$connection);
if (!$connection) {
die("Not connected : " . mysql_error());
}
// Set the active mySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ("Can\'t use db : " . mysql_error());
}
$query = "select * from markers where $fsearch like '%$asearch%' ";
$result = mysql_query($query);
if (!$result) {
die("Invalid query: " . mysql_error());
}
header("Content-type: text/xml");
// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
$node = $dom->createElement("markers");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name", $row['name']);
$newnode->setAttribute("address", $row['address']);
$newnode->setAttribute("id", $row['id']);
$newnode->setAttribute("type", $row['type']);
$newnode->setAttribute("lat", $row['lat']);
$newnode->setAttribute("lng", $row['lng']);
}
echo $dom->saveXML();
?>
function searchLocationsNear() {
var asearch = document.getElementById('asearch').value;
var fsearch = document.getElementById('fsearch').value;
var searchUrl = "search.php?fsearch=" + fsearch + "&asearch=" + asearch ;
GDownloadUrl(searchUrl, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName('markers');
var sidebar3 = document.getElementById('sidebar3');
sidebar3.innerHTML = '';
if (markers.length == 0) {
sidebar3.innerHTML = 'No results found.';
map.setCenter(new GLatLng(13.42456,99.95671), 17);
return;
}
var bounds = new GLatLngBounds();
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute("id");
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type, id);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address);
sidebar3.appendChild(sidebarEntry);
bounds.extend(point);
}
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
}