เนื้อหานี้ เป็นการประยุกต์ เพิ่มเติม ให้ใช้งาน ได้หลากหลายขึ้น
จากบทความก่อนหน้า ด้านล่าง
ค้นหาสถานที่ ในฐานข้อมูล และแสดง ตำแหน่งบนแผนที่ google map แบบง่าย
https://www.ninenik.com/content.php?arti_id=455 via @ninenik
โดยเนื้อหาก่อนหน้า การค้นหา และการแสดง จะมีการ รีเฟรส หน้าเพจ ทุกครั้งที่มีการ
ส่งคำส่งค้นหา ซึ่งเป็นวิธีการ แบบง่าย ให้เข้าใจเบื้องต้นเท่านั้น การประขุกต์ที่ มากกว่า
ต้องอาศัย ความเข้าใจด้านอื่นๆ ประกอบ
โดยการประยุกต์ในที่นี้ จะใช้ ajax ในการส่งค่า และแสดงข้อมูลทันที พร้อมทั้ง
มีการตรวจสอบ และเงื่อนไข การแสดง เพิ่มเติม
รายละเอียด ดูได้ตามตัวอย่าง คำอธิบาย แสดงในโค้ด
ตัวอย่าง
ไฟล์ genMarker.php
<?php
header("Content-type:text/xml; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
mysql_connect("localhost","root","test") or die("Cannot connect the Server");
mysql_select_db("test") or die("Cannot select database");
mysql_query("set character set utf8");
echo '<?xml version="1.0" encoding="utf-8"?>';
// 6-7 บรรทัดแรกด้านบน เป็นการกำหนด ให้ไฟล์นี้ส่งออกเป็นไฟล์ แบบ xml
// และการกำหนดการเชิ่อมต่อกับฐานข้อมูล
?>
<markers>
<?php
$q_search=""; // กำหนดตัวแปร เพื่อรอรับการ ส่งคำสั่งตามเงื่อนไข การค้นหา
$q_limit=""; // กำหนดตัวแปร เพื่อรอรับการ เลือกจำกัดข้อมูลที่ต้องการแสดง
if(isset($_GET['data_search']) && $_GET['data_search']!=""){ // ถ้า มีการส่งค่า คำค้นหามา และค่านั้นไม่ใช่ค่าว่าง
// กำหนด รูปแบบคำสั่ง sql ในตัวแปรที่สร้างไว้ตอนต้น
$q_search=" AND province_name like '%".$_GET['data_search']."%' ";
}else{
// ถ้าไม่มีการส่งค่า ไม่ให้แสดง ตำแหน่งในแผนที่ ให้กำหนด LIMIT 0
// แต่ถ้า ต้องการแสดงเริ่มต้น ให้กำหนดจำนวนตามต้องการ เช่น LIMIT 10
$q_limit=" LIMIT 0 ";
}
// ชุดคำสั่ง sql ในการดึงข้อมูล จากฐานข้อมูลมาแสดง
$q="SELECT * FROM province_th WHERE 1 $q_search ORDER BY province_id $q_limit ";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
?>
<marker id="<?=$rs['province_id']?>">
<name><?=$rs['province_name']?></name>
<latitude><?=$rs['province_lat']?></latitude>
<longitude><?=$rs['province_lon']?></longitude>
</marker>
<?php } ?>
</markers>
ไฟล์ google_map_v3_search_with_db_ajax.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map API 3 - serch with db</title>
<style type="text/css">
html { height: 100% }
body {
height:100%;
margin:0;padding:0;
font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
font-size:12px;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas {
width:650px;
height:500px;
margin:auto;
margin-top:50px;
}
#form_search_data {
width:450px;
height:30px;
margin:auto;
margin-top:10px;
}
</style>
</head>
<body>
<div id="form_search_data">
<form id="form_search_map_data" name="form_search_map_data" method="post" action="" onsubmit="return false;">
<input type="text" name="data_search" id="data_search" value="" style="width:300px;" />
<input type="button" name="bt_search" id="bt_search" value="Search" onclick="search_map();" />
</form>
</div>
<div id="map_canvas"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Marker=[]; // กำหนดตัวแปร my_Marker แบบ array เพื่อเก็บค่าการกำหนดตำแหน่ง ปักหมุด
var newCenterLatLon; // ำหนดตัวแปร newCenterLatLon เพื่อเก็บค้า หากค้นหาแล้วเจอสถานที่เดียว
function initialize() { // ฟังก์ชันแสดงแผนที่
GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
// กำหนดจุดเริ่มต้นของแผนที่
var my_Latlng = new GGM.LatLng(13.761728449950002,100.6527900695800);
// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
var my_DivObj=$("#map_canvas")[0];
// กำหนด Option ของแผนที่
var myOptions = {
zoom: 6, // กำหนดขนาดการ zoom
center: my_Latlng , // กำหนดจุดกึ่งกลาง
mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่
mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่
position:GGM.ControlPosition.TOP, // จัดตำแหน่ง
style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style
}
};
map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
}
$(function(){
$("#data_search").keyup(function(e){
if(e.keyCode==13){ // เมื่อกดปุ่ม enter ในช่องค้นหา
search_map(); // ให้เรียกใช้ฟังก์ชั่นการค้นหา แบบ ajax
}
});
});
function search_map(){ // ฟังก์ชั่นการค้นหา แบบ ajax
var i_marker=0; // กำหนดตัวแปร ไว้นับจำนวน marker หรือปักหมุด
var data_found=0;// กำหนดตัวแปร ไว้นับจำนวนรายการที่ค้นจอ
for(i=0;i<my_Marker.length;i++){ // วนหลูปเพื่อยกเลือก ตัว marker ทั้งหมด หรือล้างค่า ก่อนกำหนดใหม่
my_Marker[i].setMap(null);// คำสั่งในการยกเลิกตัว marker
}
$.ajax({
url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml
type: "GET", // ส่งค่าข้อมูลแบบ POST ไปที่ไฟล์ genMarker.php
data: { data_search :$("#data_search").val()}, //// รับค่า จากการ input text ชื่อ id เท่ากับ data_search
dataType: "xml",
success:function(xml){
// console.log(xml);
$(xml).find('marker').each(function(){ // วนลูปดึงค่าข้อมูลมาสร้าง marker
var markerID=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
var markerName=$(this).find("name").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
var markerLat=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
var markerLng=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
var markerLatLng=new GGM.LatLng(markerLat,markerLng);
my_Marker[i_marker] = new GGM.Marker({ // สร้างตัว marker
position:markerLatLng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
i_marker++;// เพิ่มค่า เพื่อเก็บจำนวนตัว marker ทั้งหมด
if(i_marker==1){
// เก็บค่าตำแหน่ง พักัด สำหรับใช้ ย้ายตำแหน่ง ตรงกลางแผนที่ไปที่ดังกล่าว กรณีพบข้อมูลเดียว
newCenterLatLon=markerLatLng;
}
data_found++;// เก็บค่า เพื่อนับจำนวนรายการที่ค้นเจอทั้งหมด
});
if(i_marker==1){
map.setCenter(newCenterLatLon);// ถ้าค้นเจอเพียงรายการเดียว ให้ย้ายตรงกลางแผนที่ไปที่ ตำแหน่งที่เจอ
}
if(i_marker>1){ // // ถ้าค้นเจอมากกว่า 1 ตำแหน่ง ให้ย้าย ตรงกลาง แผนที่ มาตำแหน่งเดิม ตอนแรก
newCenterLatLon=new GGM.LatLng(13.761728449950002,100.6527900695800);
map.setCenter(newCenterLatLon);
}
if(data_found==0){ // ถ้าไม่พบข้อมูลใดๆ ให้แสดงเตือน
alert("ไม่พบข้อมูล ตามค้นหา");
$("#data_search").val("");
}
}
});
}
$(function(){
// โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว
// ค่าตัวแปร ที่ส่งไปในไฟล์ google map api
// v=3.2&sensor=false&language=th&callback=initialize
// v เวอร์ชัน่ 3.2
// sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false
// language ภาษา th ,en เป็นต้น
// callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize
$("<script/>", {
"type": "text/javascript",
src: "//maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
}).appendTo("body");
});
</script>
</body>
</html>
