ค้นหา พิกัด ค่า latitude และ longitude ใน Google Map จากฃื่อสถานที่
10 September 2010จากเนื้อหาบทความ
การค้นหาพิกัด โดยการลากตัว 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: "http://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 % แต่ถือว่าได้ตำแหน่งที่เหมาะสม และสามารถหาเพิ่มเติม
จากแผนที่โดยตรง การค้นหาบางสถานที่ ชื่อซ้ำกัน จำเป็นต้องกำหนดขอบเขต เช่น จ. หรือ อ. หรือ ต. อะไร
ในกรุงเทพ ก็กำหนด เขต เป็นต้น
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
29 Mar 10 สร้างฟอร์ม ดึง พิกัด ค่า latitude และ longitude จาก google map อ่าน 6663 02 Mar 10 ประยุกต์ แปลเนื้อหา ในเว็บไซต์ด้วย google translater api สำหรับ php อ่าน 1161 04 Oct 08 SQL คืออะไร อ่าน 7496 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 2755 21 Jan 11 การใช้งาน Meta characters ใน Regular Expressions ของ PHP อ่าน 1049 31 Aug 10 เทคนิค php ใช้ fgets และ javascript วนลูป loop อ่านไฟล์ ขนาดใหญ่ อ่าน 1608 14 Feb 09 การระบุการใช้งาน css ค่าใดค่าหนึ่ง อย่างเฉพาะเจาะจง (specificity) อ่าน 1969 18 Jun 10 การใช้งาน live และ die ใน jQuery 1.4 อ่าน 3040 25 Sep 08 การกำหนด Selectors ด้วย jquery แบบ Basic อ่าน 4190 03 Apr 11 จัดข้อความยาว ให้อยู่ในกรอบ ด้วย css break word อ่าน 3291 25 Sep 08 หลักการเข้ารหัสด้วยฟังก์ชั่น md5 อ่าน 2445 21 Sep 10 ทบทวน การจัดการกับ ตัวแปร array ใน javascript ด้วย ฟังก์ชัน ตอนที่ 1 อ่าน 1413 12 Sep 10 การดึง attribute และค่าต่างๆ จาก xml ไฟล์ด้วย jQuery อย่างง่าย อ่าน 2424 10 Nov 08 ฟังก์ชัน PHP ตัดข้อความยาวด้วย wordwrap อ่าน 3640 14 Jan 10 รู้จัก property position ของ css ให้มากขึ้น ด้วย ตัวอย่าง และคำอธิบาย อ่าน 6145 06 Nov 10 แนะนำ jQuery UI Effect แบบ ไม่ต้องใช้งานร่วมกับ event show hide และ toggle อ่าน 2576 25 Sep 08 Code เกี่ยวกับ การหาวันข้างหน้า อ่าน 1871 10 Feb 10 ประยุกต์ สร้าง FTP Function สำหรับการจัดการไฟล์ผ่าน FTP Protocal อ่าน 1393 08 Jun 10 ป้องกัน spam ด้วย captcha คำถาม ทางคณิตศาสตร์ อย่างง่าย อ่าน 1667 21 Oct 08 การล้างค่า ข้อความเริ่มต้นในช่องการค้นหา ด้วย javascript อ่าน 2044