Google Maps api v2 - การนำพิกัดจากฐานข้อมูลมาแสดงบน Google Map

บทความนี้มาต่อไนเรื่องของ Google Map api v2 จากที่เคยกล่าวถึงในเรื่องของ Google Maps api v2 - การเชื่อมต่อฐานข้อมูล เพื่อแปลง Mysql ให้เป็นไฟล์ Xml เพื่อใช้ในการสร้าง Marker บนแผนที่ มาแล้ว บทความนี้จะเป็นการนำ Marker มาแสดงผลบน Google Map ซึ่งเป็นการนำพิกัดที่ได้เก็บไว้มาแสดงผลเป็น Marker และ sidebar (แถบแสดงข้อมูลบนแผนที่) คำสั่งจะอยู่ในรูปของโค้ดด้านล่างครับ

GDownloadUrl("phpsqlajax_markers.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'No results found.';
return;
}
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = "cross";
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type);
map.addOverlay(marker);
var sidebarEntry = createSidebarEntry(marker, name, address);
sidebar.appendChild(sidebarEntry);
bounds.extend(point) ;
}
});
}

function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>ชื่อสถานที่ : " + name + "</b> <br/>ที่อยู่ : " + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
}); return marker;
}

function createSidebarEntry(marker, name, address) {
var div = document.createElement('div');
var html = "<b>ชื่อ : " + name + "</b> <br/>ที่อยู่ : " + address ;
div.innerHTML = html;
div.style.cursor = 'pointer';
div.style.marginBottom = '5px';
GEvent.addDomListener(div, 'click', function() {
GEvent.trigger(marker, 'click');
});
GEvent.addDomListener(div, 'mouseover', function() {
div.style.backgroundColor = '#eee';
});
GEvent.addDomListener(div, 'mouseout', function() {
div.style.backgroundColor = '#fff';
});
return div;
}

จากโค้ดตัวอย่างนี้จะทำการโหลดข้อมูลจากบทความ " Google Maps api v2 - การเชื่อมต่อฐานข้อมูล เพื่อแปลง Mysql ให้เป็นไฟล์ Xml เพื่อใช้ในการสร้าง Marker บนแผนที่"  ขึ้นมาเพื่อทำการสร้าง Marker ขึ้นมาบนแผนที่ โดยข้อมูลจะถูกสร้างขึ้นมาและเก็บไว้ที่ตัวแปล sidebar เพื่อเก็บไว้ใช้แสดงข้อมูล โดยคำสั่ง for (var i = 0; i < markers.length; i++) จะทำการวนลูปสร้าง พิกัดขึ้นมาจนครบ และดึงข้อมูล name(ชื่อ), address(ที่อยู่), type(รูปแบบmarkerที่ให้แสดง) และ point(พิกัด) เพื่อสำหรับเรียกใช้งานการแสดงผลของฟังชั้น createMarker

function createMarker เพื้อใช้ในการแสดงผล Marker ออกมาด้วยคำสั่ง map.addOverlay(marker); และ 

function createSidebarEntry เพื้อสร้างการแสดงผลในส่วน body ของ Html เพื่อเรียกใช้งานได้้ให้ไปสู่พิกัดที่เก็บไว้ได้ทันที่เมื่อเลือก เขียนไปเขียนมาก็งงลองโหลดตัวอย่างไปดูล่ะกันครับ