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
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 updated
Was this helpful?