Home / Developer  / Newbie  / Advance  / รวมเทคนิคเขียนโปรแกรมร่วมกับ Google Maps JavaScript API v3

รวมเทคนิคเขียนโปรแกรมร่วมกับ Google Maps JavaScript API v3

วิธีการเขียนโปรแกรมร่วมกับ Google Maps JavaScript API v3 ที่เน้นในการ Render Maps หรือแผนที่ของเราให้สวยงามโดยการทำงานเน้นที่ Javascript และ Google Maps API

ตัวอย่างจากบทความที่แล้วจะเป็น Static Maps API V2 ที่เน้นเรื่องของกราฟิกรูปภาพที่โต้ตอบอะไรไม่ได้มากในรอบนี้จะมีการ Advance ขึ้นมาหน่อยนั่นคือการใช้งานร่วมกับ Google Maps JavaScript API v3 ซึ่งจริงๆ Source Code ส่วนมากใน Hepl Document ของ Google Maps JavaScript API v3 ก็อธิบายได้ชัดเจนอยู่แล้วครับ แต่เราลองเอามาประยุกต์ใช้กันหน่อย

โดยการรวมเทคนิครอบนี้ จะเน้นตัวอย่างที่ใช้กันบ่อย

วิธีการ Render นั้นไม่ยากครับ แค่ใส่ Javascript ตามนี้ลงไป

ลองทดสอบรันเจ้าไฟล์ HTML ตัวนี้ดูก็จะได้ตามนี้ครับ

Screen Shot 2557-01-27 at 12.05.30 PM

ตัวแปรที่เราจะยุ่งด้วยบ่อยๆ คือ ตำแหน่ง Lat และ Lon ที่เราหาได้จาก Google Maps บริเวณ URL Bars ของ Browser ของเราครับ

หาได้จาก

Screen Shot 2557-01-27 at 12.12.00 PM

แผนที่ของเราแทรก tile coordinates ลงไปได้เพื่อระบุว่า พิกัดนี้คืออะไร โดยการใส่ code ตามนี้ครับ

ลองทดสอบรันดูครับ

Screen Shot 2557-01-27 at 12.09.30 PM

จะเห็นว่ามีฟังก์ชันบางตัวกำหนด พิกัดไว้คือ

และมีการเรียกใช้ Coordinates ดังนี้

ต่อมาเป็นเรื่องของการใช้งาน  Click Event เมื่อมีระบุพิกัด ตำแหน่งใจกลาง และตีกรอบด้วย พิกัด สี่เหลี่ยมเราสามารถทำให้ หมุดที่ปรากฏนั้น คลิกแล้วปรากฏข้อความขึ้นมาโชว์ได้ครับ

วิเคราะห์ส่วนนี้

เป็นการ ระบุว่าตำแหน่งไหน แสดงผลคำว่าอะไร

ลองทดสอบดู

Screen Shot 2557-01-27 at 12.16.49 PM

มาดูว่า ประเทศไทย เขตไหนหนาว หรือร้อนแค่ไหน สภาพภูมิอากาศเป็นยังไงบ้างก็ ลองเขียน Code ตามนี้ครับ

ส่วนนี้เปลี่ยนได้นะครับ

เปลี่ยนแปลงเป็น

แสดงผลกันหน่อย แบบ Fahrenheit และ Celsius

แบบ Fahrenheit

แบบ Fahrenheit

แบบ Celsius

แบบ Celsius

อันไหนเวิร์คก็จัดไปนะครับ

ตัวสุดท้ายก่อนแล้วกันคือการแทรกภาพ ของ Picasa และ Image Sharing ตัวอื่นๆ ให้มาปรากฏบน Map ของเราตาม tag ครับ

ไฟล์ทั้งหมดนี้ เอาไปแกะกันเองแล้วกันมี Source Code ให้ ถือว่านี่เป็น Tutorial  ที่กวนตีน และ ขี้เกียจที่สุดแล้วกันนะครับ เขี่ยๆ ส่งๆ ให้อ่านจริงๆ เพราะงานเยอะ

ลองทดสอบดูนะครับ

ภาพที่สำคัญ ละแวกนี้

ภาพที่สำคัญ ละแวกนี้

คลิกดูรายละเอียด

คลิกดูรายละเอียด

กรองเฉพาะโรงแรม

กรองเฉพาะโรงแรม

วิว แบบ ดาวเทียม

วิว แบบ ดาวเทียม

Download Source Code: http://www.daydev.com/download/GoogleMapsV3.zip

ขอบคุณ https://developers.google.com/maps/documentation/javascript/

Comments

daydevthailand@gmail.com

<p>อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์<br /> ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)</p>

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.

%d bloggers like this: