Tag: Google Street View

  • การค้นหาสถานที่ด้วย Places search box และแสดงผลภาพจากข้อมูล Street View บน Google Maps

           ความเดิมจากตอนที่แล้วของบทความ “การดึงค่าละติจูดและลองจิจูดของสถานที่ด้วย Places search box บน Google Maps” เพื่อแก้ปัญหาในการดึงค่าละติจูด-ลองจิจูดจากชื่อสถานที่ที่ผู้ใช้พิมพ์ค้นหาไว้ โดยมีการนำ “Places search box” มาใส่ไว้ในแผนที่ที่เราต้องการแทนนั้น ถือเป็นตัวช่วยให้กับผู้ใช้ในระดับหนึ่ง  แต่สำหรับในบทความนี้ ผู้เขียนจะขอต่อยอดความรู้ดังกล่าว โดยได้ศึกษาและนำวิธีการแสดงผลภาพจากข้อมูล Street view มาประยุกต์ใช้ร่วมด้วย เพื่อให้ผู้ใช้สามารถมองเห็นสถานที่จริงที่เลือกได้จากแผนที่ได้ด้วย ซึ่งจะยิ่งช่วยอำนวยความสะดวกให้กับผู้ใช้ ทำให้ผู้ใช้สามารถตรวจสอบได้ว่าสถานที่ดังกล่าวเป็นสถานที่ที่ต้องการจะดึงค่าละติจูด-ลองจิจูดจริงหรือไม่ได้อีกทางหนึ่งนั่นเอง ซึ่งวิธีการบางส่วนจะขอยกยอดมาจากบทความก่อนหน้านี้ เกี่ยวกับเรื่องการดึงค่าละติจูด-ลองจิจูดจากการค้นหาโดยใช้ Places search box และจะขอเพิ่มเติมความสามารถในการแสดงผลภาพ Street View  รวมทั้งสามารถคลิกจุดพิกัดใหม่บนแผนที่ เพื่อค้นหาตำแหน่ง สถานที่ตั้ง และรายละเอียด รวมถึงภาพจาก Street View ได้อีกด้วย เพื่อให้การดึงค่าพิกัดใกล้เคียงความจริงมากที่สุด โดยมีวิธีการดังนี้

    • ส่วนของสไตล์ชีทในการแสดงผล ขึ้นกับการตกแต่งของผู้พัฒนาแต่ละท่าน
    <!—ส่วนของ Style Sheets->
    <style>
    html, body {
     height: 100%;
     margin: 0;
     padding: 0;
    }
    #map {
     width: 100%;
     height: 400px;
    }
    .controls {
     margin-top: 10px;
     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);
    }
    #searchInput {
     background-color: #fff;
     font-family: Roboto;
     font-size: 15px;
     font-weight: 300;
     margin-left: 12px;
     padding: 0 11px 0 13px;
     text-overflow: ellipsis;
     width: 80%;
    }
    #searchInput:focus {
     border-color: #4d90fe;
    }
    
    </style>
    
    • ส่วนของการอ้างอิง libraries เพื่อใช้งาน Google API
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRbMoDPc_mTv3D3QPqe0Ar84nSvRhA8nk&libraries=places&callback=initMap" async defer></script>
    
    • ส่วนของการประกาศค่าเริ่มต้นและตัวแปร รวมถึงการเรียกใช้งานฟังก์ชั่นเพื่อใช้ในการแสดงผล
      • ฟังก์ชั่น initMap() ซึ่งจะเรียกใช้งานตอนเริ่มต้นโหลดหน้าจอขึ้นมา
    <script>
     var panorama;
     var map;
     var markers = [];
    /***** function ในการประกาศค่าเริ่มต้นให้กับแผนที่*****/
     function initMap() {
    
    /***** ประกาศตำแหน่งพิกัดกึ่งกลางให้กับการแสดงผลแผนที่ ในที่นี้กำหนดเป็นกรุงเทพมหานคร*****/
     var center_point = { lat: 13.7563309, lng: 100.50176510000006 };
     var sv = new google.maps.StreetViewService();
    
    /***** เป็นส่วนของการแสดงผลภาพจาก Street View *****/
     panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
    
     /***** กำหนดรายละเอียดคุณสมบัติของแผนที่*****/
     var map = new google.maps.Map(document.getElementById('map'), {
     center: {lat: center_point.lat, lng: center_point.lng},
     zoom: 13,
     streetViewControl: false // เป็นส่วนที่ Set เพิ่มเติมจากปกติ
     });
    
    sv.getPanorama({ location: center_point, radius: 50 }, processSVData);
    
    /***** กำหนด event เมื่อมีการคลิกแผนที่*****/
     map.addListener('click', function(event) {
     
    /***** ล้างข้อมูลการกำหนดจุด เพื่อให้มีการกำหนดจุดพิกัดเพียงจุดเดียว*****/
     for (i = 0; i < markers.length; i++) {
     markers[i].setMap(null);
     }
    
    /***** ดึงค่าข้อมูลจาก Street View ตามพิกัดที่คลิกบนแผนที่ *****/
     sv.getPanorama({ location: event.latLng, radius: 50 }, processSVData);
     var geocoder = new google.maps.Geocoder();
     geocoder.geocode({
     'latLng': event.latLng
     }, function(results, status) {
     if (status == google.maps.GeocoderStatus.OK) {
    
    /***** แสดงผลข้อมูลรายละเอียดสถานที่*****/
     if (results[0]) {
        var place = results[0];
         for (var i = 0; i < place.address_components.length; i++) {
           if (place.address_components[i].types[0] == 'postal_code') {
             document.getElementById('postal_code').innerHTML = place.address_components[i].long_name;
          }
     if (place.address_components[i].types[0] == 'country') {
     document.getElementById('country').innerHTML = place.address_components[i].long_name;
        }
      }
     document.getElementById('location').innerHTML = results[0].formatted_address;
     document.getElementById('lat').innerHTML = results[0].geometry.location.lat();
     document.getElementById('lon').innerHTML = results[0].geometry.location.lng();
        }
       }
     });
     });
     /***** กำหนดตำแหน่งที่ตั้งของ control ที่จะวางในแผนที่*****/
     var input = document.getElementById('searchInput');
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    
     /***** เพิ่ม Feature ให้กับ textbox ให้สามารถพิมพ์ค้นหาสถานที่ได้*****/
     var autocomplete = new google.maps.places.Autocomplete(input);
     autocomplete.bindTo('bounds', map);
    
     var infowindow = new google.maps.InfoWindow();
     
     /***** กำหนดคุณสมบัติให้กับตัวพิกัดจุดหรือ marker *****/
     var marker = new google.maps.Marker({
     map: map,
     anchorPoint: new google.maps.Point(0, -29)
     });
    markers.push(marker); //เก็บค่าการกำหนดจุดพิกัดไว้ในตัวแปร markers เพื่อใช้ล้างข้อมูลการกำหนดจุดได้
    
     /***** ทำงานกับ event place_changed หรือเมื่อมีการเปลี่ยนแปลงค่าสถานที่ที่ค้นหา*****/
     autocomplete.addListener('place_changed', function() {
     infowindow.close();
     marker.setVisible(false);
     var place = autocomplete.getPlace();
     if (!place.geometry) {
     window.alert("ไม่ค้นพบพิกัดจากสถานที่ดังกล่าว");
     return;
     }
    
     /***** แสดงผลบนแผนที่เมื่อพบข้อมูลที่ต้องการค้นหา *****/
     if (place.geometry.viewport) {
     map.fitBounds(place.geometry.viewport);
     } else {
     map.setCenter(place.geometry.location);
     sv.getPanorama({ location: place.geometry.location, radius: 50 }, processSVData);
     map.setZoom(17);
     }
     marker.setIcon(({
     url: place.icon,
     size: new google.maps.Size(71, 71),
     origin: new google.maps.Point(0, 0),
     anchor: new google.maps.Point(17, 34),
     scaledSize: new google.maps.Size(35, 35)
     }));
     marker.setPosition(place.geometry.location);
     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[2] && place.address_components[2].short_name || '')
     ].join(' ');
     }
     /***** แสดงรายละเอียดผลลัพธ์การค้นหาเป็น popup โดยมีชื่อและสถานที่ดังกล่าว *****/
     infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
     infowindow.open(map, marker);
    
     /***** แสดงรายละเอียดผลลัพธ์การค้นหา ซึ่งประกอบด้วย ที่อยู่ รหัสไปรษณีย์ ประเทศ ละติจูดและลองจิจูด *****/
     for (var i = 0; i < place.address_components.length; i++) {
     if(place.address_components[i].types[0] == 'postal_code'){
     document.getElementById('postal_code').innerHTML = place.address_components[i].long_name;
     }
     if(place.address_components[i].types[0] == 'country'){
     document.getElementById('country').innerHTML = place.address_components[i].long_name;
     }
     }
     document.getElementById('location').innerHTML = place.formatted_address;
     document.getElementById('lat').innerHTML = place.geometry.location.lat();
     document.getElementById('lon').innerHTML = place.geometry.location.lng();
     });
    }
    </script>
    
    • ฟังก์ชั่น processSVData() เป็นฟังก์ชั่นที่ใช้ในการนำค่าของ Street view มาแสดงผล
    <script>
    function processSVData(data, status) {
     if (status === 'OK') {
     
      marker = new google.maps.Marker({
     position: data.location.latLng,
     map: map,
     title: data.location.description
     });
     markers.push(marker);
     panorama.setPano(data.location.pano);
     panorama.setPov({
     heading: 270,
     pitch: 0
     });
     panorama.setVisible(true);
    
     marker.addListener('click', function() {
     
     var markerPanoID = data.location.pano;
     // Set the Pano to use the passed panoID.
     panorama.setPano(markerPanoID);
     panorama.setPov({
     heading: 270,
     pitch: 0
     });
     panorama.setVisible(true);
     });
     } else {
     console.error('ไม่พบข้อมูล Street view ตามสถานที่ดังกล่าว');
     }
     }
    </script>
    
    • ส่วนของการแสดงผล (ใน tag body)
    <body>
    
    <!--ส่วนของการแสดงรายละเอียดผลลัพธ์ที่ได้->
     <table style="width: 100%">
     <tr>
     <td>
    <!--ส่วนของ Element ที่ใช้ในการแสดงผล->
     <input id="searchInput" class="controls" type="text" placeholder="Enter a location">
    <div id="map" style="width: 60%;height:360px;float:left"></div>
    <div id="pano" style="width: 40%;height:360px; float:left"> </div><br />
     </td>
     
     </tr>
     <tr>
     <td>
     <div id="Div1" style="width: 100%;" >
     <ul id="geoData">
     <li>ที่อยู่: <span id="location"></span></li>
     <li>รหัสไปรษณีย์ : <span id="postal_code"></span></li>
     <li>ประเทศ: <span id="country"></span></li>
     <li>ละติจูด: <span id="lat"></span></li>
     <li>ลองจิจูด: <span id="lon"></span></li>
    </ul>
    </div>
    
     </td>
     </tr>
     
     </table>
     <!--ส่วนของการประกาศค่าเริ่มต้นและตัวแปร รวมถึงการเรียกใช้งานฟังก์ชั่นเพื่อใช้ในการแสดงผลที่กล่าวไว้ก่อนหน้านี้-> <script> /***** function ในการประกาศค่าเริ่มต้นให้กับแผนที่ และอื่นๆตามที่กล่าวไว้แล้วข้างต้น*****/ </script> <!--สิ้นสุดส่วนของการประกาศค่าเริ่มต้นและตัวแปร รวมถึงการเรียกใช้งานฟังก์ชั่นเพื่อใช้ในการแสดงผล-> </body>

    ผลลัพธ์ที่ได้

    1. เมื่อเปิดหน้าจอขึ้นมา จะแสดงพิกัดที่จังหวัดกรุงเทพมหานครเป็นค่าตั้งต้น และฝั่งขวาเป็นภาพที่ดึงข้อมูลมาได้จากพิกัดดังกล่าวจากข้อมูล Street Views

    2. พิมพ์ค้นหาชื่อสถานที่ และเลือกสถานที่ที่ต้องการ

    3. เมื่อเลือกสถานที่เรียบร้อย จะมีการกำหนดพิกัดจุดตามชื่อสถานที่ที่เลือกไว้ และแสดงผลภาพจาก Street View รวมทั้งแสดงรายละเอียดในส่วนล่างของหน้าจอ ดังภาพ

           นอกจากการค้นหาพิกัดและข้อมูลภาพจาก Street View โดยใช้วิธีการพิมพ์ค้นหาแล้วนั้น ผู้ใช้ยังสามารถค้นหาพิกัดใหม่ได้จากการคลิกบนแผนที่ได้อีกด้วย ซึ่งจะแสดงผลลัพธ์ได้เช่นกัน ดังภาพ

           ผู้เขียนหวังเป็นอย่างยิ่งว่า บทความนี้จะช่วยเพิ่มประสิทธิภาพและเป็นอีกหนึ่งทางเลือกให้กับผู้พัฒนาได้หยิบยกวิธีการดึงค่าละติจูด-ลองจิจูดและการแสดงผลข้อมูลไปประยุกต์ใช้กับงานของแต่ละท่าน และอาจถือเป็นการเพิ่มลูกเล่นให้กับเว็บไซต์ของท่านให้มีความสามารถที่หลากหลายมากขึ้นเกี่ยวกับการใช้งานร่วมกับแผนที่ Google Maps หากผู้อ่านท่านใดมีข้อเสนอแนะหรือแนะนำวิธีเพิ่มเติมเกี่ยวกับเรื่องดังกล่าว ผู้เขียนยินดีเป็นอย่างยิ่งที่จะรับฟังและร่วมแบ่งปันความรู้ร่วมกันค่ะ หากบทความนี้มีส่วนผิดพลาดประการใด ผู้เขียนขออภัยไว้ ณ ที่นี้ด้วยค่ะ ^^

    แหล่งข้อมูลอ้างอิง :  

    https://www.tutorialspoint.com/google_maps/google_maps_symbols.htm

    http://www.codexworld.com/autocomplete-places-search-box-google-maps-javascript-api/

          https://developers.google.com/maps/documentation/javascript/examples/streetview-service

  • การสร้างภาพ 360 องศาเข้า Google Street View ด้วย Android device

    จากคราวที่แล้วนำเสนอเรื่อง การรับชมภาพสถานที่และเส้นทางในมอ. ผ่าน Google Street View ไปแล้วนะคับ วันนี้เลยอยากนำเสนอวิธีการสร้างภาพ 360 องศา ด้วยมือถือแอนดรอยด์ แล้วอัพเข้า Google Street View ใน Google Maps กันแบบง่ายๆ นะคับ

    **ทำไม่ยาก แต่ต้องอาศัยความเนียนในการเล็กภาพเพื่อให้เชื่อมต่อกันสนิท

    00

    ขั้นตอนการทำ

    1. ติดตั้งแอพ Google Street View จาก Play Store

    01

    2. เมื่อติดตั้งเสร็จแล้วก็เปิดแอพขึ้นมา ไปที่เมนู Explore > คลิกปุ่มวงกลมสีเหลือง (ตามรูป)

    02

    3. คลิกเลือก Camera เพื่อจะถ่ายรูป 360 องศา

    03

    4. แอพจะเตือนให้เราเปิด Location หรือ GPS เพื่อให้ Google ทราบตำแหน่งพิกัดที่เราอยู่ ณ ปัจจุบันที่จะถ่ายภาพ

    04

    5. เริ่มทำการถ่ายภาพ โดยจะมีลูกศรสามเหลี่ยมชี้นำทิศทางในการปรับมุมกล้องในการถ่ายแต่ละจุด

    05

    6. เลื่อนให้จุดวงกลมสีเหลือง เข้ามาซ้อนทับในวงกลมสีขาว แบบพอดีตรงกลาง เพื่อให้ได้ภาพรอยต่อที่เชื่อมต่อกันในแต่ละภาพ

    07

    6. เมื่อวงกลมทั้งสองอันมาซ้อนทับกันให้รอนิ่งๆสักครู่ อย่าเพิ่งขยับมือถือ **ระบบทำการประมวลภาพเก็บไว้

    06

    7. ทำตามขั้นตอนที่ 6 ไปเรื่อยๆจนครบทุกมุม ***จะมีปรากฎลูกศรสามเหลี่ยมชี้นำทิศทางเหมือนในขั้นตอนที่ 5

    จากนั้นคลิกปุ่มวงกลมสีเขียวที่มีเครื่องหมายถูก เพื่อสิ้นสุดการถ่ายภาพ

    08

    8. เมื่อระบบประมวลภาพเสร็จแล้วจะถูกนำเก็บไว้ใน gallery ของเรา > คลิกที่รูป แล้ว คลิก SELECT

    09

    9. คลิกที่รูป หรือ Add a place เพื่อเริ่มการอัพเข้า Google Street View

    10

    10. เราสามารถทำเบลอภาพ ณ จุดที่เราไม่ต้องการให้เผยแพร่ อาทิเช่น ผู้คน(เรื่องสิทธิส่วนบุคคล) ภาพอุจาดตา ฯลฯ โดยการลากกรอบสี่เหลี่ยมคลอบคลุมบริเวณจุดนั้นๆ จากนั้นคลิกเครื่องหมายถูก เพื่อเสร็จสิ้นการเบลอภาพ

    11 12

    11. คลิก Publish to Google Maps เพื่อทำการเผยแพร่ภาพบน Google Maps ในส่วนของ Google Street View

    14

    12. คลิก Publish เพื่อยืนยันการอัพภาพเข้า Google Maps

    13

    13. เปิด Browser > เข้า http://google.com/maps เพื่อดูภาพที่ได้ทำการอัพสำเร็จ

     

    หวังว่าจะเป็นประโยชน์สำหรับใครหลายๆคนที่อยากลองทำภาพอัพเข้า Google Street View ดูบ้างนะคับ และที่สำคัญ…..

    ช่วยๆกันอัพภาพบริเวณ ม.อ. ของเราให้เต็มพื้นที่ใน Google Maps เลยนะคับ ^______^

    *** หากคิดว่ารูปถ่ายหรือรูปภาพที่ตัวเองทำยังสวยไม่พอ ก็อย่าเพิ่ง Publish เลยนะคับ เพื่อที่ว่าประชากรโลกหรือชาวโลกจะได้รับชมเฉพาะภาพสวยๆ ของมหาวิทยาลัยสงขลานครินทร์ของเรา ^^

  • การรับชมภาพสถานที่และเส้นทางในมอ. ผ่าน Google Street View

    n7448_n160616_02x
    ภาพจากข่าวฯ เว็บมอ.

    จากข่าวล่าสุดของมหาวิทยาลัยสงขลานครินทร์ “เริ่มบางส่วนแล้ว….มอง ม.อ.ผ่าน Google Street View” ผ่านทางเว็บไซต์ของมหาวิทยาลัย http://www.psu.ac.th/th/node/7448 เมื่อวันที่ 16 มิถุนายน 2559 ด้วยความร่วมมือกับมอ.และ Google ในการนำเทคโนโลยีการถ่ายภาพแบบ 360 องศา เสมือนเรายืนอยู่ ณ จุดนั้นๆ แล้วสามารถมองได้แบบรอบทิศทาง มาถ่ายภาพสถานที่และเส้นทางในมอ.ของเรา โดยได้เริ่มถ่ายทำในวิทยาเขตหาดใหญ่เป็นวิทยาเขตแรก และจะดำเนินการในวิทยาเขตอื่นๆ ต่อไป

    คราวนี้เรามาดูกันดีกว่าว่า จะวิวหรือชมกันอย่างไร สำหรับใครที่ไม่ทราบวิธีการดูภาพผ่าน Google Street View นะคับ

    ขั้นตอนการรับชม

    1. เปิด Google Maps

    2. เลือกบริเวณพื้นที่มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตหาดใหญ่ **หากไม่ทราบว่าอยู่ตรงไหน ก็ใช้ search หาสถานที่ได้คับ

    01

    3. คลิกตรงไอคอนตุ๊กตารูปคนสีเหลือง บริเวณมุมด้านขวาของหน้าจอ (ตามภาพ)

    02

    4. แผนที่จะแสดงสัญลักษณ์ภาพใน 3 รูปแบบ คือ Street View , ภาพ 360 องศา และดูภายใน

    03

    5. ในแผนที่จะแสดงสัญลักษณ์ไว้ เราสามารถคลิกที่จุดวงกลมสีฟ้า เพื่อดูสถานที่ในจุดนั้นๆ แล้ว drag mouse หมุนชมภาพ

    06

    6. หรือเลือกเข้าชมภาพได้โดยคลิกที่ภาพ gallery ที่แถบภาพด้านล่างของหน้าจอ **เมื่อคลิกที่รูป จะแสดงเส้นวิ่งไปยังจุดสถานที่นั้นๆ

    04

    7. ก่อนหน้านี้ทางศูนย์ GIS มอ. ได้ถ่ายภาพมุมสูงจาก Drone แล้วจัดทำเป็นภาพมุมสูง 360 องศาเผยแพร่ผ่าน Google Street View ไว้แล้ว

    07

     

    หวังว่า… หลายๆ ท่านจะสนุกและมีความสุขกับการเข้าชมภาพ 360 องศา ภายในบริเวณรั้วมอ.ของเรานะคับ ^^

    หากไม่ต้องการแค่รับชมอย่างเดียว ก็ลองสร้างเองดีไม๊คับ??? คลิกเลย >> การสร้างภาพ 360 องศาเข้า Google Street View ด้วย Android device

     

    ===============================================
    สถานวิจัยสารสนเทศภูมิศาสตร์ ทรัพยากรธรรมชาติและสิ่งแวดล้อม
    ศูนย์ภูมิภาคเทคโนโลยีอวกาศและภูมิสารสนเทศ ภาคใต้
    คณะการจัดการสิ่งแวดล้อม มหาวิทยาลัยสงขลานครินทร์
    เว็บไซต์ http://www.rsgis.psu.ac.th
    แฟนเพจ https://www.facebook.com/southgist.thailand