Tutorial: การแสดงสถานที่หลายจุดบนแผนที่ในหน้าเดียวกัน

คุณสามารถ mark สถานที่หลายจุดบน Longdo map ได้พร้อมกัน

โดยการ mark สถานที่มี 2 รูปแบบดังนี้

รูปแบบที่ 1 เหมาะกับสถานที่ส่วนตัว

ใช้วิธีการสร้าง marker แบบจุด หรือสร้าง user-defined div ขึ้นมาหลายจุด
รูปแบบที่ 2 เหมาะกับสถานที่สำัคัญ หน่วยงานของรัฐ หน่วยงานเอกชน บริษัท ห้าง ร้าน

ใช้วิีธีการ tag สถานที่

คุณสามารถศึกษาขั้นตอนการ mark สถานที่ทั้งสองรูปแบบ ได้ในหัวข้อถัดไป

การ mark สถานที่หลายจุดด้วย marker และ user-defined div

top

Listing 1 การสร้าง mark สถานที่แบบหลายจุดโดยการสร้าง marker

<html>
    <head>
        <title>Mutiple Marker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <style type="text/css">
            /*style สำหรับจัดรูปแบบของแผนที่*/
            #mmMapDiv{
                position:absolute;
                left:0px;
                top:0px;
            }
        </style>

        //เพิ่ม MM Map API JavaScript library
        <script
            type="text/javascript"
            src="http://mmmap15.longdo.com/mmmap/mmmap.php?key=b88e663af42b0db6d4761f6ac4eadd81">
        </script>

        <script type="text/javascript">

            //ตัวแปรเพื่อใช้อ้างอิงไปยัง map object
            var mmmap;

            //function initialize สำหรับสร้าง map object และสร้าง marker ขึ้นมา
            function initialize(){
                var mmMapDiv = document.getElementById("mmMapDiv");
                mmmap = new MMMap(mmMapDiv, 13.75514, 100.53128, 14, "normal");
                //ปรับขนาดของแผนที่ให้กว้าง 600 px และสูง 600 px ด้วย method setSize ของ map object
                mmmap.setSize(600,600);
                //เปลี่ยนจุดศูนย์กลางของแผนที่มายังจุดเริ่มต้น
                mmmap.moveTo(13.75534, 100.53136);
                //ปรับระดับการ zoom ของแผนที่เป็นค่าเริ่มต้น
                mmmap.setZoom(14);
                //ทำการแสดงผลแผนที่ใหม่ เพื่อปรับปรุงการแสดงผลของแผนที่ให้ถูกต้อง
                mmmap.rePaint();

                //สร้าง marker ตำแหน่งบ้านของ Mr A บนแผนที่ด้วย method createMarker ของ map object (mmmap)
                //และเก็บค่า marker id (ค่าที่ส่งคืนมาจาก method createMarker) ไว้ในตัวแปร markerIdA
                var markerIdA = mmmap.createMarker(13.75509,100.53177,
                "Mr A's house","Mr A's house, number 48");

                //แสดง popup ตรงตำแหน่ง marker ด้วย method showPopup ของ map object (mmmap)
                mmmap.showPopUp(13.75509,100.53177,
                "Mr A's house", "Mr A's house, number 48");

                //สร้าง marker ตำแหน่งบ้านของ Ms B บนแผนที่ด้วย method createMarker ของ map object (mmmap)
                //และเก็บค่า marker id (ค่าที่ส่งคืนมาจาก method createMarker) ไว้ในตัวแปร markerIdB
                var markerIdB = mmmap.createMarker(13.75493,100.53013,
                "Ms B's house","Ms B's house, number 60");

                //สร้าง marker ตำแหน่งบ้านของ Mr C บนแผนที่ด้วย method createMarker ของ map object (mmmap)
                //และเก็บค่า marker id (ค่าที่ส่งคืนมาจาก method createMarker) ไว้ในตัวแปร markerIdC
                var markerIdC = mmmap.createMarker(13.75556, 100.53026,
                "Mr C's house","Mr C's house, number 99");
            }

        </script>

    </head>
    <body onload="initialize()">
        <div id="mmMapDiv"></div>
    </body>
</html>

ผลลัพธ์

Listing 2 การ mark สถานที่หลายจุดด้วยรูปภาพโดยการสร้าง user-defined div ที่มีูรูปภาพอยู่ภายใน

<html>
    <head>
        <title>Mutiple user-defined div</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        
        <style type="text/css">
            /*style สำหรับจัดรูปแบบของแผนที่*/
            #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">

            //ตัวแปรเพื่อใช้อ้างอิงไปยัง map object
            var mmmap;

            //function initialize สำหรับสร้าง map object
            function initialize(){
                var mmMapDiv = document.getElementById("mmMapDiv");
                mmmap = new MMMap(mmMapDiv, 13.81998, 100.60558, 8, "traffic");

                //ปรับขนาดของแผนที่ให้กว้าง 600 px และสูง 600 px ด้วย method setSize ของ map object
                mmmap.setSize(600,600);
                //เปลี่ยนจุดศูนย์กลางของแผนที่มายังจุดเริ่มต้น
                mmmap.moveTo(13.83095, 100.60833);
                //ปรับระดับการ zoom ของแผนที่เป็นค่าเริ่มต้น
                mmmap.setZoom(8);
                //ทำการแสดงผลแผนที่ใหม่ เพื่อปรับปรุงการแสดงผลของแผนที่ให้ถูกต้อง
                mmmap.rePaint();

                //สร้าง user-defined div แบบแสดงข้อความแหน่งบ้านของ Mr A และเก็บค่า id ของ user-defined div ไว้ในตัวแปร userDivIdA
                var userDivIdA = createUserDivImage(13.83816, 100.54213,
                "/sites/default/files/u3/house.png",
                "Mr A's house, number 48");

                //สร้าง user-defined div แบบแสดงรูปภาพตำแหน่งบ้านของ Ms B
                //และเก็บค่า id ของ user-defined div ไว้ในตัวแปร userDivIdB
                var userDivIdB = createUserDivImage(13.86937, 100.65601,
                "/sites/default/files/u3/house.png",
                "Ms B's house, number 60");
   
                //สร้าง user-defined div แบบแสดงรูปภาพตำแหน่งบ้านของ Mr C
                //และเก็บค่า id ของ user-defined div ไว้ในตัวแปร userDivIdC
                var userDivIdC = createUserDivImage(13.7699, 100.6145,
                "/sites/default/files/u3/house.png",
                "Mr C's house, number 99");
            }

            //function createUserDivImage เพื่อสร้าง user-defined div ที่มีรูปภาพอยู่ภายใน
            function createUserDivImage(latitude, longitude, imageURL, description){
                //สร้าง div element
                var divElement = document.createElement("div");
                //สร้าง img element
                var imgElement = document.createElement("img");
                imgElement.setAttribute("src", imageURL);
                divElement.appendChild(imgElement);
                // **** เรียกใช้ method drawCustomDiv ของ map object (mmmap) เพื่อวาด user-defined div ลงบนแผนที่
                //และเก็บค่า id ของ user-defined div ไว้ในตัวแปร userDivId
                var userDivId = mmmap.drawCustomDiv(divElement,latitude, longitude,description);
                return userDivId;
            }
        </script>

    </head>
    <body onload="initialize()">
        <div id="mmMapDiv"></div>
    </body>
</html>

ผลลัพธ์

การ mark สถานที่หลายจุดด้วย Tag

top

ไปที่หน้าแรกของ Longdo Map แล้วคลิกที่ login เพื่อไปสู่หน้า login

กรอกข้อมูล username และ password แล้วคลิกที่ปุ่ม login เพื่อเข้าสู่ระบบ

หลังจากนั้นระบบจะเปลี่ยนหน้าปัจจุบันไปเป็นหน้าแรก เริ่มทำการค้นหาสถานที่โดยพิมพ์ชื่อสถานที่ลงในช่อง Search โดยในตัวอย่างนี้ เราจะสร้าง tag ให้กับ dentajoy ระหว่างที่ทำการพิมพ์จะมี keyword อื่นๆ ขึ้นมาช่วยแนะนำ ซึ่งหากมี keyword ตรงกับที่ต้องการปรากฎขึ้น

เราก็สามารถคลิกที่คำนั้นได้เลย จากในตัวอย่างให้คลิกที่ dentajoy

หลังจากนั้นจะมี pop up แสดงขึ้นมาและชี้ไปที่ตำแหน่งที่ตั้งของ dentajoy ให้คลิกที่ปุ่ม detail ที่อยู่ใน pop up

หน้าปัจจุบันจะเปลี่ยนไปเป็นหน้า detail คลิก Edit หลังจากนั้นจะมีช่อง tag ซึ่งแสดง tag keyword ปัจจุบันแสดงขึ้นมา

แก้ไข tag โดยเพิ่มคำว่า dentajoy เว้นวรรคคำด้วยจุลภาค (comma)

เลื่อน scrollbar ลงมาล่างสุด กดปุ่ม submit เพื่อบันทึกข้อมูล เราสามารถเพิ่ม tag ด้วย keyword เดียวกันให้กับสถานที่อื่นได้อีก ตัวอย่างเช่น เพิ่ม tag keyword dentajoy ใ้ห้กับ dentajoy สาขาอื่นๆ

หลักจากที่ได้เพิ่ม tag เข้าไป เราสามารถใช้ tag keyword นี้ค้นหาสถานที่ได้ด้วยการพิมพ์ข้อความ tag: xxxxx ลงในช่อง Search โดยที่ xxxxx คือ tag keyword ซึ่งในตัวอย่างนี้คือ dentajoy ผลลัพธ์จากการค้นหาจะเป็น icon รูป red cross แสดงตำแหน่งของ dentajoy สาขาต่างๆ

การสร้าง snippet แบบมี tag

top

ที่หน้าแรกของ Longdo map เลือกบริเวณที่จะแสดงตำแหน่งของสถานที่ และระดับการ zoom ของแผนที่ตามที่ต้องการ

หลังจากนั้นคลิกที่ "สร้าง Snippet"

จะเข้าสู่หน้าเพื่อทำการสร้าง Snippet คลิกที่ปุ่ม Generate HTML Code!

เลื่อน scrollbar ลงมาด้านล่าง จะได้ผลลัพธ์ของ HTML code ออกมา ทำการ copy HTML code เฉพาะค่าของ attribute source

นำค่าที่ copy มาไปวางในช่อง address bar ของ web browser เิพิ่ม &tag=xxxxx และ &mode=yyyyy โดยที่ xxxxx คือ tag keyword และ mode คือ รูปแบบการแสดงผลของแผนที่ โดยในที่นี้ tag กำหนดเป็น dentajoy และ mode กำหนดเป็น traffic ผลลัพธ์ที่ได้ใน web browser จะเป็นการแสดงตำแหน่งของ dentajoy โดยผู้ใช้สามารถนำ url นี้ไปใช้ใน website ของตนเองหรือนำไปประยุกต์ใช้ต่อได้

การ mark สถานที่หลายจุดด้วย marker และ user-defined div top

การ mark สถานที่หลายจุดด้วย Tag top

การสร้าง snippet แบบมี tag top

การ mark สถานที่หลายจุดด้วย marker และ user-defined div

top

การ mark สถานที่หลายจุดด้วย Tag

top

การสร้าง snippet แบบมี tag

top