---
title: "การแสดงสถานที่ด้วย Tags"
description: "ตัวอย่างนี้จะแสดงวิธีการแสดงจุดสนใจ (POI) ที่มีอยู่แล้วในระบบของ Longdo Map โดยกรองตาม tag หรือหมวดหมู่ ด้วย map.Tags"
canonical_url: "https://map.longdo.com/docs/v3/javascript/marker/place-tags/"
last_updated: "2026-09-24T14:57:25.611Z"
---

# การแสดงสถานที่ด้วย Tags

`map.Tags` ช่วยให้ท่านแสดงจุดสนใจ (POI) ที่ Longdo Map จัดเก็บไว้อยู่แล้ว โดยกรองตาม tag หรือหมวดหมู่ ได้โดยไม่ต้องสร้างชุดหมุดขึ้นมาเอง Longdo เป็นผู้ดูแลข้อมูล POI เหล่านี้ให้อยู่แล้ว ไม่ว่าจะเป็นร้านอาหาร โรงแรม ปั๊มน้ำมัน และอื่น ๆ ท่านจึงไม่ต้องหาข้อมูล ทำ geocode หรือดูแลฐานข้อมูลสถานที่ของตัวเอง เพียงระบุ tag ที่ต้องการ หมุดก็จะอัปเดตตามข้อมูลของ Longdo โดยอัตโนมัติ

<map-demo preset="v3-place-tags-1">



</map-demo>

## การเพิ่ม Tag

```javascript
map.Tags.add('shopping');
```

## การเพิ่ม Tag พร้อม Options

```javascript
map.Tags.add('hotel', {
  visibleRange: { min: 10, max: 20 },
  icon: {
    url: 'https://upload.wikimedia.org/wikipedia/commons/6/67/Exotic_cat_transparent.png?utm_source=commons.wikimedia.org&utm_campaign=index&utm_content=original',
    size: { width: 60, height: 60 }
  }
});
```

`TagOptions`:

- `visibleRange` : ระยะการซูมที่สามารถมองเห็นหมุดของ tag นี้ได้
- `icon` : object แบบ [`Icon`](https://api.longdo.com/map3/doc.html#Icon) (`url`, `urlHD`, `offset`, `size`) หรือใส่ค่าพิเศษ `'big'`/`'small'` เพื่อใช้ไอคอนสำเร็จรูปขนาดที่กำหนดไว้ ควรกำหนด `size` เสมอเพื่อจำกัดขนาดที่แสดง — หากไม่กำหนด ไอคอนจะใช้ขนาดพิกเซลจริงของรูปต้นฉบับแทน

> **Note:** v3 render ไอคอนของ `map.Tags` ผ่าน WebGL layer ซึ่งจะโหลดรูปไม่สำเร็จแบบเงียบๆ หาก host ของรูปนั้นไม่ส่ง header `Access-Control-Allow-Origin` มาด้วย — ไอคอนจะไม่ปรากฏขึ้นมาเลย พร้อม error `CORS policy` / `Failed to fetch` ใน console ซึ่งเข้มงวดกว่าไอคอนของ `longdo.Marker` ที่ render เป็น HTML ธรรมดาและไม่ได้รับผลกระทบนี้ ควรใช้รูปไอคอนจาก host ที่รองรับ CORS เท่านั้น

## แสดง POI ทั้งหมดด้วย Wildcard Tag

นอกจากชื่อหมวดหมู่แล้ว `map.Tags.add()` ยังรองรับ wildcard `%` เพื่อแสดง POI ตาม **แหล่งข้อมูล (source)** แทนการกรองตามหมวดหมู่:

```javascript
map.Tags.add('%'); // pois ทั้งหมดทุก source
map.Tags.add('%c'); // โชว์ pois เฉพาะที่มาจากถัง contributed points
```

- `'%'` : แสดง POI ทั้งหมดที่มีอยู่ในระบบ ไม่จำกัดหมวดหมู่หรือแหล่งข้อมูล
- `'%c'` : แสดงเฉพาะ POI ที่มาจากแหล่งข้อมูล contributed points (สถานที่ที่ผู้ใช้/ชุมชนช่วยกันเพิ่มเข้ามา) แทนที่จะเป็นหมวดหมู่ที่ Longdo ดูแลเอง

## มี Tag อะไรให้ใช้บ้าง?

`'shopping'` และ `'hotel'` ในตัวอย่างข้างต้นเป็นเพียงตัวอย่าง ไม่ใช่รายการทั้งหมด — `map.Tags.add()`/`.set()` รองรับชื่อ tag ใดก็ตามที่ชุดข้อมูล POI ของ Longdo รู้จัก (หมวดหมู่ทั่วไปเช่น ร้านอาหาร ปั๊มน้ำมัน ธนาคาร และสถานที่ท่องเที่ยว มักถูกจัดเก็บในลักษณะนี้) Longdo ไม่ได้เผยแพร่รายการชื่อ tag ที่ใช้งานได้ทั้งหมดไว้ในเอกสาร SDK ฉบับนี้ ดังนั้นควรถือว่าชื่อ tag ใด ๆ ยังไม่ได้รับการยืนยันจนกว่าจะตรวจสอบก่อน โดยดูจาก [เอกสารอ้างอิง `TagCollection`/`TagOptions`](https://api.longdo.com/map3/doc.html#TagCollection) หรือสอบถาม Longdo โดยตรง ก่อนนำหมวดหมู่ใดหมวดหมู่หนึ่งไปใช้งานจริง การใส่ชื่อ tag ที่ระบบไม่รู้จักจะไม่ทำให้เกิด error แต่จะไม่แสดงหมุดใด ๆ ขึ้นมาเลยแบบเงียบ ๆ ซึ่งอาจดูคล้ายกับปัญหาช่วงซูมหรือ CORS ได้

## การดักจับการคลิก Tag

หลังจากแสดงสถานที่บนแผนที่แล้ว คำถามถัดไปที่มักตามมาคือ "ผู้ใช้เพิ่งคลิกอะไรไป" หมุดของ Tag จะเปิด popup ที่ Longdo สร้างไว้ให้เมื่อถูกคลิก และท่านสามารถดักจับช่วงเวลานั้นได้ด้วย `EventName.BeforeTagPopup`:

```javascript
map.Event.bind(longdo.EventName.BeforeTagPopup, function (poi) {
  console.log(poi); // ลอง log ดูก่อนสักครั้งเพื่อดูว่าข้อมูลชุดนี้ส่งอะไรมาบ้าง
});
```

> **Note:** `BeforeTagPopup` จะทำงานก่อนที่ popup ที่ Longdo สร้างไว้ให้สำหรับหมุด Tag ที่ถูกคลิกจะเปิดขึ้น โดย handler จะได้รับ object ข้อมูล POI ของสถานที่ที่ถูกคลิก เอกสาร SDK ระบุถึง event นี้ไว้ แต่ไม่ได้เผยแพร่รายการ field ทั้งหมดของ object ดังกล่าว จึงควร `console.log` ดูก่อนสักครั้งระหว่างพัฒนา เพื่อดูว่าชุดข้อมูลของท่านมี field ใดบ้าง (เช่น ชื่อ, หมวดหมู่, พิกัด) ก่อนจะอ้างอิง field ใด field หนึ่งโดยเฉพาะ การ return `false` จาก handler จะช่วยยับยั้งไม่ให้ popup ที่มากับระบบเปิดขึ้น ซึ่งมีประโยชน์หากท่านต้องการแสดงรายละเอียดด้วย UI ของตัวเอง

## การลบ Tag

```javascript
map.Tags.remove('hotel');
```

## การเคลียร์ Tag ทั้งหมด

```javascript
map.Tags.clear();
```

> **ดูเพิ่มเติม:** [TagOptions Documentation](https://api.longdo.com/map3/doc.html#TagOptions) และ [TagCollection Documentation](https://api.longdo.com/map3/doc.html#TagCollection)

<code-section src="/snippet/v3/javascript/marker/place-tags/script.js">



</code-section>