การใช้งาน Google Map Javascript API

1. Google map Javascript API
1. เสิร์ช google คำว่ำ Google map Javascript api คลิกลิงค์แรก -> ทำกำรล็อคอิน
2. Get a key -> คลิ๊กที่ Yes ->Create and enable API
3. กด copy เก็บไว้
Log in ที่นี่
1
2
3

2. 4. นำไปเก็บไว้ใน Editplus (กด ctrl+ Nเพื่อสร้ำงหน้ำต่ำงเอกสำร)
5. คลิกที่ Samples -> คลิกที่ Sample map
6. จะได้หน้ำเว็บดังนี้ เลื่อนลงมำด้ำนล่ำงจะมี Code ดังภำพ -> กดที่คัดลอก
7. มำที่โปรแกรม Editplus สร้ำงหน้ำต่ำงเอกสำรใหม่เพิ่มอีกหนึ่งอัน (Ctrl+N) จำกนั้นวำงที่คัดลอกมำลง
1
2

3. 8. คัดลอกรหัสที่ไฟล์เดิม นำมำวำงแทนคำว่ำ YOUR API KEY
9. จำกนั้นบันทึก โดยเปลี่ยน type เป็น HTML และตั้งชื่อพร้อมทั้งเขียน .html ตำมด้วย
10. เมื่อไปเปิดในโฟลเดอร์ที่จัดเก็บ จะได้ผลลัพธ์ดังนี้ สำมำรถใช้ฟังก์ชั่นต่ำง ๆ ได้เหมือน Google Map
ทั้งเปลี่ยนเป็น ภำพถ่ำยดำวเทียม ภำพภูมิประเทศ รวมถึง Street View

4. 11. เปลี่ยนบรรทัดที่ 27 ให้เปลี่ยนตำแหน่งที่ต้องกำร และเปลี่ยนค่ำ Zoom ให้มำกขึ้น
12. เมื่อบันทึก แล้วกด Refresh จะได้ผลลัพธ์ดังภำพ
13. ในส่วนของ height เป็นกำรปรับแผนที่ให้มีควำมสูงเป็นกี่เปอร์เซ็นต์ของหน้ำต่ำงแสดงผล
ทดสอบเปลี่ยนเป็น 50%
14. จะได้ผลลัพธ์ดังภำพ *ข้อสำเหตุที่แผนที่อยู่ด้ำนบน เนื่องจำก วำงไว้ในส่วนของ head *

5. 15. และหำกลบบรรทัด <div id= “map”></div> ผลที่ได้คือ แผนที่จะไม่แสดง
16. จะเป็นดังภำพ