Markers
Simple marker
To add a Marker to the map, specify the required coordinates:
const marker = new mapgl.Marker(map, {
coordinates: [55.31878, 25.23584],
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<meta name="description" content="A single marker example" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script>
const map = new mapgl.Map('container', {
center: [55.31878, 25.23584],
zoom: 13,
key: 'Your API access key',
});
const marker = new mapgl.Marker(map, {
coordinates: [55.31878, 25.23584],
});
</script>
</body>
</html>
Multiple markers
To add multiple Markers to the map, you can use a loop like so:
const coords = [
[55.27414804174869, 25.257576991034284],
[55.289254243403306, 25.211614202468652],
[55.34418588368302, 25.215341562259866],
[55.35036569359612, 25.26068195798851],
[55.32976632814914, 25.238324424362062],
];
coords.forEach((coord) => {
const marker = new mapgl.Marker(map, {
coordinates: coord,
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<meta name="description" content="Several markers example" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script>
const map = new mapgl.Map('container', {
center: [55.31878, 25.23584],
zoom: 13,
key: 'Your API access key',
});
const coords = [
[55.27414804174869, 25.257576991034284],
[55.289254243403306, 25.211614202468652],
[55.34418588368302, 25.215341562259866],
[55.35036569359612, 25.26068195798851],
[55.32976632814914, 25.238324424362062],
];
coords.forEach((coord) => {
const marker = new mapgl.Marker(map, {
coordinates: coord,
});
});
</script>
</body>
</html>
Marker with a custom icon
To change the Marker icon, specify the icon
parameter:
const marker = new mapgl.Marker(map, {
coordinates: [55.31878, 25.23584],
icon: 'https://docs.2gis.com/img/mapgl/marker.svg',
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<meta name="description" content="Change marker icon example" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script>
const map = new mapgl.Map('container', {
center: [55.31878, 25.23584],
zoom: 13,
key: 'Your API access key',
});
const marker = new mapgl.Marker(map, {
coordinates: [55.31878, 25.23584],
icon: 'https://docs.2gis.com/img/mapgl/marker.svg',
});
</script>
</body>
</html>
Marker with text
Simple text label
To add a Marker with text, specify the label
parameter like so:
const marker = new mapgl.Marker(map, {
coordinates: [55.31878, 25.23584],
label: {
text: "The marker's label",
},
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script>
const map = new mapgl.Map('container', {
center: [55.31878, 25.23584],
zoom: 13,
key: 'Your API access key',
});
const marker = new mapgl.Marker(map, {
coordinates: [55.31878, 25.23584],
label: {
text: "The marker's label",
},
});
</script>
</body>
</html>
Text position
To change the position of the text, specify the relativeAnchor
and offset
parameters for the label (see LabelOptions for more information):
// Middle-right alignment
const rightCenter = new mapgl.Marker(map, {
coordinates: [55.32878, 25.23584],
icon: '/img/mapgl/marker.svg',
label: {
text: 'Right center placement',
offset: [20, 0],
relativeAnchor: [0, 0.5],
},
});
// Top-left alignment
const leftTop = new mapgl.Marker(map, {
coordinates: [55.30878, 25.22584],
icon: '/img/mapgl/marker.svg',
label: {
text: 'Left top placement',
offset: [-10, -10],
relativeAnchor: [1, 1],
},
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script>
const map = new mapgl.Map('container', {
center: [55.31878, 25.23584],
zoom: 13,
key: 'Your API access key',
});
// The right center label placement,
const rightCenter = new mapgl.Marker(map, {
coordinates: [55.32878, 25.23584],
icon: 'https://docs.2gis.com/img/mapgl/marker.svg',
label: {
text: 'Right center placement',
offset: [20, 0],
relativeAnchor: [0, 0.5],
},
});
// The left top label placement,
const leftTop = new mapgl.Marker(map, {
coordinates: [55.30878, 25.22584],
icon: 'https://docs.2gis.com/img/mapgl/marker.svg',
label: {
text: 'Left top placement',
offset: [-10, -10],
relativeAnchor: [1, 1],
},
});
</script>
</body>
</html>
Text background
To add a text label with a background image, specify the image
parameter (see LabelImage for more information):
const marker = new mapgl.Marker(map, {
coordinates: [55.31878, 25.23584],
label: {
text: "The marker's label",
offset: [0, 25],
relativeAnchor: [0.5, 0],
image: {
url: 'tooltip-top.svg',
size: [100, 50],
stretchX: [
[10, 40],
[60, 90],
],
stretchY: [[20, 40]],
padding: [20, 10, 10, 10],
},
},
});
See Label examples for more information on how to correctly stretch the image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script>
const map = new mapgl.Map('container', {
center: [55.31878, 25.23584],
zoom: 13,
key: 'Your API access key',
});
const marker = new mapgl.Marker(map, {
coordinates: [55.31878, 25.23584],
label: {
text: "The marker's label",
offset: [0, 25],
relativeAnchor: [0.5, 0],
image: {
url: 'https://docs.2gis.com/img/mapgl/tooltip-top.svg',
size: [100, 50],
stretchX: [
[10, 40],
[60, 90],
],
stretchY: [[20, 40]],
padding: [20, 10, 10, 10],
},
},
});
</script>
</body>
</html>
Events
To subscribe to events such as click on a Marker, use the on()
method (see DynamicObjectEventTable for the list of possible events):
const marker = new mapgl.Marker(map, {
coordinates: [55.31878, 25.23584],
icon: 'https://docs.2gis.com/img/mapgl/marker.svg',
});
marker.on('click', (e) => {
alert('Marker is clicked');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<meta name="description" content="Markers events handling example" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script>
const map = new mapgl.Map('container', {
center: [55.31878, 25.23584],
zoom: 13,
key: 'Your API access key',
});
const marker = new mapgl.Marker(map, {
coordinates: [55.31878, 25.23584],
icon: 'https://docs.2gis.com/img/mapgl/marker.svg',
label: {
text: "The marker's label",
},
});
marker.on('click', (e) => {
alert('Marker clicked');
});
</script>
</body>
</html>