จากเนื้อหาบทความ
การค้นหาพิกัด โดยการลากตัว marker เพื่อหาตำแหน่ง อาจจะไม่ได้รับความสะดวก ดังนั้นการค้นหาจากสถานที่
จะเป็นวิธีที่ช่วยลดเวลาในการหาพิกัดได้เป็นอย่างดี
ตัวอย่างโค้ดและคำอธิบายแสดงไว้ในตัวโค้ดแล้ว ถ้าใครมีไอเดีย การประยุกต์ใช้งาน สามารถแนะนำไว้ที่ comment
ด้านล่าง หากเป็นแนวทาง หรือเป็นไอเดียที่เป็นประโยฃน์ จะได้นำเอามาประยุกต์และนำเสนอในโอกาส ต่อๆ ไป
Search Place
ตัวอย่างโค้ด
<!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 - 01</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:550px;
height:400px;
margin:auto;
margin-top:50px;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<div id="showDD" style="margin:auto;padding-top:5px;width:550px;">
<!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->
Search Place
<input name="namePlace" type="text" id="namePlace" size="40" />
<input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
<hr />
<!-- <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ-->
<form id="form_get_detailMap" name="form_get_detailMap" method="post" action=""> Latitude
<input name="lat_value" type="text" id="lat_value" value="0" size="17" />
Longitude
<input name="lon_value" type="text" id="lon_value" value="0" size="17" />
Zoom
<input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />
<input type="submit" name="button" id="button" value="บันทึก" />
</form>
</div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var geocoder; // กำหนดตัวแปรสำหรับ เก็บ Geocoder Object ใช้แปลงชื่อสถานที่เป็นพิกัด
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var my_Marker; // กำหนดตัวแปรสำหรับเก็บตัว marker
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
function initialize() { // ฟังก์ชันแสดงแผนที่
GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
geocoder = new GGM.Geocoder(); // เก็บตัวแปร google.maps.Geocoder Object
// กำหนดจุดเริ่มต้นของแผนที่
var my_Latlng = new GGM.LatLng(13.761728449950002,100.6527900695800);
var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
var my_DivObj=$("#map_canvas")[0];
// กำหนด Option ของแผนที่
var myOptions = {
zoom: 13, // กำหนดขนาดการ zoom
center: my_Latlng , // กำหนดจุดกึ่งกลาง จากตัวแปร my_Latlng
mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่ จากตัวแปร my_mapTypeId
};
map = new GGM.Map(my_DivObj,myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
my_Marker = new GGM.Marker({ // สร้างตัว marker ไว้ในตัวแปร my_Marker
position: my_Latlng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้
title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
});
// กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร
GGM.event.addListener(my_Marker, 'dragend', function() {
var my_Point = my_Marker.getPosition(); // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
map.panTo(my_Point); // ให้แผนที่แสดงไปที่ตัว marker
$("#lat_value").val(my_Point.lat()); // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value
$("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value
$("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_valu
});
// กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
GGM.event.addListener(map, 'zoom_changed', function() {
$("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value
});
}
$(function(){
// ส่วนของฟังก์ชันค้นหาชื่อสถานที่ในแผนที่
var searchPlace=function(){ // ฟังก์ชัน สำหรับคันหาสถานที่ ชื่อ searchPlace
var AddressSearch=$("#namePlace").val();// เอาค่าจาก textbox ที่กรอกมาไว้ในตัวแปร
if(geocoder){ // ตรวจสอบว่าถ้ามี Geocoder Object
geocoder.geocode({
address: AddressSearch // ให้ส่งชื่อสถานที่ไปค้นหา
},function(results, status){ // ส่งกลับการค้นหาเป็นผลลัพธ์ และสถานะ
if(status == GGM.GeocoderStatus.OK) { // ตรวจสอบสถานะ ถ้าหากเจอ
var my_Point=results[0].geometry.location; // เอาผลลัพธ์ของพิกัด มาเก็บไว้ที่ตัวแปร
map.setCenter(my_Point); // กำหนดจุดกลางของแผนที่ไปที่ พิกัดผลลัพธ์
my_Marker.setMap(map); // กำหนดตัว marker ให้ใช้กับแผนที่ชื่อ map
my_Marker.setPosition(my_Point); // กำหนดตำแหน่งของตัว marker เท่ากับ พิกัดผลลัพธ์
$("#lat_value").val(my_Point.lat()); // เอาค่า latitude พิกัดผลลัพธ์ แสดงใน textbox id=lat_value
$("#lon_value").val(my_Point.lng()); // เอาค่า longitude พิกัดผลลัพธ์ แสดงใน textbox id=lon_value
$("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_valu
}else{
// ค้นหาไม่พบแสดงข้อความแจ้ง
alert("Geocode was not successful for the following reason: " + status);
$("#namePlace").val("");// กำหนดค่า textbox id=namePlace ให้ว่างสำหรับค้นหาใหม่
}
});
}
}
$("#SearchPlace").click(function(){ // เมื่อคลิกที่ปุ่ม id=SearchPlace ให้ทำงานฟังก์ฃันค้นหาสถานที่
searchPlace(); // ฟังก์ฃันค้นหาสถานที่
});
$("#namePlace").keyup(function(event){ // เมื่อพิมพ์คำค้นหาในกล่องค้นหา
if(event.keyCode==13){ // ตรวจสอบปุ่มถ้ากด ถ้าเป็นปุ่ม Enter ให้เรียกฟังก์ชันค้นหาสถานที่
searchPlace(); // ฟังก์ฃันค้นหาสถานที่
}
});
});
$(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>
แนวทางการค้นหาสถานที่ ให้ได้ผลลัพธ์ ที่ตรงกับความต้องการ
การค้นหาจังหวัด เฃ่น จ.ขอนแก่น
การค้นหาอำเภอ เช่น อ.เมืองขอนแก่น
การค้นหาอำเภอ เช่น อ.เมือง จ.ขอนแก่น หรือ จ.ขอนแก่น อ.เมือง
การค้นหาตำบล เช่น จ.ขอนแก่น ต.ในเมือง หรือ จ.ขอนแก่น อ.เมืองขอนแก่น ต.ในเมือง
การค้นหาชื่อสถานที่ เช่น
จ.ขอนแก่น อ.เมืองขอนแก่น บึงแก่นนคร
ประสาทเขาพระวิหาร
ดอยสุเทพ
โรงเรียนวัดเทพลีลา
เขตบางกะปิ the mall
ตำแหน่งใน google map อาจไม่ตรง 100 % แต่ถือว่าได้ตำแหน่งที่เหมาะสม และสามารถหาเพิ่มเติม
จากแผนที่โดยตรง การค้นหาบางสถานที่ ชื่อซ้ำกัน จำเป็นต้องกำหนดขอบเขต เช่น จ. หรือ อ. หรือ ต. อะไร
ในกรุงเทพ ก็กำหนด เขต เป็นต้น
เนื้อหาที่เกี่ยวข้อง