PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สอบถาม วิธีดึงค่า Lat Long จาก การค้นหาแบบ AutoComplete มาแสดงที่ textbox ครับ

สอบถาม วิธีดึงค่า Lat Long จาก การค้นหาแบบ AutoComplete มาแสดงที่ textbox ครับ
สืบเนื่องจาก ใช้งาน autocomplete ใน google place ไลบรารี่ ของ google map

ทำยังไงถึงจะดึงข้อมูล ค่า Lat Long ออกมาแสดงที่ Textbox ได้ด้วย เวลาค้นหาเจออะครับ เพราะๆผมดูๆ แล้ว ไม่เหมือน โค้ดอื่นๆเลย นำาประยุกต์
ไม่เป็นเลยครับ ช่วยแนะนำทีครับ ว่าใช้ โค้ดแบบใด

ขอบคุณครับ.... smiley


โดย:  Boomzaclub IP: 223.205.244.xxx วันที่: 02-10-2015 เวลา: 17:18:16

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 6
ขอบคุณมากครับ

โดย:  Boomzaclub IP: 1.47.10.xxx วันที่: 03-10-2015 เวลา: 11:04:11
 ความคิดเห็นที่ 5
ถ้าใส่ตามที่บอกก็น่าจะได้น่ะ ก่อน my_Marker.setPosition,,,,




Latitude Longitude



<!doctype html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>

<body>
<style type="text/css">
/* css สำหรับ div คลุม google map อีกที */
#contain_map{
	position:relative;
	width:650px;
	height:400px;
	margin:auto;	
}	
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas { 
	top:0px;
	width:100%;
	height:400px;
	margin:auto;
}
/*css กำหนดรูปแบบ ของ input สำหรับพิมพ์ค้นหา effect */
.controls_tools {
	margin-top: 16px;
	border: 1px solid transparent;
	border-radius: 2px 0 0 2px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	height: 32px;
	outline: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
/*css กำหนดรูปแบบ ของ input สำหรับพิมพ์ค้นหา*/
#pac-input {
	background-color: #fff;
	padding: 0 11px 0 13px;
	width: 60%;
	font-family: Roboto;
	font-size: 15px;
	font-weight: 300;
	text-overflow: ellipsis;
}
/*css กำหนดรูปแบบ ของ input สำหรับพิมพ์ค้นหา ขณะ focus*/
#pac-input:focus {
	width: 60%;
	border-color: #4d90fe;
	margin-left: -1px;
	padding-left: 14px;  /* Regular padding-left + 1. */      
}

</style>
<br />
<br />

<div id="contain_map">
  <input id="pac-input" class="controls_tools" type="text"placeholder="Enter a location">  
  <div id="map_canvas"></div>
</div>
<br>
<div style="text-align:center;">
    Latitude  
    <input name="lat_value" type="text" id="lat_value" value="0" size="17" /> 
    Longitude  
    <input name="lng_value" type="text" id="lng_value" value="0" size="17" />    
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var geocoder; // กำหนดตัวแปรสำหรับ เก็บ Geocoder Object ใช้แปลงชื่อสถานที่เป็นพิกัด
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var my_Marker; // กำหนดตัวแปรสำหรับเก็บตัว marker
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var inputSearch; // กำหนดตัวแปร สำหรับ อ้างอิง input สำหรับพิมพ์ค้นหา
var infowindow;// กำหนดตัวแปร สำหรับใช้แสดง popup สถานที่ ที่ค้นหาเจอ
var autocomplete; // กำหนดตัวแปร สำหรับเก็บค่า การใช้งาน places Autocomplete
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

	inputSearch = $("#pac-input")[0]; // เก็บตัวแปร dom object โดยใช้ jQuery
	// จัดตำแหน่ง input สำหรับการค้นหา ด้วย คำสั่งของ google map
	map.controls[GGM.ControlPosition.TOP_LEFT].push(inputSearch);
	
	// เรียกใช้งาน Autocomplete โดยส่งค่าจากข้อมูล input ชื่อ inputSearch
	autocomplete = new GGM.places.Autocomplete(inputSearch);
	autocomplete.bindTo('bounds', map); 
//	place.geometry.location.lat();
//	place.geometry.location.lng();
	infowindow = new GGM.InfoWindow();// เก็บ InfoWindow object ไว้ในตัวแปร infowindow
	// เก็บ Marker object พร้อมกำหนดรูปแบบ ไว้ในตัวแปร my_Marker
	my_Marker = new GGM.Marker({
		map: map,
		anchorPoint: new GGM.Point(0, -29)
	});
	
	// เมื่อแผนที่มีการเปลี่ยนสถานที่ จากการค้นหา
	GGM.event.addListener(autocomplete, 'place_changed', function() {
		infowindow.close();// เปิด ข้อมูลตัวปักหมุด (infowindow)
		my_Marker.setVisible(false);// ซ่อนตัวปักหมุด (marker) 
		var place = autocomplete.getPlace();// เก็บค่าสถานที่จากการใช้งาน autocomplete ไว้ในตัวแปร place
		if (!place.geometry) {// ถ้าไม่มีข้อมูลสถานที่ 
			return;
		}
		
		// ถ้ามีข้อมูลสถานที่  และรูปแบบการแสดง  ให้แสดงในแผนที่
		if (place.geometry.viewport) {
			map.fitBounds(place.geometry.viewport);
//			$("#lat_value").val(place.geometry.location.lat());
//			$("#lng_value").val(place.geometry.location.lng());
			my_Marker.setPosition(place.geometry.location);  
		} else { // ให้แสดงแบบกำหนดเอง
			map.setCenter(place.geometry.location);
			map.setZoom(17);  // แผนที่ขยายที่ขนาด 17 ถือว่าเหมาะสม
		}
		
		// ปักหมุด (marker) ตำแหน่ง สถานที่ที่เลือก
        $("#lat_value").val(place.geometry.location.lat());
        $("#lng_value").val(place.geometry.location.lng());        
		my_Marker.setPosition(place.geometry.location);
		my_Marker.setVisible(true);// แสดงตัวปักหมุด จากการซ่อนในการทำงานก่อนหน้า
		
		// สรัางตัวแปร สำหรับเก็บชื่อสถานที่ จากการรวม ค่าจาก array ข้อมูล
		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[2] && place.address_components[2].short_name || '')
			].join(' ');
		}
		
		// แสดงข้อมูลในตัวปักหมุด (infowindow)
		infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
		infowindow.open(map, my_Marker);// แสดงตัวปักหมุด (infowindow)
		
	});
}




$(function(){
	$("<script/>", {
	  "type": "text/javascript",
	  src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize&libraries=places"
	}).appendTo("body");	
});
</script>
</body>
</html>


โดย:  Ninenik IP: 1.47.136.xxx วันที่: 03-10-2015
 ความคิดเห็นที่ 4
ผมลองสลับไปมาดูวางแล้ว ไม่ได้เลยครับ ไม่ทราบว่าผมวางผิดหรือปล่าว 

ควรวางในตำแหน่งไหนอะครับ

<!doctype html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>

<body>
<style type="text/css">
/* css สำหรับ div คลุม google map อีกที */
#contain_map{
	position:relative;
	width:650px;
	height:400px;
	margin:auto;	
}	
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas { 
	top:0px;
	width:100%;
	height:400px;
	margin:auto;
}
/*css กำหนดรูปแบบ ของ input สำหรับพิมพ์ค้นหา effect */
.controls_tools {
	margin-top: 16px;
	border: 1px solid transparent;
	border-radius: 2px 0 0 2px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	height: 32px;
	outline: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
/*css กำหนดรูปแบบ ของ input สำหรับพิมพ์ค้นหา*/
#pac-input {
	background-color: #fff;
	padding: 0 11px 0 13px;
	width: 60%;
	font-family: Roboto;
	font-size: 15px;
	font-weight: 300;
	text-overflow: ellipsis;
}
/*css กำหนดรูปแบบ ของ input สำหรับพิมพ์ค้นหา ขณะ focus*/
#pac-input:focus {
	width: 60%;
	border-color: #4d90fe;
	margin-left: -1px;
	padding-left: 14px;  /* Regular padding-left + 1. */      
}

</style>
<br />
<br />

<div id="contain_map">
  <input id="pac-input" class="controls_tools" type="text"placeholder="Enter a location">  
  <div id="map_canvas"></div>
</div>
<br>
<div style="text-align:center;">
    Latitude  
    <input name="lat_value" type="text" id="lat_value" value="0" size="17" /> 
    Longitude  
    <input name="lng_value" type="text" id="lng_value" value="0" size="17" />    
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var geocoder; // กำหนดตัวแปรสำหรับ เก็บ Geocoder Object ใช้แปลงชื่อสถานที่เป็นพิกัด
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var my_Marker; // กำหนดตัวแปรสำหรับเก็บตัว marker
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var inputSearch; // กำหนดตัวแปร สำหรับ อ้างอิง input สำหรับพิมพ์ค้นหา
var infowindow;// กำหนดตัวแปร สำหรับใช้แสดง popup สถานที่ ที่ค้นหาเจอ
var autocomplete; // กำหนดตัวแปร สำหรับเก็บค่า การใช้งาน places Autocomplete
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

	inputSearch = $("#pac-input")[0]; // เก็บตัวแปร dom object โดยใช้ jQuery
	// จัดตำแหน่ง input สำหรับการค้นหา ด้วย คำสั่งของ google map
	map.controls[GGM.ControlPosition.TOP_LEFT].push(inputSearch);
	
	// เรียกใช้งาน Autocomplete โดยส่งค่าจากข้อมูล input ชื่อ inputSearch
	autocomplete = new GGM.places.Autocomplete(inputSearch);
	autocomplete.bindTo('bounds', map); 
	place.geometry.location.lat();
	place.geometry.location.lng();
	infowindow = new GGM.InfoWindow();// เก็บ InfoWindow object ไว้ในตัวแปร infowindow
	// เก็บ Marker object พร้อมกำหนดรูปแบบ ไว้ในตัวแปร my_Marker
	my_Marker = new GGM.Marker({
		map: map,
		anchorPoint: new GGM.Point(0, -29)
	});
	
	// เมื่อแผนที่มีการเปลี่ยนสถานที่ จากการค้นหา
	GGM.event.addListener(autocomplete, 'place_changed', function() {
		infowindow.close();// เปิด ข้อมูลตัวปักหมุด (infowindow)
		my_Marker.setVisible(false);// ซ่อนตัวปักหมุด (marker) 
		var place = autocomplete.getPlace();// เก็บค่าสถานที่จากการใช้งาน autocomplete ไว้ในตัวแปร place
		if (!place.geometry) {// ถ้าไม่มีข้อมูลสถานที่ 
			return;
		}
		
		// ถ้ามีข้อมูลสถานที่  และรูปแบบการแสดง  ให้แสดงในแผนที่
		if (place.geometry.viewport) {
			map.fitBounds(place.geometry.viewport);
			$("#lat_value").val(place.geometry.location.lat());
			$("#lng_value").val(place.geometry.location.lng());
			my_Marker.setPosition(place.geometry.location);  
		} else { // ให้แสดงแบบกำหนดเอง
			map.setCenter(place.geometry.location);
			map.setZoom(17);  // แผนที่ขยายที่ขนาด 17 ถือว่าเหมาะสม
		}
		
		// ปักหมุด (marker) ตำแหน่ง สถานที่ที่เลือก
		my_Marker.setPosition(place.geometry.location);
		my_Marker.setVisible(true);// แสดงตัวปักหมุด จากการซ่อนในการทำงานก่อนหน้า
		
		// สรัางตัวแปร สำหรับเก็บชื่อสถานที่ จากการรวม ค่าจาก array ข้อมูล
		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[2] && place.address_components[2].short_name || '')
			].join(' ');
		}
		
		// แสดงข้อมูลในตัวปักหมุด (infowindow)
		infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
		infowindow.open(map, my_Marker);// แสดงตัวปักหมุด (infowindow)
		
	});
}




$(function(){
	$("<script/>", {
	  "type": "text/javascript",
	  src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize&libraries=places"
	}).appendTo("body");	
});
</script>
</body>
</html>

ผมวางแบบนี้แล้วยังไม่ได้อะครับ ต้องวาง 
place.geometry.location.lat();
place.geometry.location.lng();

และ

$("#latitude").val(place.geometry.location.lat());
$("#longitude").val(place.geometry.location.lng());
my_Marker.setPosition(place.geometry.location);  

ไว้ตรงไหนเหรอครับ 




โดย:  Boomzaclub IP: 223.205.244.xxx วันที่: 02-10-2015 เวลา: 21:20:24
 ความคิดเห็นที่ 3
ขอบคุณครับ  เดี๋ยวผมขอลองดูก่อนน่ะครับ

โดย:  Boomzaclub IP: 223.205.244.xxx วันที่: 02-10-2015 เวลา: 20:46:29
 ความคิดเห็นที่ 2
 
ไม่ต่างกันมาก คล้ายกัน ดูตรงตัวแปรที่ชื่อ  place.geometry.location
 
ถ้าจะใช้ lat ก็ใช้ตัวแปร place.geometry.location.lat();
ถ้าจะใช้ lon ก็ใช้ตัวแปร place.geometry.location.lng();
 
อย่างก่อนบรรทัด
my_Marker.setPosition(place.geometry.location);  
 
ก็อาจจะเอาค่าไปแสดงใน textbox แบบ jquery ประมาณนี้
 
$("#latitude").val(place.geometry.location.lat());
$("#longitude").val(place.geometry.location.lng());
my_Marker.setPosition(place.geometry.location);  


โดย:  Ninenik IP: 1.47.136.xxx วันที่: 02-10-2015
 ความคิดเห็นที่ 1
นี่เป็นโค้ดที่ผมดูมาจากเว็บ Thaicreate ครับ
<html>
  <head>
    <title>Geocoding with GMap v3</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.ui-autocomplete {
	background-color: white;
	width: 300px;
	border: 1px solid #cfcfcf;
	list-style-type: none;
	padding-left: 0px;
}
</style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
	<script type="text/javascript">
var geocoder;
var map;
var marker;
    
function initialize(){
  var latlng = new google.maps.LatLng(15.092211605036871,104.32937908834231);
  var options = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
        
  map = new google.maps.Map(document.getElementById("map_canvas"), options);
        
//ใช้ GEOCODER
  geocoder = new google.maps.Geocoder();        
  marker = new google.maps.Marker({
    map: map,
    draggable: true
  });
				
}
		
$(document).ready(function() {          
  initialize();				  
  $(function() {
    $("#address").autocomplete({
      source: function(request, response) {
        geocoder.geocode( {'address': request.term }, function(results, status) {
          response($.map(results, function(item) {
            return {
              label:  item.formatted_address,
              value: item.formatted_address,
              latitude: item.geometry.location.lat(),
              longitude: item.geometry.location.lng()
            }
          }));
        })
      },
      sleect: function(event, ui) {
        $("#latitude").val(ui.item.latitude);
        $("#longitude").val(ui.item.longitude);
        var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
        marker.setPosition(location);
        map.setCenter(location);
      }
    });
  });
});
	</script>
  </head>
  <body>
    <label>ที่อยู่:  </label><input id="address"  type="text" size="50" />
    <div id="map_canvas" style="width:640px; height:480px"></div><br/>
    <label>latitude: </label><input id="latitude" type="text"/><br/>
    <label>longitude: </label><input id="longitude" type="text"/>
  </body>
</html>


ดูๆแล้ว เหมือน มาคนละแบบ แต่ผมว่า ว่า ตรง input ของเว็บ Ninenik นี้ดูสวยและเป็นธรรมชาติกว่า ครับ
คือผมอยากได้ แผนที่ในรูปแบบของเว็บ Ninenik นี้อะครับ แต่อยากให้มีการดึงค่า Lat Long มาไว้ใน Textbox ด้วย เหมือนเว็บ Thaicreate ไม่รู้จะประยุกต์ใช้ด้วยกันยังไงอะครับ เหมือน 2 โค้ดนี้ ทำมาคนละแนวกันอะครับ

หรือ หากมีวิธีอื่นที่ทำได้ ก็ช่วยแนะนำทีน่ะครับ ขอบคุณครับ 




โดย:  Boomzaclub IP: 223.205.244.xxx วันที่: 02-10-2015 เวลา: 17:52:22