มาแต่ง Google Map กันเถอะ [part 3 - แปะ Marker บน Google Maps API Styled Map Wizard]

หลังจากสร้าง Google Maps Style ในรูปแบบที่เราต้องการแล้ว ก็ดึง JSON code มาใช้ร่วมกับ Java Script แล้วทำการสร้างไฟล์แผนที่ของเราขึ้นมา ต่อไปเราจะกล่าวถึงการ PIN ตำแหน่ง หรือ Marker ลงบนแผนที่ของเรา

แผนที่ ที่ได้จากการสร้าง Google Maps Style

(รายละเอียดติดตามได้ที่ Part2)

ทำการเพิ่มคำสั่ง Marker ลงไปใน map.js โดยใส่ใว้ถัดจาก คำสั่ง
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

รูปแบบคำสัง Marker ดังนี้

 var marker = new google.maps.Marker({
                            position: myLatLng,
                            map: map,
                            animation: google.maps.Animation.DROP,
                            title: "Welcome to Thailand" //แสดงเมื่อนำเมาส์ชี้ที่ Marker pin 
 });
 
        var info = new google.maps.InfoWindow({
                            content: '<h1>Hello</h1>' //คำที่แสดงเมื่อคลิก Marker pin
                        });
        google.maps.event.addListener(marker, 'click', function(){
            info.open(map, marker);
        });

แค่นี้ก็จะได้แผนที่แสดงตำแหน่งที่สมบรูณ์แล้ว

เป็นอันว่าจบบทเรียน เรื่อง "มาแต่ง Google Map กันเถอะ" แล้วนะคะ โดยข้อดีของเครื่องมือ Google Maps API Styled Map Wizard คือ สามารถแสดงแผนที่ในรูปแบบที่เราต้องการได้ แต่ก็ต้องอาศัยความรู้พื้นฐานของการเขียนโค้ดนิดหน่อย ถึงจะสามารถนำมาประยุกต์ใช้ได้จริงๆ

ส่วนข้อเสีย ก็ขัดกับข้อดีแหละค่ะ ถ้าคนที่ไม่มีความรู้พื้นฐานการเขียนโค้ดเลย อาจจะทำให้การนำไปใช้ยากหน่อย
 
ยังไงก็ ลองนำไปประยุกต์ใช้กับเว็บไซต์ของตนเองดูนะคะ เพื่อความโดดเด่นไม่ซ้ำใคร ^3^

สำหรับข้อมูลเพิ่มเติมสามารถติดตามได้ที่ https://developers.google.com/maps/