# 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);
```