Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,027

HOME > PHP > PHP Forum > ขอโค้ด แสดงที่อยู่ปัจจุบัน GoogleMap Api ชื่อจังหวัด เขต ตำบล แขวง อำเภอ รหัส รหัสไปรษณีย์ ทีครับ

ขอโค้ด แสดงที่อยู่ปัจจุบัน GoogleMap Api ชื่อจังหวัด เขต ตำบล แขวง อำเภอ รหัส รหัสไปรษณีย์ ทีครับ

เริ่มหัวข้อใหม่

KenJeRoKung

โพสกระทู้ ( 7 )
บทความ ( 0 )

ขอโค้ด แสดงที่อยู่ปัจจุบัน GoogleMap Api ชื่อจังหวัด เขต ตำบล แขวง อำเภอ รหัส รหัสไปรษณีย์ ทีครับ

Code (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 - 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:100px;*/
}
</style>
 
 
</head>
 
<body>
  <div id="map_canvas"></div>
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">  
    Latitude  
    <input name="lat_value" type="text" id="lat_value" value="0" />  <br />
    Longitude  
    <input name="lon_value" type="text" id="lon_value" value="0" />  <br />
  Zoom  
  <input name="zoom_value" type="text" id="zoom_value" value="0" size="5" />  
  <br />
  <input type="submit" name="button" id="button" value="บันทึก" />  
  </form>  
</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 จะได้เรียกใช้งานได้ง่ายขึ้น
function initialize() { // ฟังก์ชันแสดงแผนที่
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
    // กำหนดจุดเริ่มต้นของแผนที่
    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 , // กำหนดจุดกึ่งกลาง
        mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่
    };
    map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
 
 
 
    // เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี
    if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(function(position){
                var pos = new GGM.LatLng(position.coords.latitude,position.coords.longitude);
                var infowindow = new GGM.InfoWindow({
                    map: map,
                    position: pos,
                    content: 'คุณอยู่ที่นี่.'
                });
                 
                var my_Point = infowindow.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_value              
                map.setCenter(pos);
            },function() {
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน
            });
    }else{
         // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง
    }
   
    // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom
    GGM.event.addListener(map, 'zoom_changed', function() {
        $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value  
    });
 
}
$(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>

Tag : PHP, HTML5, JavaScript

ประวัติการแก้ไข
2018-08-16 19:14:44

Date : 2018-08-16 18:32:12

By : 56035

View : 3100

Reply : 3

No. 1

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

งานบางงานมันยากเกินไป คงไม่มีให้ง่ายๆหรอกครับ...ลองศึกษาเอง ซึ่งก็มีสอนเยอะ ลองดูนะครับ
https://bit.ly/2BiHuij

Date : 2018-08-17 11:08:58

By : apisitp

No. 2

KenJeRoKung

โพสกระทู้ ( 7 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 1 เขียนโดย : apisitp เมื่อวันที่ 2018-08-17 11:08:58

รายละเอียดของการตอบ ::

ได้และครับ เอามาฝากกัน

Code (PHP)

Tumbon Name
<input type="text" name="tumbon_name" id="tumbon_name" value=""> <br />
Ampur Name
<input type="text" name="ampur_name" id="ampur_name" value=""> <br />
Province Name
<input type="text" name="province_name" id="province_name" value=""> <br />
Zip Code
<input type="text" name="zip_code" id="zip_code" value=""> <br />
Country
<input type="text" name="country_name" id="country_name" value=""> <br />
Latitude  
<input name="lat_value" type="text" id="lat_value" value="" />  <br />
Longitude  
<input name="lon_value" type="text" id="lon_value" value="" />  <br /> 


<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[[--APIKEY--]]&v=3.2&sensor=false&language=th"></script> 
<script type="text/javascript">
navigator.geolocation.getCurrentPosition(function (pos) {
	var geocoder = new google.maps.Geocoder();
	var lat = pos.coords.latitude;
	var lng = pos.coords.longitude;
	var latlng = new google.maps.LatLng(lat, lng);

	//reverse geocode the coordinates, returning location information.
	geocoder.geocode({ 'latLng': latlng }, function (results, status) {
		var result = results[0];
		var state = '';
		var tumbon_name = '';
		var ampur_name = '';
		var province_name = '';
		var zip_code = '';
		var country_name = '';

		for (var i = 0, len = result.address_components.length; i < len; i++) {
			var ac = result.address_components[i];

			console.log(ac);

			if (ac.types.indexOf('locality') >= 0) {
				state = ac.short_name;
				tumbon_name = ac.long_name;
			}
			
			if (ac.types.indexOf('administrative_area_level_2') >= 0) {
				state = ac.short_name;
				ampur_name = ac.long_name;
			}
			
			if (ac.types.indexOf('administrative_area_level_1') >= 0) {
				state = ac.short_name;
				province_name = ac.long_name;
			}
			
			if (ac.types.indexOf('postal_code') >= 0) {
				state = ac.short_name;
				zip_code = ac.long_name;
			}
			
			if (ac.types.indexOf('country') >= 0) {
				state = ac.short_name;
				country_name = ac.long_name;
			}
		}
		
		$("#tumbon_name").val(tumbon_name);
		$("#ampur_name").val(ampur_name);
		$("#province_name").val(province_name);
		$("#zip_code").val(zip_code);
		$("#country_name").val(country_name);
		
		$('#lat_value').val(lat);
		$('#lon_value').val(pos.coords.longitude);  

	});
});
	
</script>

Date : 2018-08-17 14:35:29

By : 56035

No. 3

deawx

โพสกระทู้ ( 5,146 )
บทความ ( 26 )

http://htmlpreview.github.io/?https://github.com/sgruhier/jquery-addresspicker/blob/master/demos/index.html

ใช้ address picker ตัวนี้ดูครับ

Date : 2018-08-17 16:14:34

By : deawx

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ขอโค้ด แสดงที่อยู่ปัจจุบัน GoogleMap Api ชื่อจังหวัด เขต ตำบล แขวง อำเภอ รหัส รหัสไปรษณีย์ ทีครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก