- การสร้างแผนที่ด้วย MM Map API
- เพิ่ม MM Map API JavaScript library เข้าไปใน web page file
- สร้าง div element สำหรับวางแผนที่
- สร้าง JavaScript function ไว้สำหรับสร้าง map object
- สร้าง map object ขึ้นมาเมื่อเกิด event onload ของ body tag
- สร้าง marker สถานที่
- ลบ marker สถานที่
- สร้าง user-defined div
- ลบ user-defined div
- ปรับขนาดของแผนที่
- เปลี่ยนจุดศูนย์กลางของแผนที่
- ปรับระดับการ zoom แผนที่ และการเรียกดูค่าระดับการ zoom ของแผนที่
- เปลี่ยนรูปแบบการแสดงผลของแผนที่
การสร้างแผนที่ด้วย MM Map API
4 ขั้นตอนง่าย ๆ ในการสร้างแผนที่บน website ของคุณเองด้วย MM Map API
- เพิ่ม MM Map API โดยใช้ JavaScript tag
- สร้าง div element ที่มี attribute id เท่ากับ mmMapDiv สำหรับวางแผนที่
- สร้าง JavaScript function ไว้สำหรับสร้าง map object
- สร้าง map object ขึ้นมาเมื่อเกิด event onload ของ body tag
1. เพิ่ม MM Map API JavaScript library เข้าไปใน web page file
สร้าง html file ขึ้นมา
Listing 1 html file
<html> <head> <title>create map</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </head> <body> </body> </html>
เพิ่ม JavaScript tag เข้าไปในส่วน ของ head tag
โดยให้ attribute src ของ JavaScript tag นี้ มีที่มีค่าเป็น
http://mmmap15.longdo.com/mmmap/mmmap.php?key=xxxxxxxxxxxxxxx
โดยที่ xxxxxxxxxxxxxx คือ key สำหรับการใช้งาน API ของ MM Map
ซึ่งสามารถขอได้จาก website ของ Longdo Map โดยการสมัครเป็น user อ่านรายละเอียดการขอ key MM Map API
Listing 2 JavaScript tag ใน html file
<html> <head> <title>Example Map</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script type="text/javascript" src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=18b1fbbda1f980b4e368c631a3d317ea"> </script> </head> <body> </body> </html>
จาก Listing 2 ในส่วนของ JavaScript tag ที่เพิ่มเข้าไป จะเห็นได้ว่าค่าของ key เท่ากับ 18b1fbbda1f980b4e368c631a3d317ea
2. สร้าง div element สำหรับวางแผนที่
สร้าง div element สำหรับวางแผนที่ โดยกำหนดค่า attribute id ให้กับ div นี้ด้วย เช่น mmMapDiv (จะกำหนดเป็นค่าอื่นก็ได้)
Listing 3 สร้าง div element
<div id="mmMapDiv"></div>
ต่อมากำหนด style ให้กับ div นี้ ด้วยการสร้าง style tag ไว้ในส่วน head
กำหนด selector เป็นแบบ id ชื่อ mmMapDiv และกำหนดค่าให้กับ property postition, left และ top
Listing 4 กำหนด style ให้กับ div element
<html> <head> <title>Example Map</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> charset=UTF-8"> <style type="text/css"> #mmMapDiv{ position:absolute; left:0px; top:0px; } </style> <script type="text/javascript" src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=18b1fbbda1f980b4e368c631a3d317ea"> </script> </head> <body> <div id="mmMapDiv"></div> </body> </html>
3. สร้าง JavaScript function ไว้สำหรับสร้าง map object
หลังจากที่เราได้เพิ่ม JavaScript tag เข้าไป จะทำให้เราสามารถเรียกใช้
constructor MMMap เพื่อสร้าง map object
คำสั่งในการการสร้าง map object เป็นดังนี้
Listing 5 คำสั่งในการสร้าง map object
var mmmap; mmmap = new MMMap(htmlElementObject, latitude, longitude, startZoomLevel, mapMode);
จาก Listing 5 ตัวแปร mmap เป็นตัวแปรที่อ้างอิง map oject คุณต้องประกาศตัวแปรด้วยชื่อนี้เท่านั้น
constructor MMMap รับ parameter 5 ตัว ได้แก่
- htmlElementObject (object type) คือ html element object ในที่นี้ html element คือ div ซึ่งเราได้ค่านี้มาจากการเข้าถึง html element ด้วย DOM โดยผ่าน object document และ method getElementById ตัวอย่างเช่น
Listing 6 การสร้างตัวแปรเพื่ออ้างอิงถึง div elementvar mmMapDiv= document.getElementById("mmMapDiv");
จาก Listing 6 เราสร้างตัวแปร mmMapDiv เพื่ออ้างอิงกับ element object ทำให้เราสามารถเปลี่ยนแปลงหรือแก้ไขค่าของ div element ที่มี id เป็น mmMapDiv ได้
- latitude (float type) คือ ค่าละติจูดของจุดศูนย์กลางแผนที่
- longitude (float type) คือ ค่าลองจิจูดของจุดศูนย์กลางแผนที่
- startZoomLevel (integer type) คือ ระดับการ zoom เริ่มต้นของแผนที่ ซึ่งสามารถกำหนดค่าเป็นจำนวนเต็มได้ตั้งแต่ 1 ถึง 14 ตัวเลขที่เพิ่มขึ้นหมายถึงระดับการ zoom ที่เพิ่มขึ้น
- mapMode (string type) คือ รูปแบบการแสดงผลของแผนที่ ซึ่งมีสองค่าให้เลือกคือ
- normal แสดงแผนที่แบบปกติ
- hydro แสดงแผนที่แบบลายน้ำ
ต่อไป เราจะสร้าง JavaScript function สำหรับสร้าง map object โดยเริ่มจาก
ประกาศตัวแปรชื่อ mmmap ไว้ภายนอก function เพื่อให้ทุก function สามารถเรียกใช้ตัวแปร mmmap ได้
Listing 7 JavaScript function สำหรับสร้าง map object
var mmmap; function initialize(){ var mmMapDiv = document.getElementById("mmMapDiv"); mmmap = new MMMap(mmMapDiv, 13.767734, 100.5351375, 3, "normal"); }
4. สร้าง map object ขึ้นมาเมื่อเกิด event onload ของ body tag
กำหนดค่า attribute onload ของ body tag เท่ากับ initialize() เพื่อเรียกใช้ function นี้
เมื่อมีการโหลด web page เรียบร้อยแล้ว
Listing 8 กำหนด function ให้กับ attribute onload ของ body tag
<body onload="initialize()">
ต่อไปจะเป็นตัวอย่างที่รวมทุกอย่างเข้าด้วยกัน เพื่อแสดงแผนที่ MM Map ใน web page
Listing 9 html page ที่แสดงแผนที่ MM Map
<html> <head> <title>create map</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> #mmMapDiv{ position:absolute; left:0px; top:0px; } </style> <script type="text/javascript" src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=18b1fbbda1f980b4e368c631a3d317ea"> </script> <script type="text/javascript"> var mmmap; function initialize(){ var mmMapDiv = document.getElementById("mmMapDiv"); mmmap = new MMMap(mmMapDiv, 13.767734, 100.5351375, 3, "normal"); } </script> </head> <body onload="initialize()"> <div id="mmMapDiv"></div> </body> </html>
สร้าง Marker สถานที่
คุณสามารถสร้าง marker เพื่อระบุตำแหน่งสถานที่โดยการเขียนคำสั่งเข้าไป map object จะมี method createMarker สำหรับสร้าง marker ขึ้นในแผนที่ ดังนั้นก่อนที่จะใช้ method createMarker คุณต้องสร้างตัวแปร เพื่ออ้างอิง Map object ก่อน อ่านวิธีการสร้างแผนที่
Listing 10 คำสั่งในการสร้าง marker
var markerId = mmmap.createMarker(latitude, longitude, "locationName", "locationDetail");
โดยที่ method createMarker รับ parameter 4 ตัว ได้แก่
- Latitude (float type) คือ ค่าละติจูดของตำแหน่งที่ต้องการสร้าง marker
- Longitude (float type) คือ ค่าลองจิจูดของตำแหน่งที่ต้องการสร้าง marker
- locationName (string type) คือ ชื่อสถานที่
- locationDetail (string type) คือ รายละเอียดของสถานที่
จาก Listing 10 ตัวแปร markerId สามารถกำหนดเป็นชื่ออื่นก็ได้
method createMarker คืนค่าเป็น id ของ marker มีชนิดข้อมูลเป็นจำนวนเต็ม
Listing 11 แสดง marker อนุสาวรีย์ชัยสมรภูมิในแผนที่
<html> <head> <title>create marker</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> #mmMapDiv{ position:absolute; left:0px; top:0px; } </style> <script type="text/javascript" src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=18b1fbbda1f980b4e368c631a3d317ea"> </script> <script type="text/javascript"> var mmmap; function initialize(){ var mmMapDiv = document.getElementById("mmMapDiv"); mmmap = new MMMap(mmMapDiv, 13.7689, 100.5380, 11, "normal"); createMarker(); } function createMarker(){ var markerId = mmmap.createMarker(13.7654, 100.538, "อนุสาวรีย์ชัยสมรภูมิ", "ศูนย์กลางการเดินทางขนส่งในกรุงเทพมหานคร"); } </script> </head> <body onload="initialize()"> <div id="mmMapDiv"></div> </body> </html>
ลบ marker สถานที่
map oject จะมี method deleteMarker สำหรับลบ marker ที่ได้สร้างไว้
Listing 12 คำสั่งในการลบ marker
mmmap.deleteMarker(markerId);
โดยที่ method deleteMarker รับ parameter 1 ตัว คือ markerId ซึ่งเป็นค่า id ของ marker ที่เราได้สร้างไว้ ค่า markerId นี้เป็นค่าที่ส่งคืนมาจาก method createMarker
นอกจากนี้เรายังสามารถแก้ไขข้อความที่แสดงใน pop up marker ได้ด้วย property detail
Listing 13 แก้ไขรายละเอียดของ pop up marker
document.getElementById("marker_" + markerId).detail = text || html code";
จาก Listing 13 ค่าที่กำหนดให้กับ property detail จะเป็นข้อความธรรมดา หรือเป็น html code ก็ได้
Listing 14 ลบ marker ออกจากแผนที่่
<html> <head> <title>remove marker</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> #mmMapDiv{ position:absolute; left:0px; top:0px; } #deleteDiv{ margin-top:30px; cursor:pointer; text-decoration:underline; } </style> <script type="text/javascript" src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=18b1fbbda1f980b4e368c631a3d317ea"> </script> <script type="text/javascript"> var mmmap; var markerId; function initialize(){ var mmMapDiv = document.getElementById("mmMapDiv"); mmmap = new MMMap(mmMapDiv, 13.7689, 100.5380, 11, "normal"); createMarker(); deleteMarker(); } function createMarker(){ markerId = mmmap.createMarker(13.7654, 100.538, "อนุสาวรีย์ชัยสมรภูมิ", "ศูนย์กลางการเดินทางขนส่งในกรุงเทพมหานคร"); } function deleteMarker(){ document.getElementById("marker_" + markerId).detail += "<div id='deleteDiv'" + "onclick='mmmap.deleteMarker(" + markerId + ")'>ลบ marker</div>"; } </script> </head> <body onload="initialize()"> <div id="mmMapDiv"></div> </body> </html>
สร้าง user-defined div
map object จะมี method drawCustomDiv สำหรับสร้าง div element บนแผนที่
Listing 15 คำสั่งในการสร้าง user-defined div
var userDivId = mmmap.drawCustomDiv(divElementObject, latitude, longitude, "titleText");
โดยที่ method drawCustomDiv รับ parameter 4 ตัว ได้แก่
- divElementObject (object type) คือ div element object โดยอาจเป็น div element ที่เราได้สร้างขึ้นใหม่ด้วย method createElement ของ object document
- latitude (float type) คือ ค่าละติจูดของตำแหน่งที่เราต้องการวาง div
- longitude (float type) คือ ค่าลองจิจูดของตำแหน่งที่เราต้องการวาง div
- titleText (string type) คือ ข้อความสำหรับอธิบาย div ข้อความนี้จะแสดงขึ้นมา เมื่อเราเลื่อน cursor ของ mouse ไปอยู่เหนือ div
Listing 16 สร้าง user-defined div บนแผนที่
<html> <head> <title>create user-defined div</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> #mmMapDiv{ position:absolute; left:0px; top:0px; } /* class style สำหรับ user-defined div */ .userDivStyle{ border:2px solid #FF0000; background-color:#FFFFFF; } </style> <script type="text/javascript" src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=18b1fbbda1f980b4e368c631a3d317ea"> </script> <script type="text/javascript"> var mmmap; function initialize(){ var mmMapDiv = document.getElementById("mmMapDiv"); mmmap = new MMMap(mmMapDiv, 13.767734, 100.5351375, 3, "normal"); //เรียก funtion createDiv เพื่อสร้าง user-defined div createDiv(); } //function สำหรับสร้าง user-defined div function createDiv(){ //สร้าง div element var userDiv = document.createElement("div"); //กำหนด attrbute class ของ div element เท่ากับ userDivStyle //ซึ่งเป็น class style ที่ได้สร้างไว้ใน style tag userDiv.className = "userDivStyle"; //กำหนดข้อความที่จะแสดงใน div element userDiv.innerHTML = "user-defined div"; //วาด div element บนแผนที่ var userDivId = mmmap.drawCustomDiv(userDiv, 13.767734, 100.5351375, "user-defined div"); } </script> </head> <body onload="initialize()"> <div id="mmMapDiv"></div> </body> </html>
นอกจากนี้คุณยังสามารถกำหนดระดับการ zoom ของแผนที่พร้อมกับการสร้าง user-defined div โดยการใช้ method drawCustomDivLevel
Listing 17 สร้าง user-defined div ที่มีการกำหนดระดับการ zoom ของแผนที่
mmmap.drawCustomDivLevel(divElementObject, latitude, longitude, titleText, minZoom, maxZoom);
โดยที่ method drawCustomDivLevel รับ parameter 6 ตัว ได้แก่
- divElementObject (object type) คือ div element object โดยอาจเป็น div element ที่เราได้สร้างขึ้นใหม่ด้วย method createElement ของ object document
- latitude (float type) คือ ค่าละติจูดของตำแหน่งที่เราต้องการวาง div
- longitude (float type) คือ ค่าลองจิจูดของตำแหน่งที่เราต้องการวาง div
- titleText (string type) คือ ข้อความสำหรับอธิบาย div ข้อความนี้จะแสดงขึ้นมา เมื่อเราเลื่อน cursor ของ mouse ไปอยู่เหนือ div
- minZoom (int type) คือ ระดับการ zoom ต่าสุด สามารถกำหนดค่าเป็นจำนวนเต็มได้ตั้งแต่ 1 - 14
- maxZoom (int type) คือ ระดับการ zoom สูงสุด สามารถกำหนดค่าเป็นจำนวนเต็มได้ตั้งแต่ 1 - 14
คุณยังสามารถกำหนดสร้าง pop up และข้อความใน pop up พร้อมกับการสร้าง user-defined div โดย pop up จะแสดงขึ้นมาเมื่อคลิกที่ user-defined div นั้น
Listing 18 สร้าง user-defined div ที่มี pop up
mmmap.drawCustomDivWithPopup(divElementObject, latitude , longitude, titleText , popUpText);
โดยที่ method drawCustomDivWithPopup รับ parameter 5 ตัว ได้แก่
- divElementObject (object type) คือ div element object โดยอาจเป็น div element ที่เราได้สร้างขึ้นใหม่ด้วย method createElement ของ object document
- latitude (float type) คือ ค่าละติจูดของตำแหน่งที่เราต้องการวาง div
- longitude (float type) คือ ค่าลองจิจูดของตำแหน่งที่เราต้องการวาง div
- titleText (string type) คือ ข้อความสำหรับอธิบาย div ข้อความนี้จะแสดงขึ้นมา เมื่อเราเลื่อน cursor ของ mouse ไปอยู่เหนือ div
- popUpText (string type) คือ ข้อความที่ต้องการแสดงใน pop up
Listing 19 สร้าง user-defined div ที่มีการกำหนดระดับการ zoom ของแผนที่และ pop up
mmmap.drawCustomDivLevelWithPopup(divElementObject, latitude, longitude, titleText , minZoom, maxZoom, popUpText);
โดยที่ method drawCustomDivLevelWithPopup รับ parameter 7 ตัว ได้แก่
- divElementObject (object type) คือ div element object โดยอาจเป็น div element ที่เราได้สร้างขึ้นใหม่ด้วย method createElement ของ object document
- latitude (float type) คือ ค่าละติจูดของตำแหน่งที่เราต้องการวาง div
- longitude (float type) คือ ค่าลองจิจูดของตำแหน่งที่เราต้องการวาง div
- titleText (string type) คือ ข้อความสำหรับอธิบาย div ข้อความนี้จะแสดงขึ้นมา เมื่อเราเลื่อน cursor ของ mouse ไปอยู่เหนือ div
- minZoom (int type) คือ ระดับการ zoom ต่าสุด สามารถกำหนดค่าเป็นจำนวนเต็มได้ตั้งแต่ 1 - 14
- maxZoom (int type) คือ ระดับการ zoom สูงสุด สามารถกำหนดค่าเป็นจำนวนเต็มได้ตั้งแต่ 1 - 14
- popUpText (string type) คือ ข้อความที่ต้องการแสดงใน pop up
ลบ user-defined div
map object มี method removeCustomDivs สำหรับลบ user-defined div
Listing 20 คำสั่งในการลบ user-defined div
mmmap.removeCustomDivs(userDivId);
โดยที่ method removeCustomDivs รับ parameter 1 ตัว คือ userDivId ซึ่งเป็นค่า id ของ user-defined div ที่ได้สร้างไว้ ค่า id นี้เป็นค่าที่ส่งคืนมาจาก method drawCustomDiv เป็นจำนวนเต็ม (integer)
Listing 21 ลบ user-defined div เมื่อคลิกที่ user-defined div เอง
<html> <head> <title>remove user-defined div</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> #mmMapDiv{ position:absolute; left:0px; top:0px; } /* class style สำหรับ user-defined div */ .userDivStyle{ border:2px solid #FF0000; background-color:#FFFFFF; } </style> <script type="text/javascript" src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=18b1fbbda1f980b4e368c631a3d317ea"> </script> <script type="text/javascript"> var mmmap; var userDivId; function initialize(){ var mmMapDiv = document.getElementById("mmMapDiv"); mmmap = new MMMap(mmMapDiv, 13.767734, 100.5351375, 3, "normal"); //เรียก funtion createDiv เพื่อสร้าง user-defined div createDiv(); } //function สำหรับสร้าง user-defined div function createDiv(){ //สร้าง div element var userDiv = document.createElement("div"); //กำหนด attrbute class ของ div element เท่ากับ userDivStyle /ซึ่งเป็น class style ที่ได้สร้างไว้ใน style tag userDiv.className = "userDivStyle"; //กำหนดข้อความที่จะแสดงใน div element userDiv.innerHTML = "user-defined div"; //ผูก function removeDiv เข้ากับ event onclick ของ div element userDiv.onclick = removeDiv; //วาด div element บนแผนที่ userDivId = mmmap.drawCustomDiv(userDiv, 13.767734, 100.5351375, "user-defined div"); } //function สำหรับลบ user-defined div function removeDiv(){ mmmap.removeCustomDivs(userDivId); } </script> </head> <body onload="initialize()"> <div id="mmMapDiv"></div> </body> </html>
นอกจากนี้ คุณยังสามารถลบ user-defined div ที่ได้สร้างไว้ทั้งหมดด้วย method clearCustomDivs
Listing 22 ลบ user-defined div ทั้งหมด
mmmap.clearCustomDivs();
ปรับขนาดของแผนที่
คุณสามารถปรับขนาดของแผนที่ด้วยการเขียนคำสั่งเพิ่มเติม map object มี method setSize สำหรับการปรับเพิ่มหรือลดขนาดของแผนที่ method setSize ใช้ร่วมกับ method rePaint เพื่อเป็นการ refresh แผนที่ใหม่ ทำให้แผนที่มีการแสดงขนาดได้ถูกต้อง
Listing 23 ปรับขนาดแผนที่
mmmap.setSize(mapWidth,mapHeight); mmmap.rePaint();
โดย method setSize รับ parameter 2 ตัว ได้แก่
- mapWidth คือ ขนาดความกว้างของแผนที่
- mapHeight คือ ขนาดความสูงของแผนที่
ใน MM Map API ได้เตรียม function chkWinSize เพื่อเก็บข้อมูลขนาดของหน้าต่าง browser เราสามารถประยุกต์ใช้ function chkWinSize และ method setSize เพื่อทำให้แผนที่มีการปรับขนาดตามขนาดของหน้าต่าง browser ที่เปลี่ยนไป
Listing 24 แผนที่ปรับขนาดอัตโนมัติให้พอดีกับหน้าต่าง browser
<html> <head> <title>auto resize map</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> #mmMapDiv{ position:absolute; left:0px; top:0px; } </style> <script type="text/javascript" src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=b88e663af42b0db6d4761f6ac4eadd81"> </script> <script type="text/javascript"> var mmmap; function initialize(){ var mmMapDiv = document.getElementById("mmMapDiv"); mmmap = new MMMap(mmMapDiv, 13.767734, 100.5351375, 3, "normal"); //เรียกใช้ function adJustMapSize ให้ปรับขนาดของแผนที่ //ให้พอดีกับหน้าต่าง browser adJustMapSize(); //ผูก function adJustMapSize เข้ากับ event onresize //ของ window ซึ่งก็คือ browser นั่นเอง window.onresize = adJustMapSize; } //function สำหรับปรับขนาดของแผนที่ให้เต็มหน้าต่าง browser โดยอัตโนมัติ function adJustMapSize() { //เรียกใช้ function chkWinSize เพื่อเก็บขนาดของหน้าต่าง browser //โดยเก็บความกว้างไว้ในตัวแปร ww และความยาวไว้ในตัวแปร wh chkWinSize(); //ใช้ function parstInt เพื่อแปลงข้อมูลเป็นจำนวนเต็ม var newwidth = parseInt(ww) - 5 - 5; var newheight = parseInt(wh) - 85 - 5; //เรียกใช้ method setSize และ rePaint เพื่อปรับขนาดของแผนที่ mmmap.setSize(newwidth,newheight); mmmap.rePaint(); } </script> </head> <body onload="initialize()"> <div id="mmMapDiv"></div> </body> </html>
เปลี่ยนจุดศูนย์กลางของแผนที่
MM Map API ได้จัดเตรียม method moveTo ของ map object ไว้สำหรับ เปลียนตำแหน่งจุดศูนย์กลางของแผนที่
Listing 25 รูปแบบคำสั่ง method moveTo
mmmap.moveTo(latitude, longitude);
โดยที่ method moveTo รับ parameter 2 ตัว ได้แก่
- latitude (float type) คือ ค่าละติจูด
- longitude (float type) คือ ค่าลองจิจูด
ปรับระดับการ zoom ของแผนที่ และการเรียกดูค่าระดับการ zoom ของแผนที่
map oject มี method setZoom ไว้สำหรับปรับระดับการ zoom ของแผนที่
Listing 26 ปรับระดับการ zoom ของแผนที่
mmmap.setZoom(zoomLevel);
โดยที่ method setZoom รับ parameter 1 ตัวคือ zoomLevel เป็นค่าระดับการ zoom ของแผนที่่ ซึ่งสามารถกำหนดค่าเป็นจำนวนเต็มได้ตั้งแต่ 1 ถึง 14 ตัวเลขที่เพิ่มขึ้นหมายถึงระดับการ zoom ที่เพิ่มขึ้น
นอกจากนี้เรายังเรียกดูระดับการ zoom ของแผนที่ขณะนั้น โดยใช้ method getZoom
Listing 27 เรียกดูระดับการ zoom ของแผนที่ขณะนั้น
var mapZoomLevel = mmmap.getZoom();
method getZoom ไม่มี parameter คืนค่าออกมาเป็นตัวเลขจำนวนเต็มที่เป็นระดับการ zoom ของแผนที่ขณะนั้น
จาก Listing 23 เราได้ประกาศตัวแปร mapZoomLevel เพื่อเก็บค่าระดับการ zoom ของแผนที่ขณะนั้น
เปลี่ยนรูปแบบการแสดงผลของแผนที่
map object มี method setMapMode สำหรับใช้ในการเปลียนรูปแบบการแสดงผลของแผนที่
Listing 28 เปลี่ยนรูปแบบการแสดงผลของแผนที่
mmmap.setMapMode("mapMode");
โดยที่ method setMapMode รับ parameter 1 ตัว คือ mapMode เป็นข้อความเลือกรูปแบบการแสดงผลของแผนที่ ซึ่งมีสองค่าให้เลือกคือ
- normal แสดงแผนที่แบบปกติ
- hydro แสดงแผนที่แบบลายน้ำ
และเรายังสามารถเรียกดูได้ว่า ขณะนี้แผนที่มีรูปแบบการแสดงผลเป็นแบบใด
Listing 29 เรียกดูรูปแบบการแสดงผลของแผนที่
var currentMapMode = mmmap.getMapMode();
method getMapMode ไม่มีการรับ parameter คืนค่าออกมาเป็นข้อความบอกรูปแบบการแสดงผลของแผนที่ขณะนั้น