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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: PHP ตัวอย่างการใช้ The Google Maps Geocoding API ค้นหาสถานที่ด้วย Google map

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

โดย konseo » 15/11/2015 1:27 am

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

PHP ตัวอย่างการใช้ 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/geo ... ={{สถานที่}}


ตัวอย่าง 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) Viewed 4232 times
อีกนิดเราสามารถใส่ 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) Viewed 4232 times
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) Viewed 4232 times
2015-11-13_21-49-41.png
2015-11-13_21-49-41.png (32.76 KiB) Viewed 4232 times
2015-11-13_21-50-21.png
2015-11-13_21-50-21.png (7.11 KiB) Viewed 4232 times
2015-11-13_21-43-52.png
2015-11-13_21-43-52.png (15.8 KiB) Viewed 4232 times

ข้างบน