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}
JSON
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
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
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 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

marker.setMap(null);
Last modified 10mo ago
Copy link
On this page
Marker
Parameter
Example
RemoveMarker
Example