Маркеры

Один маркер

Чтобы добавить маркер на карту, нужно указать его координаты:

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">
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
    </body>
</html>

// API key can be used on jsfiddle.net only!
// You can get more info on https://docs.2gis.com/

const map = new mapgl.Map('container', {
    center: [55.31878, 25.23584],
    zoom: 13,
    key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
});
const marker = new mapgl.Marker(map, {
    coordinates: [55.31878, 25.23584],
});

html,
body,
#container {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

<!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>

Несколько маркеров

Чтобы добавить несколько маркеров, можно использовать цикл:

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">
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
    </body>
</html>

// API key can be used on jsfiddle.net only!
// You can get more info on https://docs.2gis.com/

const map = new mapgl.Map('container', {
    center: [55.31878, 25.23584],
    zoom: 13,
    key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
});
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,
    });
});

html,
body,
#container {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

<!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>

Изменение иконки маркера

Чтобы изменить иконку маркера, нужно указать параметр icon:

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">
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
    </body>
</html>

// API key can be used on jsfiddle.net only!
// You can get more info on https://docs.2gis.com/

const map = new mapgl.Map('container', {
    center: [55.31878, 25.23584],
    zoom: 13,
    key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
});
const marker = new mapgl.Marker(map, {
    coordinates: [55.31878, 25.23584],
    icon: 'https://docs.2gis.com/img/mapgl/marker.svg',
});

html,
body,
#container {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

<!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>

Маркер с текстом

Добавление текста

Чтобы добавить текст для маркера, нужно указать параметр label:

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>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
    </body>
</html>

// API key can be used on jsfiddle.net only!
// You can get more info on https://docs.2gis.com/

const map = new mapgl.Map('container', {
    center: [55.31878, 25.23584],
    zoom: 13,
    key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
});
const marker = new mapgl.Marker(map, {
    coordinates: [55.31878, 25.23584],
    label: {
        text: "The marker's label",
    },
});

html,
body,
#container {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

<!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>

Выравнивание текста

Чтобы изменить расположение текста, нужно указать параметры relativeAnchor и offset у label (см. LabelOptions для полного списка параметров):

// Выравнивание справа по центру
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],
    },
});
// Выравнивание по левому верхнему краю
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>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
    </body>
</html>

// API key can be used on jsfiddle.net only!
// You can get more info on https://docs.2gis.com/

const map = new mapgl.Map('container', {
    center: [55.31878, 25.23584],
    zoom: 13,
    key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
});
// 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],
    },
});

html,
body,
#container {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

<!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>

Фон текста

Чтобы добавить фоновое изображение для текста, нужно указать параметр image (см. LabelImage для более подробного описания параметров):

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],
        },
    },
});

Информацию о том, как правильно растягивать фоновое изображение, можно найти в примерах текстовых меток.

<!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>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
    </body>
</html>

// API key can be used on jsfiddle.net only!
// You can get more info on https://docs.2gis.com/

const map = new mapgl.Map('container', {
    center: [55.31878, 25.23584],
    zoom: 13,
    key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
});
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],
        },
    },
});

html,
body,
#container {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

<!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>

События

Чтобы подписаться на события, такие как нажатие на маркер, нужно использовать метод on() (см. DynamicObjectEventTable для полного списка событий):

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">
    </head>
    <body>
        <div id="container"></div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
    </body>
</html>

// API key can be used on jsfiddle.net only!
// You can get more info on https://docs.2gis.com/

const map = new mapgl.Map('container', {
    center: [55.31878, 25.23584],
    zoom: 13,
    key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
});
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');
});

html,
body,
#container {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

<!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>