Changing the placemark settings

Open in CodeSandbox

In this example, a geo object event is processed - a right-click on a placemark, which opens the context menu for managing the object's properties. 

<!DOCTYPE html>
<html>
    <head>
        <title>Examples. Geo object context menu</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=UTF-8"
        />
        <!--
        Set your own API-key. Testing key is not valid for other web-sites and services.
        Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=en_RU&amp;apikey=<your API-key>"
            type="text/javascript"
        ></script>
        <script
            src="https://yandex.st/jquery/2.2.3/jquery.min.js"
            type="text/javascript"
        ></script>
        <script
            src="geoobject_contextmenu.js"
            type="text/javascript"
        ></script>
        <style type="text/css">
            html,
            body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                font-family: Arial;
                font-size: 14px;
            }

            #map {
                width: 100%;
                height: 80%;
            }

            #menu {
                position: absolute;
                width: 12em;
                background: white;
                border: 1px solid #ccc;
                border-radius: 12px;
                padding-bottom: 10px;
                z-index: 2;
            }
            #menu ul {
                list-style-type: none;
                padding: 20px;
                margin: 0;
            }
            input {
                width: 10em;
            }

            .header {
                padding: 5px;
            }
        </style>
    </head>

    <body>
        <p class="header">Open the context menu on a placemark</p>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(init);

function init() {
    // Creating the map.
    var myMap = new ymaps.Map(
        "map",
        {
            center: [47.6, 41.8],
            zoom: 9,
        },
        {
            searchControlProvider: "yandex#search",
        }
    );

    // Creating a placemark.
    var myPlacemark = new ymaps.Placemark(
        [47.6, 42.1],
        {
            iconContent: "Right-click me!",
        },
        {
            // Red icon that stretches to fit content.
            preset: "islands#redStretchyIcon",
        }
    );

    /**
     * The context menu allows you to change the placemark settings.
     * It is opened by right-clicking the placemark.
     */
    myPlacemark.events.add("contextmenu", function (e) {
        // If the placemark menu is already displayed, remove it.
        if ($("#menu").css("display") == "block") {
            $("#menu").remove();
        } else {
            // HTML content of the context menu.
            var menuContent =
                '<div id="menu">\
                    <ul id="menu_list">\
                        <li>Name: <br /> <input type="text" name="icon_text" /></li>\
                        <li>Hint: <br /> <input type="text" name="hint_text" /></li>\
                        <li>Balloon: <br /> <input type="text" name="balloon_text" /></li>\
                    </ul>\
                <div align="center"><input type="submit" value="Save" /></div>\
                </div> ';

            // Putting a context menu on the page
            $("body").append(menuContent);

            // Setting the menu position.
            $("#menu").css({
                left: e.get("pagePixels")[0],
                top: e.get("pagePixels")[1],
            });

            // Filling the fields of the context menu with the current values of the placemark properties.
            $('#menu input[name="icon_text"]').val(
                myPlacemark.properties.get("iconContent")
            );
            $('#menu input[name="hint_text"]').val(
                myPlacemark.properties.get("hintContent")
            );
            $('#menu input[name="balloon_text"]').val(
                myPlacemark.properties.get("balloonContent")
            );

            /**
             * When the "Save" button is clicked, we change placemark properties
             * to the values entered in the context menu form.
             */
            $('#menu input[type="submit"]').click(function () {
                myPlacemark.properties.set({
                    iconContent: $('input[name="icon_text"]').val(),
                    hintContent: $('input[name="hint_text"]').val(),
                    balloonContent: $('input[name="balloon_text"]').val(),
                });
                // Removing the context menu.
                $("#menu").remove();
            });
        }
    });

    myMap.geoObjects.add(myPlacemark);
}