# Marker

## Marker

Creates a marker on the map using the specified option. To display markers, you can set coordinate value, marker icons, and icon sizes.

```javascript
new fatosmap.maps.Marker({ option });
```

### Parameter

| Required Parameter | Description                       | Type         |
| ------------------ | --------------------------------- | ------------ |
| position           | Latitude and longitude {lat, lng} | JSON         |
| map                | Map object to display the marker  | Map instance |

| Optional Parameter    | Description                                                                                                                                                                                                                                                        | Type                            |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------- |
| icon                  | Sets the image of a marker                                                                                                                                                                                                                                         | URL                             |
| iconSize              | <p>Sets the size of a marker icon.</p><p>\[width, height]</p>                                                                                                                                                                                                      | Numeric Array                   |
| message               | Sets the popup message                                                                                                                                                                                                                                             | <p>String <br>or</p><p>HTML</p> |
| label                 | marker that's labeled                                                                                                                                                                                                                                              | HTML                            |
| anchor (popup)        | A string indicating the part of the Marker that should be positioned closest to the coordinate set via Marker#setLngLat. Options are 'center' , 'top' , 'bottom' , 'left' , 'right'.                                                                               | String                          |
| markerOffset (marker) | <p>The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up. default \[0, 0]</p><p>A Point or an array of two numbers representing <code>x</code> and <code>y</code> screen coordinates in pixels.</p> | Array\<Number>                  |
| popupOffset(popup)    | <p>The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up. default \[0, 0]</p><p>A Point or an array of two numbers representing <code>x</code> and <code>y</code> screen coordinates in pixels.</p> | Array\<Number>                  |
| closeButton (popup)   | If true, a close button will appear in the top right corner of the popup. default false                                                                                                                                                                            | Bool                            |
| closeOnClick (popup)  | If true, the popup will be closed when the map is clicked. default false                                                                                                                                                                                           | Bool                            |
| addMarkerEvent        | You can give the marker a promised event. (dragstart/drag/dragend)                                                                                                                                                                                                 | JSON Array                      |
| drag                  | A boolean indicating whether or not a marker is able to be dragged to a new position on the map.                                                                                                                                                                   | Bool                            |

{% hint style="info" %}
anchor, offset, closeButton, and closeOnClick are available only if the popup message is set.
{% endhint %}

### Example

```javascript
** Single Create Marker **
let marker = new fatosmap.maps.Marker({
        position: {lat: 37.564895, lng: 126.987056},
        map: mapInstance,
        icon: image(My Image),
        iconSize: [30, 30],
        message: 'Fatos', // String
        //message: `<div>FATOS</div>` // HTML 
        label: `<div>1</div>` //HTML
        anchor : 'bottom',
        markerOffset : [0, 0],
        popupOffset: [0,0],
        closeButton: true,
        closeOnClick: true,
        drag: true,
        addMarkerEvent: [
                {
                    event:'dragstart',
                    callback: onDragStart
                },
                {
                    event:'drag',
                    callback: onDrag
                },
                {
                    event:'dragend',
                    callback: onDragEnd
                }
            ]
});
function onDragStart(e) {
    console.log('onDragStart', e);
}
function onDrag(e) {
    console.log('onDrag', e);
}
function onDragEnd  (e) {
    console.log('Dragend', e);
};
---------------------------------------------------------------------------
** Multi Create Markers **
let markers = []
let count = markers.length
let positions = [
        { lat: 37.564952 , lng: 125.987321 },
        { lat: 37.564952 , lng: 126.987321 },
        { lat: 37.564952 , lng: 124.987321 }
]

for(let i = 0; i < count; i++){
        let marker = new fatosmap.maps.Marker({
                position: positions[i],
                map: mapInstance
        })
        markers.push(marker)
        markers[i].setMap(mapInstance)
    }
```

### RemoveMarker

Clears the markers shown on the map.

### Example

```javascript
marker.setMap(null);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nostramap-doc.fatos.biz/fatos-api/map/map-control/marker.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.