การใช้งาน Google Street View API วางวัตถุพ่วงในแผนที่
บทความนี้จะเป็นการพัฒนาโปรแกรมร่วมกับ Google Street View API โดยนำหมุดพิกัดที่เราพบกันบ่อยใน Google Maps ไปลอยเหนือ Google Street View ครับซึ่งหลักการนั้นจะไม่ยากเหมือนที่เคยเขียนอธิบายไว้ในบทความก่อนๆ นะครับ เพราะหลายคนนำ Source Code ไปใช้แต่แทบไม่ได้ศึกษาเลยว่ามันแก้ไขตรงไหน ก็มักจะอีเมลมาถามขั้นตอน โดยไม่ได้ทดลองแก้ปัญหาอะไรเลย พอมองไปที่ต้นเหตุก็ทำให้ทราบว่า พื้นฐานที่จะเข้าศึกษาการทำงานของ API นั้นหลายๆ คนไม่เข้าไปอ่านเลย เยี่ยมมากครับ! อยากเก่งอย่ากระโดดครับต้องค่อยๆ เดิน ค่อยๆ วิ่ง แล้วค่อยกระโดด แล้วจะรู้จริงอะไรจริงไปเองครับ อ่ะกลับมาที่บทความนี้ก่อนดีกว่าครับการนำ Google Street View API มาพัฒนาโดย รอบนี้จะเอาพิกัดที่เราปักหมุดบน Google Maps ให้มาลอยบน Street View ครับ เริ่มกันเลย
ทำการขอ API Key ที่ APIs console
ขั้นตอนแรกให้เข้าไปที่ Google Developer ครับที่ URL นี้ https://code.google.com/apis/console เพื่อไปเปิดสิทธิการใช้งานที่ APIs console ครับ
ทำการเลือกเมนู Services ที่ด้านซ้ายมือ เลือก Activate ตัว API ที่ชื่อว่า Google Maps API v3 ครับ หลังจากนั้นให้ทำการหาค่า API Access โดยคลิกที่เมนูด้านซ้ายเราจะได้ค่า API Access มาครับ เป็น API Key
สร้าง App ขึ้นมาก่อนถ้ายังไม่เคยสร้างนะครับ
นำค่า API Keys มาใช้ครับ
ต่อมาให้สร้างไฟล์ HTML ขึ้นมาครับตาม Template ด้านล่างนี้
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"> </script> <script type="text/javascript"> function initialize() { var myOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html> |
สังเกตุว่าที่ DOCTYPE ของเอกสาร HTML ตัวนี้จะเป็น HTML5 นะครับเพราะมีการประกาศด้วย รูปแบบ
<!DOCTYPE html> |
จุดสังเกตอีกส่วนคือ ส่วนของ Javascripts ครับที่มีการเรียก Service จาก Google Maps API ที่แทรกบน HEAD Tag ของเอกสาร HTML ซึ่งทำให้ทราบได้เลยว่าถ้าโครงงานที่พัฒนานี้ไม่สามารถเชื่อมต่ออินเทอร์เน็ตได้ ก็คือแสดงผลไม่ได้ครับ
<html> <head> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=[ตัวเลขของ API KEY ที่คุณสร้างขึ้น]&sensor=SET_TO_TRUE_OR_FALSE"> </script> |
ส่วนของการแสดงผลของ แผนที่บนหน้า HTML นั้นอยู่ที่
var myOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; |
ซึ่งจะมีค่า Latitude และ Longitude หรือพิกัดตำแหน่งของเราอยู่ที่
center = new google.maps.LatLng(-34.397, 150.644) |
โดยมีจุดของ Internet Access และ Cellsite ของเราเป็นตัวตั้งครับ สังเกตอีกนิดจะเห็นว่า จำนวนของการ Zoom นั้นผมตั้งไว้ที่ 8 ตรงบรรทัดที่เขียนว่า
zoom: 8 |
ประเภทของ แผนที่ที่ต้องการจะนำมาแสดงใน HTML ของเรานั้นสามารถกำหนดได้ครับที่บรรทัด
mapTypeId: google.maps.MapTypeId.ROADMAP |
ซึ่งเราสามารถเปลี่ยนตำแหน่งได้ในค่าของ ROADMAP ได้เป็น
- ROADMAP ก็คือมุมมองของแผนที่ปรกติที่แสดงผลในรูปแบบ 2 มิติที่เราเห็นประจำใน Google Maps.
- SATELLITE ตัวนี้จะแสดงผลเป็นรูปแบบของดาวเทียมครับเป็นภาพจริง
- HYBRID เป็นภาพจากดาวเทียม แต่มี Layer หรือชั้นข้อมูลของถนน และสถานที่ประปนกันอยู่
- TERRAIN อันนี้โหดหน่อย Rander นานมากๆ อยากรู้ว่าเป็นยังไง ลองทดสอบดูเองครับ เห็นหมดทั้ง น้ำ ดิน คนเลย
เอาล่ะลองแก้ Code กันดูไปก่อน ถ้าพอใจแล้วมาเริ่มขั้นตอนต่อไปครับ
ให้เข้าไปแก้ไขไฟล์ HTML ตัวเดิมที่ผมให้ Copy Template ไปโดยแทรกชุด Code รูปแบบข้างล่างเข้าไปแทนชุด Code ตัวเดิมครับ
<script type="text/javascript"> var map; var panorama; var astorPlace = new google.maps.LatLng(13.727502504576, 100.54071547188); var busStop = new google.maps.LatLng(13.726225795719, 100.5439968104); var cafe = new google.maps.LatLng(13.725659, 100.544477); var cafe2 = new google.maps.LatLng(13.727502504576, 100.54071547188); var cafe3 = new google.maps.LatLng(13.728851525653, 100.53526454728); var bank = new google.maps.LatLng(13.725662281051, 100.54389480062); var bank2 = new google.maps.LatLng(13.72455686, 100.53948843); var bank3 = new google.maps.LatLng(13.726639, 100.540962); function initialize() { // Set up the map var mapOptions = { center: astorPlace, zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: false }; map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); // Setup the markers on the map var cafeMarkerImage = new google.maps.MarkerImage( 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00'); var cafeMarker = new google.maps.Marker({ position: cafe, map: map, icon: cafeMarkerImage, title: 'Starbucks Coffee Q-House Lumpini' }); //2 // Setup the markers on the map var cafeMarkerImage = new google.maps.MarkerImage( 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00'); var cafeMarker = new google.maps.Marker({ position: cafe2, map: map, icon: cafeMarkerImage, title: 'True Coffee \u0040 U Chu Liang Bldg.' }); //3 // Setup the markers on the map var cafeMarkerImage = new google.maps.MarkerImage( 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00'); var cafeMarker = new google.maps.Marker({ position: cafe3, map: map, icon: cafeMarkerImage, title: 'Coffee Society, Silom Rd Bangkok' }); //cofee var bankMarkerImage = new google.maps.MarkerImage( 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00'); var bankMarker = new google.maps.Marker({ position: bank, map: map, icon: bankMarkerImage, title: 'Lh Bank.' }); //2 var bankMarkerImage = new google.maps.MarkerImage( 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00'); var bankMarker = new google.maps.Marker({ position: bank2, map: map, icon: bankMarkerImage, title: 'HSBC [Thailand] Head Office' }); //3 var bankMarkerImage = new google.maps.MarkerImage( 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00'); var bankMarker = new google.maps.Marker({ position: bank3, map: map, icon: bankMarkerImage, title: 'Tisco Bank' }); var busMarkerImage = new google.maps.MarkerImage( 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00'); var busMarker = new google.maps.Marker({ position: busStop, map: map, icon: busMarkerImage, title: 'Bus Stop 62 Line' }); // We get the map's default panorama and set up some defaults. // Note that we don't yet set it visible. panorama = map.getStreetView(); panorama.setPosition(astorPlace); panorama.setPov({ heading: 265, zoom:1, pitch:0} ); } function toggleStreetView() { var toggle = panorama.getVisible(); if (toggle == false) { panorama.setVisible(true); } else { panorama.setVisible(false); } } </script> |
แทรกลงไปก่อนปิด Tag Body ครับ หรือถ้าหากไม่เคลียร์ให้เข้าไปดาวน์โหลดไฟล์ตัวอย่างนี้ได้ครับ
API Overlays Image with Google Street View API (Version 1.0.0)
อธิบายเล็กน้อยนะครับ
var astorPlace = new google.maps.LatLng(13.727502504576, 100.54071547188); |
คือตำแหน่งพิกัดที่ผมใช้เป็นจุดเริ่มต้นสามารถไปหาได้โดยการเข้าไปที่ Google Maps หาตำแหน่งของเราคลิกขวาแล้วเลือก What’s Here ครับ
หาพิกัดของเราในปัจจุบัน
ตามด้วยค่า ต่อๆ มาผมไปหาพิกัดตัวอย่างมาใส่ให้ครับ
var busStop = new google.maps.LatLng(13.726225795719, 100.5439968104); var cafe = new google.maps.LatLng(13.725659, 100.544477); var cafe2 = new google.maps.LatLng(13.727502504576, 100.54071547188); var cafe3 = new google.maps.LatLng(13.728851525653, 100.53526454728); var bank = new google.maps.LatLng(13.725662281051, 100.54389480062); var bank2 = new google.maps.LatLng(13.72455686, 100.53948843); var bank3 = new google.maps.LatLng(13.726639, 100.540962); |
ซึ่งแกะทีละตัวนะครับ แค่ตัวอย่างหนึ่งคือ
var cafe = new google.maps.LatLng(13.725659, 100.544477); |
คือตำแหน่งของ Starbuck Coffee ที่ตึก Q House ผมก็จะใช้ฟังก์ชันในการเรียกคือ
// Setup the markers on the map var cafeMarkerImage = new google.maps.MarkerImage( 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00'); var cafeMarker = new google.maps.Marker({ position: cafe, map: map, icon: cafeMarkerImage, title: 'Starbucks Coffee Q-House Lumpini' }); |
ส่วนวิธีการหา Latitude และ Longtitude นั้นไปอ่านได้ที่บทความนี้ครับ “พัฒนา Facebook Open Graph API ตอนที่ 3 เรียกดู Place บน Mobile”
ตามรูปแบบเพื่อให้ตำแหน่งดังกล่าวปรากฏขึ้นบน แผนที่ที่ผมสร้าง สังเกตที่บรรทัด
new google.maps.MarkerImage( 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00'); |
ผมใช้ API เสริมอีกตัวของ Google Chart มาช่วยในเรื่องของไอคอน Infographics ครับจะแทนด้วยรูปอื่นก็ได้ให้ใส่ Path รูปภาพของคุณได้เลย
ทดสอบดูครับ จะเห็นว่ามุมมองแผนที่นั้นทำงานได้แล้ว มีสถานที่ต่างๆ ที่ผมใส่ลงไปปรากฏขึ้นมาด้วย
รูปแบบของพิกัดปรากฏขึ้นแล้ว
ลอง Roll Over ดูเพื่ออ่านว่ามันคือสถานที่ไหน
ทดสอบมุมมองของ Google Street View อีกครั้งจะพบว่า หมุดพิกัดที่ผมเรียกมาปักไว้นั้นจะปรากฏบนหน้า Street View ด้วยพอดีอาจจะเล็กไปหน่อย
พิกัดของป้ายรถเมล์ที่ใส่ลงไปในตัวอย่าง
พิกัดร้านกาแฟครับ
แต่ถ้าใครที่ลองแนบไฟล์รูปภาพอื่นเข้าไปอาจจะดูสวยงามกว่านี้ครับ ยังไงลองทดสอบ Demo ของโครงงานนี้ได้ที่นี่ครับ
ส่วน Source Code สามารถดาวน์โหลดได้ทีนี่ครับ API Overlays Image with Google Street View API (Version 1.0.0)
