ตัวอย่างการใช้ The Google Maps Geocoding API ค้นหาสถานที่ด้วย Google map

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 12766
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

ตัวอย่างการใช้ The Google Maps Geocoding API ค้นหาสถานที่ด้วย Google map

โพสต์โดย thatsawan » 13/11/2015 11:46 pm

The Google Maps Geocoding API คือ เทคโนโลยีสำหรับการระบุตำแหน่งพิกัดทางภูมิศาสตร์ ขอยกตัวอย่างเช่น ต้องการค้นหาตำแหน่ง "ซอยเสนานิคม แขวง ลาดยาว เขต จตุจักร กรุงเทพมหานคร 10900 ประเทศไทย" ผลที่ได้จะได้ พิกัดทางภูมิศาสตร์ออกมา ดังตัวอย่าง


http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address={{สถานที่}}


ตัวอย่าง http://maps.googleapis.com/maps/api/geo ... s=เสนานิคม
ผลที่ได้

โค้ด: เลือกทั้งหมด

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "ซอยเสนานิคม",
               "short_name" : "ซอยเสนานิคม",
               "types" : [ "point_of_interest", "establishment" ]
            },
            {
               "long_name" : "แขวง ลาดยาว",
               "short_name" : "แขวง ลาดยาว",
               "types" : [ "sublocality_level_2", "sublocality", "political" ]
            },
            {
               "long_name" : "เขต จตุจักร",
               "short_name" : "เขต จตุจักร",
               "types" : [ "sublocality_level_1", "sublocality", "political" ]
            },
            {
               "long_name" : "กรุงเทพมหานคร",
               "short_name" : "กรุงเทพมหานคร",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "กรุงเทพมหานคร",
               "short_name" : "กรุงเทพมหานคร",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "ประเทศไทย",
               "short_name" : "TH",
               "types" : [ "country", "political" ]
            },
            {
               "long_name" : "10900",
               "short_name" : "10900",
               "types" : [ "postal_code" ]
            }
         ],
         "formatted_address" : "ซอยเสนานิคม แขวง ลาดยาว เขต จตุจักร กรุงเทพมหานคร 10900 ประเทศไทย",
         "geometry" : {
            "location" : {
               "lat" : 13.8340589,
               "lng" : 100.5723563
            
},
            "location_type" : "APPROXIMATE",
            "viewport" : {
               "northeast" : {
                  "lat" : 13.8354078802915,
                  "lng" : 100.5737052802915
               
},
               "southwest" : {
                  "lat" : 13.8327099197085,
                  "lng" : 100.5710073197085
               
}
            }
         },
         "partial_match" : true,
         "place_id" : "ChIJ2TGfGf2c4jARuLhIDW7U_Po",
         "types" : [
            "bus_station",
            "transit_station",
            "point_of_interest",
            "establishment"
         ]
      }
   ],
   "status" : "OK"
}
 


วิธีที่จะดึงข้อมูลมาใส่

โค้ด: เลือกทั้งหมด


$address 
= urlencode($address); //  $address = เสนานิคม เราสามารถ Get หรือ ทำเป็นฟอร์มรับค่ามาก่อนได้
 $url = "http://maps.google.com/maps/api/geocode/json?sensor=false&address={$address}";
 
  
    $resp_json 
= file_get_contents($url);
    print_r($resp_json); exit; // เมื่อปริ้นค่าออกมาจะได้ข้อมูล Json เเบบตัวอย่างข้างต้น
    
    $resp 
= json_decode($resp_json, true); // เอาออกจาก Json สะ เอามาใช้ต่อ
 


หลังจากนั้นก็เตรียมข้อมูล ไปแสดงผล
Google Map จะแสดงผลตาม ลองติจูล ละติจูล

โค้ด: เลือกทั้งหมด

if($resp['status']=='OK'){
 
        
// get the important data
        $lati = $resp['results'][0]['geometry']['location']['lat'];
        $longi = $resp['results'][0]['geometry']['location']['lng'];
        $formatted_address = $resp['results'][0]['formatted_address'];
        print_r($lati); echo '<hr>'; // 13.8340589
        print_r($longi); echo '<hr>';//100.5723563
        print_r($formatted_address);//ซอยเสนานิคม แขวง ลาดยาว เขต จตุจักร กรุงเทพมหานคร 10900, Thailand
        exit


ตอนเเสดงผลก็เอาที่เราเตรียมไว้มาใส่ใน JavaScript
อย่าลืมต้องใส่ เเท็ก HTML ตามนี้ด้วยค่ะไม่งั้นมันจะไม่รู้ไปเเสดงที่ไหน

โค้ด: เลือกทั้งหมด

<div id="gmap_canvas"></div



โค้ด: เลือกทั้งหมด

<!-- JavaScript to show google map -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>    
    <script type="text/javascript">
        function init_map() {
            var myOptions = {
                zoom: 14,
                center: new google.maps.LatLng(<?php echo $latitude; ?><?php echo $longitude; ?>),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
            marker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(<?php echo $latitude; ?><?php echo $longitude; ?>)
            });
            infowindow = new google.maps.InfoWindow({
                content: "<?php echo $formatted_address; ?>
            });
            google.maps.event.addListener(marker, "click", function () {
                infowindow.open(map, marker);
            });
            infowindow.open(map, marker);
        }
        google.maps.event.addDomListener(window, 'load', init_map);
    </script>


2015-11-13_23-28-34.png
2015-11-13_23-28-34.png (265.51 KiB) เปิดดู 1524 ครั้ง


อีกนิดเราสามารถใส่ CSS ปรับขนาดของการแสดงผลได้ค่ะ

โค้ด: เลือกทั้งหมด

    <style>

    #gmap_canvas{
        width:50%;
        height:30em;
    }

    </style


ศึกษาเพิ่มเติม
https://developers.google.com/maps/docu ... ding/intro
http://www.w3schools.com/googleapi/goog ... _basic.asp



นอกจากวีนี้เเล้วยังมีอีกหลายวิธีที่จะสร้าง Google map มาติดหน้าเว็บของเรา
Google Maps Javascript API
หน้าตาของมันก็จะมีฟอร์มค้นหามาให้เราเลย เพียงเเค่เราตั้งค่า YOUR_API_KEY
2015-11-13_23-38-59.png
2015-11-13_23-38-59.png (316.68 KiB) เปิดดู 1524 ครั้ง


https://developers.google.com/maps/docu ... -searchbox

การตั้งค่า YOUR_API_KEY
https://developers.google.com/maps/docu ... et-api-key
2015-11-13_21-43-36.png
2015-11-13_21-43-36.png (29.28 KiB) เปิดดู 1524 ครั้ง

2015-11-13_21-49-41.png
2015-11-13_21-49-41.png (32.76 KiB) เปิดดู 1524 ครั้ง

2015-11-13_21-50-21.png
2015-11-13_21-50-21.png (7.11 KiB) เปิดดู 1524 ครั้ง

2015-11-13_21-43-52.png
2015-11-13_21-43-52.png (15.8 KiB) เปิดดู 1524 ครั้ง

konseo
PHP Super Member
PHP Super Member
โพสต์: 245
ลงทะเบียนเมื่อ: 12/02/2011 12:34 am
ที่อยู่: https://page.line.me/gnm7628z
ติดต่อ:

Re: ตัวอย่างการใช้ The Google Maps Geocoding API ค้นหาสถานที่ด้วย Google map

โพสต์โดย konseo » 15/11/2015 1:27 am

ขอบคุณครับ ไม่ได้หาเวลาศึกษาจริงจังสักที ได้ใช้แค่ iframe พอบรรเทาไปครับ


ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 9 และ บุคคลทั่วไป 0 ท่าน