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

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

<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"><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: การจัดตำแหน่งไอคอน HTML** Longdo จะห่อ `icon.html` ไว้ใน element หมุดของ MapLibre ซึ่งจัดตัวเองให้อยู่กึ่งกลางพิกัดด้วย `translate(-50%, -50%)` โดย wrapper จะมีขนาดเท่ากับ HTML ของเรา ไอคอนจึงอยู่กึ่งกลางอยู่แล้วโดยไม่ต้องทำอะไรเพิ่ม:
> 
> - ให้ `<div>` ชั้นนอกสุดอยู่ใน flow ปกติ: **ห้าม**ใช้ `position: absolute`/`fixed` (wrapper จะหดเหลือ 0×0 และมุมซ้ายบนของไอคอนจะไปอยู่ที่พิกัด) และ**ห้าม**ใช้ margin ติดลบ (จะทำให้ wrapper เล็กลง ไอคอนเลื่อนไปหนึ่งในสี่ของขนาด) ส่วน `position: relative` ใช้ได้
> - ใช้ `offset: { x: 0, y: 0 }` เมื่อจุดกึ่งกลางของไอคอนคือจุดที่แตะพื้น (วงกลม บ้าน ป้าย)
> - ใช้ `offset` เฉพาะเมื่อจุดที่แตะพื้นไม่ใช่กึ่งกลาง เช่น หมุดที่ปลายแหลมอยู่ด้านล่างกึ่งกลาง: `offset: { x: 0, y: -height/2 }`
> 
> offset หรือ margin ที่ผิดคือความคลาดเคลื่อนแบบพิกเซลคงที่ ซึ่งดูเหมือน "เลื่อน" ขณะซูม เพราะไม่กี่พิกเซลเท่ากับไม่กี่เมตรเมื่อซูมเข้า แต่เป็นระยะไกลกว่ามากเมื่อซูมออก

> **Note: การอัพเดทตำแหน่งของหมุด** เรียก `marker.location({ lon, lat })` เพื่อย้ายหมุดที่มีอยู่ได้เลย ตำแหน่งยังแม่นยำเหมือนเดิม ให้สร้างหมุดใหม่เฉพาะเมื่อต้องการเปลี่ยนหน้าตาของไอคอน

## แบบที่ 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` เป็นครึ่งหนึ่งของขนาดนั้น

```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">' +
      '<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 }` เว้นแต่จุดที่แตะพื้นไม่ใช่กึ่งกลางไอคอน — ดูด้านบน
  - `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>