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