Google Map API V.3 : ค้นหาแผนที่แบบ Autocomplete
ผมเคยเขียนบทความสอนใช้งาน Google Map API มาบ้างแล้ว ดูได้จาก Google Maps API
และบทความนี้ผมจะสอนเพิ่มช่องค้นหาเข้าไปด้วยครับ เพราะจะทำให้สามารถค้นหาตำแหน่งได้รวดเร็วยิ่งขึ้น โดยที่ไม่จำเป็นต้องหาตำแหน่งในแผนที่เองโดยการเลื่อนแผนที่ไปยังตำแหน่งที่เราต้องการ
เนื่องจากการทำงานของมัน คือ จะเลื่อนหมุดไปยังตำแหน่งที่เราค้นหาให้เราโดยอัตโนมัติ และการค้นหาจะทำงานแบบ Autocomplete
มาดูโค๊ดกันเลยดีกว่า
<!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=windows-874" />
<title>สอนค้นหาแบบ autocomplete ใน google map api v3</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&language=th"></script>
<script>
function initialize() {
var geocoder;
var infowindow;
var place;
var marker;
geocoder = new google.maps.Geocoder();
var Position = new google.maps.LatLng(13.723419, 100.476232);
var mapOptions = {
center: Position, //ตำแหน่งแสดงแผนที่เริ่มต้น
zoom: 13, //ซูมเริ่มต้น คือ 8
mapTypeId: google.maps.MapTypeId.ROADMAP //ชนิดของแผนที่
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var input = document.getElementById('searchTextField');
infowindow = new google.maps.InfoWindow();
marker = new google.maps.Marker({
position: Position,
draggable: true
});
marker.setMap(map);//แสดงตัวปักหมุด!!
showMapVal(Position.jb, Position.kb);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
google.maps.event.addListener(autocomplete, 'place_changed', function() {//ทำงานเมื่อคลิกที่รายการค้นหา
infowindow.close();
marker.setVisible(false);
input.className = '';
place = autocomplete.getPlace();
showMapVal(place.geometry.location.jb, place.geometry.location.kb);
if (!place.geometry) {
input.className = 'notfound';
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);//Set Center ของแผนที่ตามตำแหน่งที่ค้นหา
map.setZoom(17);//กำหนดซูมแผนที่ขยายเป็น 17
}
marker.setPosition(place.geometry.location);//setตำแหน่งใหม่ที่ค้นหา
marker.setVisible(true);//แสดงหมุดในตำแหน่งใหม่ที่ค้นหา
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[3] && place.address_components[3].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong>' + address);
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'dragend', function(ev) {//ทำงานเมื่อคลิกเคลื่อนย้ายหมุด (Marker)
var location = ev.latLng;
var lat = location.lat();
var lng = location.lng();
showMapVal(lat, lng);
var latlng = new google.maps.LatLng(lat, lng)
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == "OK") {
var address = '';
if (results[0].address_components) {
var address = [
(results[0].address_components[0] && results[0].address_components[0].short_name || ''),
(results[0].address_components[1] && results[0].address_components[1].short_name || ''),
(results[0].address_components[2] && results[0].address_components[2].short_name || ''),
(results[0].address_components[3] && results[0].address_components[3].short_name || ''),
(results[0].address_components[5] && results[0].address_components[5].short_name || ''),
(results[0].address_components[4] && results[0].address_components[4].short_name || '')
].join(' ');
infowindow.setContent(address);
infowindow.open(map, marker);
}
}
});
});
google.maps.event.addListener(map, 'zoom_changed', function(ev) {//ซูมแผนที่
zoomLevel = map.getZoom();//เรียกเมธอด getZoom จะได้ค่าZoomที่เป็นตัวเลข
$('#mapsZoom').val(zoomLevel);//เอาค่า Zoom Level ไปแสดงที่ textfield ที่มี id="mapsZoom"
});
}
function showMapVal(lat, lng) {//ฟังก์ชั่นแสดงละติจูดกับลองติจูดใน textfield
$("#mapsLat").val(lat);//textfield ที่ค่า id="mapsLat"
$("#mapsLng").val(lng);//textfield ที่ค่า id="mapsLng"
}
google.maps.event.addDomListener(window, 'load', initialize);//ทำงานตอนหน้านี้โหลดเสร็จแล้วให้ไปเรียกฟังก์ชั่น initialize
</script>
<style>
body {
font-family: sans-serif;
font-size: 14px;
}
#map-canvas {
height: 400px;
width: 600px;
margin-top: 0.6em;
}
input {
border: 1px solid rgba(0, 0, 0, 0.5);
}
input.notfound {
border: 2px solid rgba(255, 0, 0, 0.4);
}
</style>
</head>
<body>
ค้นหาสถานที่ <input id="searchTextField" type="text" size="50">
Ex. ร้านอาหาร,โรงพยาบาล,10200
<div id="map-canvas"></div>
<div>
ละติจูด: <input type="text" size="20" id="mapsLat" />
ลองติจูด <input type="text" size="20" id="mapsLng" />
ซูม <input type="text" size="3" id="mapsZoom" value="8" />
</div>
</body>
</html>
ศึกษาเพิ่มเติมได้จาก https://developers.google.com/maps/documentation/javascript/places#places_autocomplete
สามารถศึกษาวิธีบันทึกลงฐานข้อมูลได้จาก บทความ ลองเล่นกับ Google Map API V.3 : ประยุกต์ใช้ร่วมกับ PHP และฐานข้อมูล MySQL
Copy..โค้ด...ไปวางที่..Appserv....แล้ว Run
ตอบลบแล้ว Map ไม่ขึ้นครับ....
Autocomplete....ก็ไม่ขึ้นครับ..
ไม่ทราบว่า...ต้องแก้ตรงส่วนไหนครับ...
แต่ตัวอย่างที่ใช้ กับ SQL Map ขึ้นครับ...
แก้ไขให้แล้วครับ ^^ ขอบคุณที่แจ้งปัญหานะครับ
ลบหลังจากกดเลือก ข้อความจาก Autocomplete แ้ล้วว...
ตอบลบทำไมตัวเลขใน textfidld ของ ละติจูด ไม่ขึ้นครับ...
ขึ้นเฉพาะตัว textfidld ของ ลองติจูด อย่างเดียวครับ...
มันจะขึ้นตัวเลขทั้งสอง 2 ช่อง เฉพาะตอนไปเลื่อน หมุด ครับ...
ของผมโชว์นะครับ เพราะได้ลองเทสดูแล้ว
ลบขอบคุณครับ..........
ลบตอนนี้ขึ้นครบทั้งสอง ช่องแล้วครับ....
จะได้เก็บที่ SQL ได้สักที............
ขอบคุณมากๆ นะครับ ที่แบ่งปันกัน :)
ตอบลบด้วยความยินดีครับ ^_^
ลบคุณคะ ขอบคุณมากค่ะ เพอร์เฟคมาก ๆ
ตอบลบแล้วรบกวนช่วยทำบทความสอนเรื่อง แนะนำเส้นทางกับบอกระยะทาง + เวลาที่ใช้ ด้วยได้มั้ยคะ >.<
เดี๋ยวว่างๆจะเขียนให้อ่านนะครับ ลองไปศึกษาเรื่องของ polyline ดูครับ
ลบลองดูเว็บนี้ครับ http://www.ninenik.com/%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%87%E0%B8%B2%E0%B8%99_polyline_%E0%B9%81%E0%B8%A5%E0%B8%B0_polygon_%E0%B9%83%E0%B8%99_google_map_api_v3-380.html
ขอบคุณค้ะะ ^^
ตอบลบถ้าต้องการให้แสดงข้อมูลสถานที่ใน Text area เช่น ถนน ราชพฤกษ์ แขวง บางจาก เขต ภาษีเจริญ กรุงเทพมหานคร TH กรุงเทพมหานคร ต้องทำอน่างไรครับ
ตอบลบบรรทัดที่ 60 จะเห็นคำสั่ง
ลบinfowindow.setContent('<div><strong>' + place.name + '</strong>' + address);
บรรทัดต่อมา ให้ใส่โค๊ Text area ของทั่นได้เลยครับ เช่น
$('#textgoo').html('<div><strong>' + place.name + '</strong>' + address);
จากโค๊ดด้านบน เราจะต้องสร้างtextareaตามนี้นะ
<textarea id="textgoo"></textarea>
ขอบคุณจะลองทำดู
ตอบลบกดเลือก จาก Autocomplete แล้ว ค่า ละติจูด และ ลองติจูด ไม่ขึ้นครับ แต่ตอนย้ายหมุดถึงขึ้นนะครับ ไม่รู้เป็นเพราะอะไร
ตอบลบgoogle เปลี่ยนคำสั่งใหม่ คำสั่งเดิมใช้ไม่ได้แล้วครับ
ลบ