สืบเนื่องจากในหัวข้อก่อนหน้าที่ผมพูดถึง longdo map โดยได้สาธิตตัวอย่างของการนำ API มาใช้ในการทำ web application ของตัวเอง หลายๆท่านให้ความสนใจ วันนี้ผมจึงขอนำ code ตัวอย่างมาอธิบาย

        ตัวอย่างนี้ก็เป็นการใช้งาน API อย่างง่ายที่ผมนำมาจาก web site ของ longdo โดยนำมาเพิ่มเติม marker ของตัวเองลงไป รายละเอียดมีดังนี้นะครับ

<html>
<head>
<title>Test Longdo Map API </title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<meta http-equiv=”imagetoolbar” content=”no”>
<script type=”text/javascript” src=”http://mmmap15.longdo.com/mmmap/mmmap.php&#8221; > </script>
<script>
// เริ่มต้น JavaScript
var mmmap; // ประกาศ Global Varriable
function mmmap_client_init() { 
 // Get DIV Element  กำหนด object ค่าให้ mmmap_div
 var mmmap_div = document.getElementById(“mmmap_div”); 
 // กำหนดการทำงานฟังก์ชั่น myRepaint สำหรับ event OnResize ของ window
 window.onresize = myRepaint;
 // กำหนดตัวแปร mmmap เป็น MMMap Object มีพารามิเตอร์คือ div_object,lat,lon,zoom_level,type
 mmmap = new MMMap(mmmap_div,13.73783,100.5332,5, “normal”); 
 // Run ฟังก์ชั่น myRepaint();
 myRepaint(); 
 // สร้าง DIV Object
 var testdiv = document.createElement(“div”); 
 // กำหนดลักษณะของกรอบนอก DIV
 testdiv.style.border = “1px solid red”; 
 // สร้างข้อความใน DIV
 testdiv.innerHTML = “click me”;
 // กำหนด function testclick สำหรับ Event Onclick
 testdiv.onclick =  testclick; 
 // กำหนดค่าตำแหน่งเริ่มต้น
 testdiv.latitude = 13.73783; 
 testdiv.longitude = 100.5332;
 // สั่งให้ MMMap Object สร้าง DIV บนแผนที่
 mmmap.drawCustomDiv(testdiv, 13.73783, 100.5332, “HELLO PK”); 
 // สร้าง Marker บนแผนที่มีพารามิเตอร์คือ lat,lon,title,html content,
 var marker1 = mmmap.createMarker(13.73783,100.5332,”Chula”, “<font face=tahoma>จุฬาลงกรณ์มหาวิทยาลัย</font>”); 
 //กำหนดรายละเอียดสำหรับ Marker ที่สร้าง
 document.getElementById(“marker_” + marker1).detail += “<br><br><span style=’cursor:pointer;text-decoration:underline’ onclick=’mmmap.deleteMarker(“+marker1+”)’>Delete</span>”; 
 // กำหนดค่า zoom level ให้แสดงบนหน้าเว็บ
 document.getElementById(‘currentzoomlevel’).innerHTML = mmmap.getZoom();
}
function testclick(){
 // Function testclick สำหรับกำหนด การทำงานหลักจากคลิ๊กที่ DIV
 // กำหนดให้เปิด หน้าต่าง popup เพื่อแสดงรายละเอียดที่กำหนด
 mmmap.showPopUp(this.latitude, this.longitude, “My Office “, “Chula University”);
}
function myRepaint() {
 // Function myRepaint สำหรับการประมวลผลเพื่อวาดหรือ refresh แผนที่ใหม่
 chkWinSize(); 
 var newwidth = parseInt(ww) – 5 – 5; 
 var newheight = parseInt(wh) – 85 – 5; 
 mmmap.setSize(newwidth,newheight); 
 mmmap.rePaint();
}
</script>
</head>
<body onLoad=”mmmap_client_init()” scroll=”no” style=”overflow:hidden;margin: 0px 0px 0px 5px;” marginwidth=0 marginheight=0><a href=’/’>
<IMG HEIGHT=75 SRC=http://map.longdo.com/themes/longdo/logo.png BORDER=0 ALT=”Longdo Map Logo”></a>Start zoom level:
<span id=”currentzoomlevel”></span>
<!– div mmmap_div สำหรับ draw แผนที่จากแม่ข่าย –>
<div id=”mmmap_div” style=”position: absolute; left: 5px; top: 85px; width: 800px; height: 500px; border: 0px solid red”></div>
</body>
</html>