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

# การแสดงสถานที่ด้วย 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 ได้

รายการนี้คัดมาจาก [บล็อกของ Longdo เอง](https://map-blog.longdo.com/longdo-map-api-tips/) ครอบคลุมหมวดหมู่ที่ใช้กันบ่อย — ไม่ใช่รายการทั้งหมด แต่เป็นจุดเริ่มต้นที่ดี:

<table>
<thead>
  <tr>
    <th>
      Tag
    </th>
    
    <th>
      Tag
    </th>
    
    <th>
      Tag
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      automobile
    </td>
    
    <td>
      property
    </td>
    
    <td>
      ร้านขายยา
    </td>
  </tr>
  
  <tr>
    <td>
      bank
    </td>
    
    <td>
      restaurant
    </td>
    
    <td>
      สถานศึกษา
    </td>
  </tr>
  
  <tr>
    <td>
      book_store
    </td>
    
    <td>
      shop
    </td>
    
    <td>
      สถานีรถไฟ
    </td>
  </tr>
  
  <tr>
    <td>
      car rental
    </td>
    
    <td>
      shopping
    </td>
    
    <td>
      ปั๊มน้ำมัน
    </td>
  </tr>
  
  <tr>
    <td>
      cinema
    </td>
    
    <td>
      sport
    </td>
    
    <td>
      ขนส่งเอกชน
    </td>
  </tr>
  
  <tr>
    <td>
      coffee_shop
    </td>
    
    <td>
      supermarket
    </td>
    
    <td>
      ท่องเที่ยว
    </td>
  </tr>
  
  <tr>
    <td>
      condominium
    </td>
    
    <td>
      transport
    </td>
    
    <td>
      ร้านหนังสือ
    </td>
  </tr>
  
  <tr>
    <td>
      convenience_store
    </td>
    
    <td>
      travel
    </td>
    
    <td>
      ร้านไอศกรีม
    </td>
  </tr>
  
  <tr>
    <td>
      department_store
    </td>
    
    <td>
      กีฬา
    </td>
    
    <td>
      โรงภาพยนตร์
    </td>
  </tr>
  
  <tr>
    <td>
      discount_store
    </td>
    
    <td>
      ธนาคาร
    </td>
    
    <td>
      สถานีรถไฟฟ้า
    </td>
  </tr>
  
  <tr>
    <td>
      education
    </td>
    
    <td>
      โรงแรม
    </td>
    
    <td>
      ร้านสะดวกซื้อ
    </td>
  </tr>
  
  <tr>
    <td>
      fast_food
    </td>
    
    <td>
      ฟิตเนส
    </td>
    
    <td>
      สถานที่ราชการ
    </td>
  </tr>
  
  <tr>
    <td>
      fitness
    </td>
    
    <td>
      รถยนต์
    </td>
    
    <td>
      อสังหาริมทรัพย์
    </td>
  </tr>
  
  <tr>
    <td>
      gas_station
    </td>
    
    <td>
      เช่ารถ
    </td>
    
    <td>
      ซูเปอร์มาร์เก็ต
    </td>
  </tr>
  
  <tr>
    <td>
      gold_shop
    </td>
    
    <td>
      ชอปปิ้ง
    </td>
    
    <td>
      บริษัทประกันภัย
    </td>
  </tr>
  
  <tr>
    <td>
      government_office
    </td>
    
    <td>
      ร้านค้า
    </td>
    
    <td>
      ศูนย์บำรุงรักษารถยนต์
    </td>
  </tr>
  
  <tr>
    <td>
      hotel
    </td>
    
    <td>
      ร้านทอง
    </td>
    
    <td>
      บริการแลกเปลี่ยนเงินตรา
    </td>
  </tr>
  
  <tr>
    <td>
      insurance
    </td>
    
    <td>
      ช้อปปิ้ง
    </td>
    
    <td>
      วัสดุก่อสร้างและตกแต่งบ้าน
    </td>
  </tr>
  
  <tr>
    <td>
      multi-brand beauty retail
    </td>
    
    <td>
      ร้านกาแฟ
    </td>
    
    <td>
      ร้านค้าปลีกเครื่องสำอางและผลิตภัณฑ์ความงาม
    </td>
  </tr>
  
  <tr>
    <td>
      pharmacy
    </td>
    
    <td>
      ไปรษณีย์
    </td>
    
    <td>
      
    </td>
  </tr>
  
  <tr>
    <td>
      post
    </td>
    
    <td>
      ร้านอาหาร
    </td>
    
    <td>
      
    </td>
  </tr>
</tbody>
</table>

## การดักจับการคลิก 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>