Блог API Яндекс.Карт

Как использовать API Яндекс.Карт без навыков программирования

API Яндекс.Карт - мощный и сложный инструмент, предназначенный в первую очередь для профессиональных вэб-разработчиков и javascript-программистов.

1

В этой статье, мы расскажем как можно эффективно использовать возможности АПИ не обладая навыками программирования.
Если вы хотите добавить на карту схему проезда, отметить офисы, магазины, нарисовать любые геометрические фигуры, добавить к ним описание, и разместить эту карту на своем сайте, — вы можете это сделать не написав ни строчки кода, в удобном графическом интерфейсе, используя специальные инструменты и сервисы Яндекс.Карт.

 



Конструктор схем проезда

Схемы проезда обычно не меняются, а создаются один раз на продолжительный промежуток времени (например, до переезда офиса). Поэтому для их создания удобно воспользоваться визуальным инструментом «Конструктор схем проезда», который позволяет разметить необходимые объекты на карте и получить готовый код для вставки на страницу.
Недостаток «Конструктора схем проезда» в том, что созданную карту нельзя так же просто отредактировать. Для изменения объектов или их местоположения приходится создавать либо новую карту в конструкторе, либо редактировать JavaScript вручную. Такой проблемы не возникнет при использовании сервиса «Мои карты».

Мои карты

Сервис «Мои карты» позволяет отмечать на карте метки, рисовать геометрические фигуры, а также изменять их внешний вид и описание, после чего можно поделиться ссылкой на созданную карту с друзьями либо разместить ее у себя на сайте. Для этого необходимо воспользоваться возможностью экспорта объектов, размеченных на карте, в виде YMapsML.

Мои карты

Чтобы добавить YMapsML-файл на карту, нужно:
1. Подключить на странице АПИ
для этого в тэг <head> нужно добавить
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>


2. Сразу за ним добавить код создания карты

<script type="text/javascript">
    ymaps.ready(function () {
        var map = new ymaps.Map('YMapsID', {
            center: [55.753994, 37.622093],
            zoom: 9,
            behaviors: ['default', 'scrollZoom']
        });

        //
Необходимо подставить свой URL.

        ymaps.geoXml.load("http://maps.yandex.ru/export/usermaps/ydthuh_cw37GmjF39vR9y0WBYIfsK7jX/")
            .then(function (res) {
                // Добавление загруженных из YMapsML-файла объектов на карту.
                map.geoObjects.add(res.geoObjects);
            });
    });
</script>

В этой строчке кода нужно заменить ссылку на карту на свою.
ymaps.geoXml.load("http://maps.yandex.ru/export/usermaps/ydthuh_cw37GmjF39vR9y0WBYIfsK7jX/")


Вы можете воспользоваться готовым примером, просто заменив в нем ссылку на YMapsML-файл.

Объекты, размещенные на карте таким образом, можно редактировать через интерфейс «Моих карт». Другими словами все изменения, внесенные в карту на Яндекс.Картах, автоматически отразятся в соответствующем YMapsML.

При добавлении YMapsML-файла из «Моих карт» вы также можете:
— подобрать центр и масштаб карты таким образом, чтобы все добавленные объекты были видны на карте.
— поменять внешний вид объектов (значки меток, толщину и цвет линий, стиль контура и заливки геометрических фигур).
В коде примера есть подсказки, как это сделать.

С помощью перечисленных инструментов можно решать достаточно обширный круг задач. Создавать карты и делиться ими на страницах своего сайта по силам каждому!
75 комментариев

 не могу  проложить маршрут в своей карте  это недоработка ?

Я уточню.
Для сервиса «Мои карты» прокладка маршрута сейчас, к сожалению, недоступна.

Екатерина, здравствуйте.

Можно ли получить код API карт на свой сайт используя Мои карты? То есть, я в Мои карты создал карту, как ее поместить на сайт?

 

Здравствуйте, можно. 

В статье есть код. Замените в этом коде ссылку на YMapsML-файл.

Есть ли возможность присваивать метке не только другой цвет, но и другую иконку? Т.е. кафе, вокзал и т.п. на одной карте.

 

Вы сейчас говорите про карту, созданную в Конструкторе, или с помощью «Моих карт»?

С помощью "Моих карт".

Для этого Вам все-таки придется немного попрограммировать :-) Точнее внести небольшие изменения в готовый код.

Если вы хотите использовать иконки из коллекции API http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/option.presetStorage.xml, обратите внимание на вот эту часть кода примера:

res.geoObjects.each(function (geoObject) {
    geoObject.options.set({
        preset : 'twirl#trainIcon', // Все типы стандартных значков можно увидеть тут http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/option.presetStorage.xml
        /*  Можно установить и собственный значок для метки.
        iconImageHref: 'http://api.yandex.ru/maps/doc/jsapi/2.x/examples/images/myIcon.gif', // картинка иконки
        iconImageSize: [30, 42], // размеры картинки
        iconImageOffset: [-3, -42] // смещение картинки
        */
    });
});


Если Вы хотите использовать собственную иконку меток, то обратите внимание на эту статью http://ymapsapi.ya.ru/replies.xml?item_no=346.

Я пробовал редактировать эту строку. Но при наличии кода preset : 'twirl#trainIcon' карта отображается некорректно - слишком тонкие кривые. К тому же мне непонятно - как сделать разным точкам разные значки. Я так понимаю, этот код даст им всем одинаковый вид.

 

 К тому же мне непонятно - как сделать разным точкам разные значки. Я так понимаю, этот код даст им всем одинаковый вид.


Вы можете установить точкам разные стили (цвета) на maps.yandex.ru (например все вокзалы сделать голубыми, а кафе зелеными)

Затем на своем сайте получать эти метки и на основании этих стилей устанавливать соответствующие иконки.

Типа того:

 

res.geoObjects.each(function (geoObject) {
    switch(geoObject.options.get('preset')) {
        case "default#lightbluePoint" :
            geoObject.options.set('preset', 'twirl#trainIcon');
            break;
        case "default#greenPoint" :
            geoObject.options.set('preset', 'twirl#cafeIcon');
            break;
    }
});


Попробовал. Было:

                res.geoObjects.each(function (geoObject) {
                    geoObject.options.set({
// Все типы стандартных значков можно увидеть тут http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/option.presetStorage.xml

                    /*  Можно установить и собственный значок для метки.
                        iconImageHref: 'http://api.yandex.ru/maps/doc/jsapi/2.x/examples/images/myIcon.gif', // картинка иконки
                        iconImageSize: [30, 42], // размеры картинки
                        iconImageOffset: [-3, -42] // смещение картинки
                    */
                    });
                });

 

Стало:

 res.geoObjects.each(function (geoObject) {
                    switch(geoObject.options.get('preset')) {
                case "default#lightbluePoint" :
                        geoObject.options.set('preset', 'twirl#trainIcon');
                        break;
                case "default#greenPoint" :
                        geoObject.options.set('preset', 'twirl#cafeIcon');
                        break;
                    });
                });

Карта перестала отображаться.

посмотрите ошибки в файербаге

на вскидку у вас лишняя скобка

);

Файербаг не помог. Но получилось сделать метки с точками вместо цифр. Это уже гораздо лучше! Спасибо!

А можно как нибудь для карты сделать выбор региона?

Вы хотите показывать карту определенного региона или на размещенной карте дать пользователям возможность выбрать регион?

Дать пользователям возможность выбрать регион. Метки стоят по всей России и Казахстану, искать нужный город очень проблематично.

Посмотрите этот пример. Примерно так нужно? Тут уж без программирования не обойтись.

Есть ли возможность отображения одновременно коллекции  (10 точек ) и кластера (остального 90)

mymap.geoObjects.add(markers); здесь собираются первые 10 точек из цикла

mymap.geoObjects.add(myCollection); тут остальные

 

ОТдельно работает ( а вместе как можно найти выход из ситуации?? кто нить реализовывал? как обмануть АПИ?

Вам стоит задать вопрос в клубе.

Алексей Сафронов
28 января 2016, 06:23

Скажите как подключить Апи в livejournal. Я там не могу добраться до тега head, чтобы добавить туда

Кажется, жж не принимает скрипты. Т.е. интерактивная карта у Вас вряд ли заработает.

Может лучше использовать Статик API? 

Алексей Сафронов
28 января 2016, 06:23

А что такое статик ипи?))

Если Вы делаете карту на Конструкторе, выберете на втором шаге статическую карту :-)

можно ли использовать сервис "Мои карты" для создания тысячи собственных карт и размещении информации на коммерческом сайте?. "Коммерческий" в плане того что на нем будет крутится реклама

 

Спасибо.

Главное, чтобы доступ к сайту был открытый и бесплатный. Рекламу можете крутить.

Ну и присылайте потом посмотреть, что получится :-)

А есть ли возможность передать права другому аккаунту?

Права на что?

Права на карту, что бы другой человек мог менять цвета, добавлять зоны и т.п.

 У Вас карта сделана с помощью сервиса «Мои карты»?

Такой возможности нет, к сожалению.

Скажите, что надо прописать в код стандартного примера, чтобы на карте появились привычные инструменты сверху слева: рука, линейка, лупа, скрол мастштаба?
Спасибо за код!

 

myMap.controls.add("mapTools")

Спасибо! А в какое место кода это вставить? я не знаю языка, только на интуитивном уровне использую. Напишите пожалуйста куда.

Можно сразу после кода создания карты

 

        var map = new ymaps.Map('YMapsID', {
            center: [55.7, 37.5],
            zoom: 9,
            behaviors: ['scrollZoom', 'drag']
        });
        map.controls.add('mapTools');

Поменял ссылку в примере на свою карту из "Моих карт", но всё равно получаю стандартную карту с центром в Мск. Как свою карту привязать, чтобы она загружалась? Если добавить такие строки:

// Установка границ карты по размерам содержимого YMapsML-файла.
var bounds = res.mapState && res.mapState.getBounds();
bounds && map.setBounds(bounds);

то карта полностью перестаёт отображаться.

дайте ссылку на страницу с неотображающейся картой

загляни в html-код своей страницы

и увидишь там что амперсанды энкодятся

bounds && map.setBounds(bounds);

Uncaught SyntaxError: Unexpected number/yandex-map/:128

Спасибо.

Уже задавали вопрос, но ответа так и не последовало. Подскажите рабочий блок ?

res.geoObjects.each(function (geoObject) {
    switch(geoObject.options.get('preset')) {
        case "default#lightbluePoint" :
            geoObject.options.set('preset', 'twirl#trainIcon');
            break;
        case "default#greenPoint" :
            geoObject.options.set('preset', 'twirl#cafeIcon');
            break;
    }
}


С этим блоком карта не отображается вообще.

А со стандартным все ОК и я вижу те метки которые создал в карте

res.geoObjects.each(function (geoObject) {
 geoObject.options.set({


Мне нужно понять механизм. Как поменять метки созданные на карте в данном случае красного и синего цвета на любые произвольные с Вашей библиотеки ?

в консоль смотрели?

на вскидку вижу что скобки не хватает

aleksandrpovarenkin
28 января 2016, 06:23

а как карту по центру страницы сделать?

 

она к правому краю прижимается (

aleksandrpovarenkin
28 января 2016, 06:23

а именно? если не сложно, подскажите пожалуйста как именно выровнить по центру

http://normalux.ru/pages/contacts

Если Вы плохо знакомы с CSS, используйте какой-нибудь готовый CSS-фреймворк (например Twitter Bootstrap)

Мы используем его во всех наших примерах. И карта там всегда по-центру

Доброго времени суток!

Подскажите, можно ли как-то редактировать карты у себя на сайте с последующим сохранением и подгрузкой?

Нет. Карты, созданные с помощью сервиса «Мои карты» редактируются только на maps.yandex.ru.

А не подскажите, есть ли такая возможность в принципе, исключая "Мои карты" или точки надо каждый раз динамически проставлять на вновь созданной через api карте?

 

Честно говоря, не очень поняла вопрос. Можете описать целиком, какая у вас задача?

Задача: периодически добавлять на карту точки на своём сайте и потом показать карту со всеми точками сразу.

Т.е. вы хотите некую админку у себя на сайте, через которую можно добавлять точки? 

Возможно, вам подойдет один из модулей для CMS? http://api.yandex.ru/maps/tools/cms/

Сайтик самописный на Yii. Поэтому модули не подходят. Позволяет ли api 2.0 админить карту с моего сайта с последующим её сохранением?

Ну вы можете добавлять в код новые метки. Готового редактора нет.

Я прошу прощения за свою дремучесть. Т.е. я каждый раз должен создавать чистую карту и генерировать на неё все, точки, которые у меня есть в данный момент? Сохранить положение этих точек на карте у меня не получится, чтобы в следующий раз я просто добавил несколько новых?

 

Не, вам как раз таки нужно создать карту с метками и добавлять в код новые метки к существующим.

Привожу пример: я создаю карту и добавляю на неё 3 метки. Сохранить её со своего сайта, как я понял, я не могу, поэтому просто сохраняю координаты этих меток у себя в базе. Затем я выхожу с сайта. На следующий день я хочу добавить ещё 25 меток к уже существующим 3-м. Я должен создавать пустую карту, добавляя в неё метки по координатам из моей базы, а потом добавлять новые 25 меток руками через редактор, или я могу подгрузить карту с уже проставленными моими 3-мя метками со вчерашенго дня, не указывая координаты этих точек в коде яваскрипта при создании карты?

Каким образом вы планируете создавать карту?

myMap = new ymaps.Map ("map", {
                        center: [],
                        zoom: 15
                    });

Ну а дальше вам нужно добавлять на карту геообъекты http://api.yandex.ru/maps/doc/jsapi/2.x/dg/concepts/geoobjects.xml.

Григорий, а ваше сайт вообще будет доступен другим пользователям? API Яндекс.Карт нельзя использовать на закрытых сайтах.

Екатерина, большое вам спасибо, что помогаете в моей проблеме. Конечно, карта будет доступна для других пользователей. Судя по вашему предыдущему ответу мне каждый раз надо создавать карту и добавлять все точки, которые у меня есть на эту карту, когда пользователь заходит на страницу с картой. И сохранить карту, созданную таким образом никак нельзя? Или кэшировать как-нибудь.

Карта сама по себе ничего хранить не умеет.

Данные (точки) хранятся в БД на сервере, а карта это клиенткий код, работающий в броузере.

Чтобы отобразить ваши точки на карте их нужно также прислать в броузер, с помощью AJAX или другими способами.

Так что если вы хотите хранить точки у себя - это статья не для вас, и всё таки придется попрограммировать

Сорри за банальный вопрос, но я втупике :-(

У меня есть две карты на сайтах, один из них http://www.art-buhta.ru/coordinates/

Но как мне в нее метки добавить? Я открываю "Мои карты", там одна и при добавлении на нее метки, на сайте ничего не отображается. Я понимаю, что видимо НЕ ТУ Карту редактирую...

То есть: КАК УВЯЗАТЬ МОЮ КАРТУ ЗДЕСЬ, с той, что на сайте?

Спасибо.

А я могу себе на сайт добавить карту чтобы с фотками из Вашего коталога была (ЯндексюФотки которые уже есть) и могу ли привязать свои фотографии?

Свои фотографии привязать, конечно, можете. Вот, например, сайт с работами художницы Елены Бокаревой.

А что значит «с фотками из вашего каталога»?

КАК НА КАРТАХ ИЛИ САЙТЕ, ОТОБРАЗИТЬ КАРТУ КМЛ ?
Т.Е.  ЕСТЬ ЛИ ПОЛЬЗОВАТЕЛЬСКИЙ СЛОЙ, С ЗАГРУЗКОЙ КМЛ, ИЛИ ВОЗМОЖНОСТЬЮ ИМПОРТА,
И РЕДАКТИРОВАНИЮ ДРУГИМИ ПОЛЬЗОВАТЕЛЯМИ?

у нас есть пример размещения KML на карте.

Редактирование естественно вам придется делать самостоятельно

lingerie-boutique.ru
28 января 2016, 06:23

Привет всем, вопрос таков: создал карту в Конструкторе карт, дали код , но логотип стандартный, как бы его изменить и с помощью чего?

спасибо

Привет!

В новом конструкторе изменить значок метки нельзя. Но вы можете для решения этой задачи воспользоваться альтернативным конструктором, который сделал один из наших пользователей — http://maps.xdan.ru.

Добрый день.

А как удалить метку в сервисе Мои карты? Час туплю.

 

Как получить ссылку на YMapsML-файл в новом Конструкторе карт?

Здравствуйте! А можно ли в метку добавлять не просто текст, а ссылку, которая будет кликабельна? Пытаюсь создать для себя карту веб камер, нужных для меня. 

ПОпробовала вот: https://maps.yandex.ru/?um=constructor:uWmLCbFko-lju2YTlFTYVLq8zJj1KfYy&ll=36.211483,50.030177&z=13