เริ่มกับ Google Map อย่างง่ายด้วยการสร้าง marker

สมัยนี้การเดินทางหรือข้อมูลบน internet เกี่ยวกับสถานทีหรือแผนการเดินทางส่วนใหญ่แล้วจะใช้โปรแกรมยอดนิยมอย่าง Google Map นั้นเองวันนี้จะมาแสดงตัวอย่างการสร้าง marker บน google map ซึ่งเป็นระดับพื้นฐานที่ไม่ได้มีการใช้ google map api อะไรเลย โดยเราจะดึงค่าพิกัดลัดติจูดกับลองติจูดจาก php โดยผ่าน javascript ในลักษณะการดึงและรับส่งข้อมูลแบบ ajax นั้นเอง โดยตัวอย่างนี้จะประกอบด้วยไฟล์ 2 ไฟล์คือไฟล์ html ที่ภายในประกอบด้วย html และ javascript ส่วนอีกไฟล์จะเป็นไฟล์ php ที่จะคืนค่าพิกัดมาให้อยู่ในรูปแบบของ xml จากนั้นเมื่อดึงค่าผ่าน ajax แล้วจะทำการส่งค่าพิกัดไปให้ google map เพื่อแสดงบนแผนที่นั้นเอง

ขั้นแรกเรามาสร้างไฟล์ html ที่ใช้ ajax ในการดึงข้อมูลพิกัดและแสดงแผนที่อีกด้วย โดยให้สร้างไฟล์ที่ชื่อว่า map.html โดยมีโค้ดดังนี้

[sourcecode language=”html”]





PHP/MySQL & Google Maps Example

[/sourcecode]

โค้ดตัวอย่างนี้เป็นโค้ดจากบทเรียนของทาง google เองซึ่งผมเอามาแก้ไขนิดหน่อย โดยหลักการทำงานของมันก็คือเมื่อมีการโหลดเพจจะทำการเรียกฟังก์ชั่น load สังเกตจากคำสั่งบรรทัด

[sourcecode language=”html”]

[/sourcecode]

ในฟังก์ชั่นนี้ก็จะทำการเรียกใช้ฟังก์ชั่น downloadUrl ซึ่งมันจะส่ง request ajax ไปดึงข้อมูลจากไฟล์ phpsqlajax_genxml.php เมื่อมันได้ค่าคืนมาก็จะใช้คำสั่ง getElementsByTagName ของ javascript เพื่อแยกข้อมูลออกเป็นส่วนๆเพื่อนำไปสร้างแผนทีนั้นเอง โดยในการสร้างแผนที่นั้นจะต้องมี ละติจูด กับ ลองจิจูด ของพื้นที่ที่เราจะสร้างแผนที่จากนั้นในการสร้าง marker นั้นก็จะต้องมีชื่อกับที่อยู่รวมไปถึงตำแหน่ง ละติจูด กับ ลองจิจูด เพื่อทำการจำหนดจุดนั้นเอง

[sourcecode language=”html”]

var map = new google.maps.Map(document.getElementById(“map”), {
center: LatLng,
zoom: 13,
mapTypeId: ‘roadmap’
});

[/sourcecode]

ส่วนคำสั่งชุดนี้จะเป็นการกำหนดลักษณะของแผนที่ที่จะสร้าง มีการกำหนดว่าจะให้ไป render ที่ div id ชื่ออะไรส่วนตัวแปรที่ควบคุมการแสดงแผนที่นั้นจะเป็นตัวนี้   var infoWindow = new google.maps.InfoWindow; ค่อยให้มันแสดงแผนที่ตามที่กำหนดไว้ ส่วนการกำหนดจุดตำแหน่งนั้นจะเป็นคสั่งในส่วนนี้ครับ

[sourcecode language=”html”]

var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});

[/sourcecode]

ซึ่งจะมีการกำหนด icon ในการ maker และตำแหน่งคือ position นั้นซึ่ง 2 ส่วนนี้มาจากโค้ดก่อนหน้านี้ให้ไปไล่ดูในโค้ดตัวเต็ม จากนั้นมันจะทำการส่งตัวแปร map ไปยังฟังก์ชั่น bindInfoWindow เพื่อแสดงจุด marker บนแผนที่

ต่อจากนั้นสังเกตโค้ด javascript จะเห็นว่ามีการไปดึงข้อมูลจากไฟล์ php ที่ชื่อว่า phpsqlajax_genxml.php ซึ่งเมื่อเราทำการเขียนโค้ดไฟล์ map.html เสร็จแล้วให้ทำการสร้างไฟล์ phpsqlajax_genxml.php โดยมีโค้ดดังต่อไปนี้

[sourcecode language=”php”]



‘;
echo ‘‘;
?>

[/sourcecode]

xml map

โดยไฟล์ php จะคืนค่ามาเป็น xml กลับไปให้ไฟล์ map.html นำไปแยกข้อมูลตามโค้ดด้านบน โดยโค้ดนี้ไม่มีอะไรมากแค่ทำการนำข้อมูลต่างๆมาแสดงผลออกมาให้อยู่ในรูปแบบ xml โดยส่วนสำคัญคือ คำสั่ง header(“Content-type: text/xml”); เพื่อเป็นการระบุว่าจะอยู่ในรูปแบบ xml นั้นเอง

เขียน php google map

ผลลัพธ์การรันเมื่อเรียกไฟล์ map.html ตัวอย่างนี้แนะนำว่าให้นำไฟล์ไปวางบน web server ด้วยนะครับ

Download SourceCode

อ้างอิง developers.google.com

Leave a Reply

Your email address will not be published. Required fields are marked *