Introduce to Google Maps :: เตรียมพร้อมก่อนลุย
จาก blog ตอนที่แล้วพูดถึงวิธีเอา Google Maps มาใช้แบบง่ายๆ ให้เป็นเป็นตัวอย่างกันไปแล้ว ตอนนี้ก็อย่างที่ทิ้งท้ายไว้คราวก่อนที่ว่าจะเอาวิธิการกำหนดค่าต่างๆ เพื่อบอกให้กูเกิ้ลส่งข้อมูลที่พร้อมใช้งานให้เราได้มากที่สุด
หลังจากเราสมัครของ key เพื่อใช้ดึงข้อมูลจาก Google Maps เลื่อนลงมาด้านล่างจะเห็นตัวอย่างการดึงโค้ดไปใช้งาน ทั้ง JavaScript, Flash และ HTTP Services
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABCDEF" type="text/javascript"></script>
วิธีเรียกใช้งานแบบ JavaScript โดยที่ ABCDEF คือ key ที่กูเกิ้ลให้มา
ถ้าลองเปรียบเทียบตัวอย่างด้านบน และตัวอย่างจาก blog ตอนที่แล้ว จะเห็นได้ว่าโค้ดที่กูเกิ้ลให้มา มี parameters ตัวหนึ่งที่ผมได้ตัดออกไป นั่นคือ sensor ที่จะเป็นพารามิเตอร์ที่บอกให้กูเกิ้ลตรวจสอบว่าเครื่อง Client ที่เรียกเข้ามามี อุปกรณ์ GPS ด้วยหรือไม่ ค่าที่เป็นไปได้คือ true และ false (เป็นค่า default)
ภาษาในแผนที่
เมื่อลองวาดแผนที่หลังจากได้ข้อมูลมาจากกูเกิ้ลแล้ว จะเห็นได้ว่าภาษาที่ใช้ในแผนที่ประเทศไทยนั้นเป็นภาษาไทยทั้งหมด หากต้องการให้เป็นภาษาอังกฤษ หรือภาษาอื่นๆ ให้ใส่ค่าในตัวแปร hl เช่น &hl=en เพื่อบังคับให้ภาษาที่ใช้ในแผนที่เป็นภาษาอังกฤษ ดูรายละเอียดเพิ่มเติมที่ รายการภาษาที่กูเกิ้ลรองรับ โดยที่จะเข้ารหัสตัวอักษรแบบ “UTF-8″ เป็นค่า default หากต้องการเปลี่ยนให้กำหนดได้ที่ charset เช่น
... <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> ...
ตัวช่วย
จากที่ได้ยกตัวอย่างให้เห็นข้างตอน ถ้ายังไม่เข้าใจ หรือว่าอยากได้หลังสูตรเร่งรัด ทางกูเกิ้ลก็มีทางเลือกให้เช่นเดียวกันครับ คือ สามารถเข้าไปใช้บริการ ช่วยวาด เพียงแค่กรอกข้อมูลต่างๆ ลงไป เช่น ขนาดแผนที่ รูปแบบการแสดงผล และที่ขาด คือ เว็บไซต์ที่จนไปใส่ หลังจากนั้นก็กดปุ่ม “Generate Code” จะเห็นโค้ดกึ่งสำเร็จรูปอยู่ด้านล่างพร้อมที่จะนำเอาไปใช้ได้ทันที่ครับ
Tips and Tricks
- อย่าเอา
<script>แท็ก ที่ใช้วาดแผนที่ไปไว้ใน<body>แท็ก เด็ดขาด เพราะจะเกิดปัญหาเมื่อ user กดปุ่ม Back กลับมาเจอหน้าแผนที่อีกครับ เกิดขึ้นกับ Internet Explorer ทุกรุ่น ควรเอาไปวางไว้ ควรจะวางไว้ก่อน หรือหลัง<body>แท็ก (แนะนำให้วางไว้ระหว่าง</body>และ</html>) - ถ้าเป็นไปได้ ให้ใส่
onUnload="GUnload()"ใน<body>เพื่อลดภาระเรื่องหน่วยความจำให้เบราเซอร์
เช่น
<body onLoad="initMap()" onUnload="GUnload()">
initMap() ให้เป็นเพียงการเรียกฟังก์ชันสำหรับวาดแผนที่เท่านั้น ด้วยการกำหนดค่า callback ให้กับ google.load เป็น
...
function initMap() {
...
google.load("maps", "2", {"callback": drawMap});
...
}
function drawMap() {
// Map Render Script
}
...
ทั้งนี้เพื่อแก้ปัญหาที่จะเกิดขึ้นกับ IE ครับ เพราะ IE จะไม่ตรวจสอบว่า API ที่เราเรียกนั้นโหลดมาเรียบร้อยแล้วหรือยัง ทำให้จะเกิดข้อผิดพลาด เมื่อสร้าง object ของแผนที่ หรือมีการเรียกใช้ function บางอย่างของ Google Maps ครับ
คราวหน้า จะเริ่มเขียนเพื่อใช้งาน Google Maps กันแบบจริงจังแล้วครับ :D
Leave a Reply