Marker

Marker manipulation

Marker

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

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

Parameter

Required Parameter

Description

Type

position

Latitude and longitude {lat, lng}

Object

map

Map object to display the marker

Map instance

Optional Parameter

Description

Type

icon

Sets the image of a marker

URL

iconSize

Sets the size of a marker icon.

[width, height]

Numeric Array

message

Sets the popup message

String or

HTML

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)

The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up. default [0, 0]

A Point or an array of two numbers representing x and y screen coordinates in pixels.

Array<Number>

popupOffset(popup)

The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up. default [0, 0]

A Point or an array of two numbers representing x and y screen coordinates in pixels.

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

drag

A boolean indicating whether or not a marker is able to be dragged to a new position on the map.

Bool

addMarkerEvent

If drage True

You can give the marker a promised event. (dragstart/drag/dragend)

JSON Array

anchor, offset, closeButton, and closeOnClick are available only if the popup message is set.

Example

** 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 positions = [
        { lat: 37.564952 , lng: 125.987321 },
        { lat: 37.564952 , lng: 126.987321 },
        { lat: 37.564952 , lng: 124.987321 }
];

for(let i = 0; i < positions.length; 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

marker.setMap(null);

Last updated