---
title: "การสร้างหมุดบนแผนที่"
description: "ตัวอย่างนี้จะแสดงวิธีการสร้างหมุด (Marker) บนแผนที่ Longdo Map ด้วย JavaScript API"
canonical_url: "https://map.longdo.com/docs/v3/javascript/marker/create-marker/"
last_updated: "2026-09-16T20:17:28.591Z"
---

# การสร้างหมุดบนแผนที่

<map-demo preset="v3-create-marker-1">



</map-demo>

## การสร้างหมุด (Add marker)

```javascript
var marker = new longdo.Marker({ lon: 100.56, lat: 13.74 });

map.Overlays.add(marker);
```

> **Tip:** เมื่อสร้าง marker ตามที่ต้องการแล้ว ท่านยังสามารถสร้าง Event ต่างๆ เพื่อดักการทำงานตามที่ต้องการได้ เช่น เมื่อผู้ใช้คลิกที่หมุด (OverlayClick), การลากหมุด (OverlayChange), การปล่อยหมุด (OverlayDrop) ดูเพิ่มเติม: [Overlay Event](/javascript/events/overlay-events)

## การลบหมุด (Remove marker)

```javascript
map.Overlays.remove(marker);
```

## การเคลียร์หมุดทั้งหมด (Clear marker)

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

> **Note:** การใช้คำสั่ง `clear()` จะเป็นการลบ Overlays ในรูปแบบอื่นๆ ที่แสดงอยู่บนแผนที่ด้วย เช่น Popup, Geometry

# ตัวอย่างการใส่ Option แบบต่างๆ ให้กับ Marker

นักพัฒนาสามารถตั้งค่าให้กับหมุดในรูปแบบต่าง ๆ ได้หลากหลาย เช่น กำหนดรูปภาพ, แบบเขียน html, กำหนดทิศให้หมุด

<map-demo preset="v3-create-marker-2">



</map-demo>

## แบบที่ 1

นักพัฒนาสามารถใส่ url ของรูปภาพเพื่อใช้สร้าง marker ได้

```javascript
var marker1 = new longdo.Marker({ lon: 101.2, lat: 12.8 }, {
  title: 'Marker',
  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',
    offset: { x: 0, y: -18 }
  },
  detail: 'Drag me',
  visibleRange: { min: 6, max: 10 },
  draggable: true
});
```

## แบบที่ 2

นักพัฒนาสามารถใส่ไอคอนในรูปแบบการกำหนด html ได้

```javascript
var marker2 = new longdo.Marker({ lon: 99.35, lat: 14.25 }, {
  title: 'Custom Marker',
  icon: {
    html: '<div style="width:50px;height:22px;margin-left:-25px;margin-top:-11px"><div style="position:relative;width:50px;height:22px;background:green;text-align:center"><b>Marker</b></div></div>',
    offset: { x: 0, y: 0 }
  },
  popup: {
    html: '<div style="background: #eeeeff;">popup</div>'
  }
});
```

> **Note:** Longdo Map v3 ใช้ **MapLibre GL JS** เป็น renderer ซึ่ง MapLibre จะคำนวณตำแหน่งของหมุด HTML บนหน้าจอใหม่ด้วยตัวเองทุกครั้งที่มีการซูม หากการจัดกึ่งกลางไอคอนมาจากการตั้งค่า `offset` ที่ไม่เป็นศูนย์ การคำนวณใหม่นี้จะไม่รองรับค่านั้น ทำให้ไอคอนเลื่อนออกจากตำแหน่งหมุดเห็นได้ชัดขณะซูม วิธีจัดกึ่งกลางไอคอน HTML ขนาดใหญ่ที่ถูกต้องคือ:
> 
> - กำหนด `offset: { x: 0, y: 0 }` ไว้เสมอ — ห้ามใช้ `offset` ที่ไม่เป็นศูนย์เพื่อจัดกึ่งกลาง
> - จัดกึ่งกลางไอคอนด้วย CSS margin บน `<div>` **ชั้นนอกสุด** แทน: `margin-left: -{ครึ่งหนึ่งของความกว้างไอคอน}px`, `margin-top: -{ครึ่งหนึ่งของความสูงไอคอน}px` ค่า margin จะแม่นยำในทุกระดับซูม เพราะ MapLibre ไม่ต้องตีความค่านี้ใหม่
> - `<div>` ชั้นนอกสุดต้อง **ไม่มี property position เลย** — แม้แต่ `position: relative` ก็ไม่ควรมี เพราะยังสามารถทำให้เกิดอาการเลื่อนตำแหน่งได้เช่นกัน
> - หาก wrapper ชั้นในต้องการ `position: relative` (เช่น สำหรับ popup หรือวงแหวนตกแต่ง) ให้ใส่ไว้ที่ `<div>` **ชั้นใน** แทน ไม่ใช่ชั้นนอกสุด

> **Note: การอัพเดทตำแหน่งของหมุด** การเรียก `.location({...})` กับหมุดที่สร้างด้วยเทคนิคจัดกึ่งกลางไอคอน HTML ข้างต้น จะย้ายตำแหน่งหมุดโดยไม่ได้ apply การจัดกึ่งกลางใหม่ ซึ่งอาจทำให้อาการเลื่อนตำแหน่งกลับมาอีกครั้ง วิธีย้ายตำแหน่งหมุดประเภทนี้ที่ถูกต้องคือ ให้ลบหมุดเดิมออก (`map.Overlays.remove(marker)`) แล้วสร้างหมุดใหม่เพิ่มเข้าไปที่ตำแหน่งใหม่แทน โดยคัดลอกค่าที่กำหนดเอง (title, icon, popup ฯลฯ) มาใส่ในหมุดใหม่ด้วย

## แบบที่ 3

กำหนดให้หมุดสามารถหมุนไปตามทิศที่ต้องการได้

```javascript
var marker3 = new longdo.Marker({ lon: 100.41, lat: 13.84 }, {
  title: 'Rotate Marker',
  rotate: 90
});
```

## แบบที่ 4

สำหรับไอคอนแบบ url รูปภาพ (`icon.url` ไม่ใช่ `icon.html`) สามารถจัดกึ่งกลางได้อย่างแม่นยำโดยกำหนด `size` แล้วตั้งค่า `offset` เป็นครึ่งหนึ่งของขนาดนั้น — เป็นคนละกลไกกับกรณี custom HTML ด้านบน (ไอคอนแบบรูปภาพ render เป็นหมุดของแผนที่โดยตรง ไม่ใช่ HTML ที่ sync ตำแหน่งด้วย DOM) จึงไม่มีปัญหาเลื่อนตำแหน่งขณะซูมแบบที่แบบที่ 2 อธิบายไว้

```javascript
var marker5 = new longdo.Marker({ lon: 100.7, lat: 13.6 }, {
  title: 'Cat',
  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 },
    offset: { x: -30, y: -30 }
  }
});
```

- `size` : กำหนดเป็นความกว้าง/ความสูงจริงที่ต้องการแสดงของไอคอน
- `offset` : กำหนดเป็น `{ x: -width/2, y: -height/2 }` เพื่อให้จุดกึ่งกลางของไอคอน — ไม่ใช่มุมซ้ายบน — อยู่ที่ตำแหน่งพิกัดของหมุด

## หมุดบอกทิศทางด้วยลูกศรที่หมุนได้

การหมุนทั้งไอคอนด้วย option `rotate` (แบบที่ 3) จะทำให้ข้อความหรือกราฟิกภายในไอคอนกลับหัวในบางทิศทางด้วย หากต้องการบอกทิศทางโดยที่ไอคอนหลักยังตั้งตรงอยู่เสมอ ให้หมุนเฉพาะรูปหลายเหลี่ยม (polygon) เล็กๆ ที่เป็นหัวลูกศรภายใน SVG `<g transform="rotate(...)">` โดยให้กราฟิกไอคอนหลักอยู่นอกกลุ่ม (group) นั้น

```javascript
function createHeadingMarkerHtml(heading) {
  return (
    '<div style="width:32px;height:32px;margin-left:-16px;margin-top:-16px">' +
      '<svg width="32" height="32" viewBox="0 0 32 32">' +
        '<g transform="rotate(' + heading + ',16,16)">' +
          '<polygon points="16,2 22,14 10,14" fill="#e11d48" />' +
        '</g>' +
        '<circle cx="16" cy="16" r="8" fill="#2563eb" stroke="#ffffff" stroke-width="2" />' +
      '</svg>' +
    '</div>'
  );
}

var marker4 = new longdo.Marker({ lon: 100.6, lat: 13.9 }, {
  title: 'Heading Marker',
  icon: {
    html: createHeadingMarkerHtml(45),
    offset: { x: 0, y: 0 }
  }
});
```

มีเพียงหัวลูกศร `<polygon>` เท่านั้นที่อยู่ใน `<g>` ที่ถูกหมุน จึงมีแต่ส่วนนี้ที่หมุนไปชี้ทิศทาง ส่วน `<circle>` ซึ่งเป็นกราฟิกหลักอยู่นอกกลุ่มนั้นและยังคงตั้งตรงเสมอ ทำให้ข้อความหรือรายละเอียดไอคอนภายในไม่กลับหัว

ตัวแปรต่างๆ ที่ใช้ในการสร้างชั้นข้อมูล (หากไม่ระบุ Parameter ใดๆ จะใช้ค่า Default ของ Parameters นั้นแทน)

- `title` : ข้อความที่แสดงในส่วนหัวข้อใน Popup (Default: No title)
- `detail` : ข้อความที่แสดงรายละเอียดต่างๆ ใน Popup (Default: No detail)
- `icon` : รูปภาพที่แสดงอยู่บนแผนที่

  - `url` : url ของรูปภาพที่ต้องการแสดง
  - `urlHD` : url ของรูปภาพที่ต้องการแสดง สำหรับจอความละเอียดสูง
  - `html` : กำหนด html เองเพื่อใช้เป็น Overlays
  - `offset` : จุดที่วัดจากตำแหน่งเริ่มต้นของไอคอน [Point](https://api.longdo.com/map3/doc.html#Point) หากต้องการจัดกึ่งกลางไอคอน HTML ขนาดใหญ่ ให้ใช้ `offset: { x: 0, y: 0 }` ร่วมกับ CSS margin แทน — ดูตัวอย่างด้านบน
  - `size` : ขนาดของ icon [Size](https://api.longdo.com/map3/doc.html#Size)
- `zoomRange` : ขอบเขตการซูม
- `visibleRange` : ระยะการ zoom ที่สามารถมองเห็น icon นี้ได้ (Default: Every zoom)
- `clickable` : ให้ผู้ใช้กด Overlay ได้ แม้ว่าจะไม่มี Popup
- `draggable` : ให้ผู้ใช้ลาก Overlay ได้
- `rotate` : การสั่งปรับทิศทางการหมุน ใส่ค่า 0-360 องศาได้ โดยเริ่มต้นทิศเหนือ (Default: 0)

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

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



</code-section>