สวัสดีครับ วันนี้ผมจะมาแนะนำวิธีการใช้งาน Google Map API Version 3 ด้วย Javascript กันนะครับ
ก่อนอื่นเลย เมื่อจะเรียกใช้ Google Map API จะต้อง ทำการอ้างอิงถึง Script ของ Google ก่อนด้วย
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3"></script>
จาก Code ข้างบนจะเป็นการอ้างอิงถึง API ของ Google ที่ Google เปิดให้พัฒนาโปรแกรมด้วย Map
แต่เพียงเท่านั้นก็ยังไม่มีแผนที่ปรากฏขึ้นมา ดังนั้นเราจะต้องใช้งาน API เพื่อสร้างแผนที่ขึ้นมา อันดับแรก สร้างที่สำหรับแสดงแผนที่ก่อน
<div id="map_canvas" style="width:100%; height:100%"></div>
จาก Code ข้างบน จะเป็นประกาศพื้นที่ว่าง ขาดเท่ากับ 100% ทั้งกว้างและสูง
เมื่อได้ที่ที่แสดงแล้วเราก็มาสร้างแผนที่กัน
ระหว่างการสร้างผมก็ได้เปิดอ่าน Reference เพื่อความเข้าใจ
http://code.google.com/intl/th-TH/apis/maps/documentation/javascript/reference.html
<script type="text/javascript">
var latlng ;
function initialize(map_canvas)
{
latlng = new google.maps.LatLng(13.75,100.517);
var mapOptions = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggableCursor:"crosshair",
tilt:0
};
map = new google.maps.Map(document.getElementById(map_canvas), mapOptions);
google.maps.event.addListener(map, "click", function(point) {
// Listener ต่างๆ เช่น คลิกแล้ว เรียกฟังก์ชันอะไร คลิกแล้วทำอะไร
});
}
}
</script>
*************************************************************************
คำอธิบาย Code
latlng = new google.maps.LatLng(13.75,100.517);
จะเป็นการสร้างพิกัด (Point x,y) รับพารามิเตอร์เข้าเป็น ละติจูด ลองจิจูด
var mapOptions = { // จะเป็นการกำหนด Option ที่ต้องการให้แผนที่แสดงผล
zoom: 1, // การซูม จะให้ ซูมเข้าไปเท่าไร
center: latlng, // จุดศูนย์กลางของแผนที่
mapTypeId: google.maps.MapTypeId.ROADMAP, // รูปแบบของแผนที่ ในที่นี้แสดงเฉพาะเส้นทาง
draggableCursor:"crosshair", // รูปแบบของ MousePointer ที่จะแสดงผลบนแผนที่ ที่ใช้ drag
}; // ยังมี Option อีกมากมาย สามารถอ่านได้ใน Reference ด้านบนนะครับ
MAPTYPE : http://code.google.com/intl/th-TH/apis/maps/documentation/javascript/maptypes.html
map = new google.maps.Map(document.getElementById(map_canvas), mapOptions);
ทำการสร้าง Map ขึ้นมา รับพารามิตเรอ์คือ พื้นที่สำหรับแสดงแผนที่ และ Option
google.maps.event.addListener(map, "click", function(point) {
// Listener ต่างๆ เช่น คลิกแล้ว เรียกฟังก์ชันอะไร คลิกแล้วทำอะไร
});
Listener มีมากมายสามารถดูได้ใน Reference นะครับ ไม่จะเป็นจะต้องมีแค่ click อย่างเดียว "rightclick" และอื่นๆ ก็มีเช่นกัน
MapOption : http://code.google.com/intl/th-TH/apis/maps/documentation/javascript/reference.html#MapOptions
Events : http://code.google.com/intl/th-TH/apis/maps/documentation/javascript/reference.html#Map
**********************************************************************
โอเคครับ สำหรับขั้นตอนการสร้างก็เสร็จเรียบร้อยแล้ว
สำหรับการเรียกใช้ จะเป็นดังนี้
<script type="text/javascript">
initialize('map_canvas'); // ตาม id ที่เรากำหนดไว้ให้เป็นพื้นที่ว่าง
</script>
โอเคครับ สำหรับ บล็อก [JavaScript] Google Map API V3 ก็มีเพียงเท่านี้นะครับ
หาสงสัยอะไรสามารถเม้นไว้ได้นะครับ ว่างๆผมจะเข้ามาตอบครับ
ขอบคุณครับ ^^
ไม่มีความคิดเห็น:
แสดงความคิดเห็น