วิธี การปักหมุดบนแผนที่ (Marker) หลายตำแหน่ง (Array) บน Google Maps API
โพสต์แล้ว: 03/07/2017 5:44 pm
การปัดหมุดหลายตำแหน่งโดยการใช้ JavaScript ที่เป็น Array จะทำให้ง่ายต่อการจัดการตำแหน่งที่ตั้งที่หลากหลาย เพราะสามารถลูปค่าจาก Array แล้วปักลงบน Google Maps ได้ทันที่
การสร้างตัวแปร Array :
การ Loop :
การปักหมุด ค่าที่ได้จาก Array :
จากตัวอย่างโค้ดด้านบนจะเห็นได้ว่า การเพิ่มจำนวนการปักหมุดโดยใช้ Array จะสามารถจัดการได้ง่ายกว่า เพียงแค่เพิ่มตัวแปร Array ลงไปเท่านั้น
การสร้างตัวแปร Array :
โค้ด: เลือกทั้งหมด
var locations = [
['Test1', 13.836760, 100.582560],
['Test2', 13.836328, 100.582123],
['Test3', 13.837205, 100.581205]
];
โค้ด: เลือกทั้งหมด
for (i = 0; i < locations.length; i++) {
}
โค้ด: เลือกทั้งหมด
var marker, i, info;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: maps,
title: locations[i][0]
});
info = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
info.setContent(locations[i][0]);
info.open(maps, marker);
}
})(marker, i));
}