Как поставить несколько точек на карте яндекс. Онлайн-карты

Если вы желаете вставить хорошую карту на сайт с указанием на ней месторасположения, например, вашего офиса, склада, то воспользуйтесь такими известными веб-инструментами, как карта для сайта от Яндекса или карта для сайта от Google .

В этой статье мы расскажем для чего и как вставить карту Яндекса на сайт.

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

Для чего нужна карта на сайте?

Вы, возможно, улыбнетесь, прочитав этот, казалось бы, риторический вопрос. "Карта нужна, чтобы посетители знали, где мы находимся", - это простой ответ слишком прост для понимания роли карты особенно для коммерческого сайта. Вот некоторые важные аспекты наличия карты на сайте:

  • Обратите особое внимание: наличие карты в значительной степени повышает степень доверия к вашей ресурсу. Визуальное отображение месторасположения компании, офиса, магазина, подсознательно раскрепощает потенциального клиента (избавляет от опасений, вроде: "а вдруг обманут и исчезнут?"), а значит увеличивает вероятность того, что посетитель сайта станет реальным вашим клиентом.
  • Наличие интерактивной карты (в отличие от карты-изображения) позволяет пользователю лучше сориентироваться на местности, посмотреть ближайшее метро, автомобилистам - проверить маршрут на дальних подступах к объекту. Кроме того, интерактивная карта позволяет посмотреть на местность из космоса.
  • Ну, и конечно же, карта на сайте нужна для того, чтобы посетители и клиенты сайта знали месторасположение вашего магазина, офиса, склада.
Как вставить карту Яндекса на сайт (пошаговая инструкция)

Следует воспользоваться конструктором API Яндекс.Карт .

В этой статье мы приводим примерную пошаговую инструкцию, которая, как мы надеемся, поможет вставить карту Яндекс на ваш сайт:

Шаг 1. Начальная настройка Яндекс карты для сайта:
  • Откройте страницу конструктора Яндекс.Карт для сайта .
  • Найдите на карте необходимое географическое место по адресу или вручную (с помощью масштабирования ползунком и перемещения карты мышью).
  • Выберите удобный для работы масштаб. Окончательный масштаб лучше установить в конце работы. Рисовать будем метки на карте, линии (подъездные пути) и контуры зданий или территорий.
  • Укажите в соответствующем поле название будущей карте.
  • Перейдем к инструментарию сервиса: кнопки для рисования точек (меток на карте), линий, многоугольников (контуров) и размеров карты.
Шаг 2. Рисование на карте точек (меток):
  • Кликаем по кнопке рисования точек.
  • Ставим метку (точку) в нужном нам месте. Например, на здании вашего офиса. Карта для сайта от Яндекса позволяет вставить не одну, а несколько меток (к примеру, если у вас несколько магазинов, складов или офисов).
  • Переходим к настройке свойств установленной метки (вставка текста, выбор цвета и т.п.).
Шаг 3. Настройка свойств установленной на карте метки:
  • Кликаем непосредственно по нарисованной нами метке.
  • В открывшемся окошке выбираем нужные нам свойства (цвет, номер метки на карте), пишем по желанию текст (в последствии текст будет виден пользователю при клике по метке).
  • Любую метку можно удалить в соответствующем окошке свойств.
  • Итак мы вставили на Яндекс-карте для сайта метку вашего офиса, настроили её свойства, теперь переходим к рисованию линий. К примеру, линии подъездного пути к офису.
Шаг 4. Рисование линий на карте:
  • Кликаем по кнопке рисования линий.
  • Кликая по карте, мы получаем ломаную линию любой траектории. Ею можно оконтурить любой обект или прочертить маршрут подъезда к объекту.
  • Передвигая квадратные и круглые маркеры, можно редактировать форму линии.
  • По аналогии с метками, если кликнуть по линии, появится окно свойств, в котором можно установить цвет, толщину, прозрачность линии, а так же внести текст, который будет показываться пользователю.
  • Переходим теперь к рисованию многоугольников.
Шаг 5. Рисование многоугольников, заполненных цветом контуров:
  • Кликаем по кнопке рисования многоугольников.
  • В отличии от линий, которыми можно так же очертить любой многоугольник, данные многоугольники являются контурами с залитой цветом серединой.
  • Кликая мышкой по карте можно нарисовать любой заполненный многоугольник. Методика рисования, редактирования и установка свойств аналогична методике рисования линий.
  • Переходим теперь к изменению размеров карты.
Шаг 6. Изменение размеров карты для сайта:
  • Кликаем по кнопке изменения размеров.
  • Перемещая квадратные маркеры по контуру карты, можно изменить размер до необходимого. Всё просто.
  • Переходим к финалу создания карты.
Шаг 7. Получение кода карты для сайта (Яндекс):
  • Придаем карте окончательный вид, установив финальный масштаб карты и окончательную позицию (координаты).
  • На этом этапе создание карты для сайта (Яндекс) можно считать законченным. Нажимаем на большую желтую кнопку "Сохранить и получить код".
  • Даже после сохранения карты всегда можно вернуться к редактированию.
  • Обратите внимание на то, что карта может быть не только схемой, но и фотоснимком из космоса, гибридом или элементом "Народной карты".
  • Кроме того, вы вольны сделать карту интерактивной или простым изображением. Интерактивная карта интересней, функциональней, но может загружаться дольше простого изображения. Выбор за вами.
  • Вставить карту Яндекса на сайт можно, разместив html-код карты в нужном вам месте страницы.

Спасибо всем читателям, заинтересовавшимся нашей пошаговой инструкцией.

Создание карты для сайта от Яндекса - это нетрудоемкое, не требующее специальных знаний и навыков действие на фоне куда более сложных проблем сайтостроительства. Если при создании вашего сайта вы столкнулись с более серьёзными трудностями, обращайтесь к нам. Мы постараемся решить ваши проблемы!

Если вам понравилась наша инструкция, можете порекомендовать её своим друзьям и знакомым. "Социальные кнопки" находятся справа. Такова наша маленькая корысть .

  • Геоинформационные сервисы
  • Перед разработчикам, которые используют API Яндекс.Карт, довольно часто встаёт задача отобразить много объектов на карте. Действительно много - порядка 10 000. Причем эта задача актуальна и для нас самих - попробуйте поискать аптеки на Яндексе. На первый взгляд кажется: «А в чем собственно проблема? Бери да показывай». Но пока не начнешь этим заниматься, не поймешь, что проблем на самом деле целый вагон.

    Вопросы по большому количеству меток с завидной регулярностью поступают в наш клуб и техподдержку. Кто все эти люди? Кому может быть интересно показать на карте больше 10 меток? В этом посте я подробно рассмотрю весь вагон проблем и расскажу, как в API появились инструменты, помогающие разработчикам оптимально показать большое количество объектов на карте.

    В основном с проблемой сталкиваются информационные сервисы, которые хотят привязать данные к карте. Например сайт bankomator.ru рассказывает пользователям, где найти банкомат нужного банка.

    Также от большого количества данных страдают ресурсы, посвященные недвижимости. Яркий пример – Cian.ru.

    Мы сами внутри Яндекса до недавнего времени советовали смежным командам различные «хаки» и приемы для показа множества точек через API. Яркие примеры – Яндекс.Недвижимость и Яндекс.Такси.

    Пункт 1. В чем собственно проблема? Чтобы прочувствовать на себе всю тяжесть поставленной задачи, нужно попробовать ее решить. Для начала давайте поймем, как показать карту на странице вашего сервиса. Рассмотрим простую схему:

    Клиент (например, Safari на iPhone) запрашивает с сервера страницу index.html. Страница представляет собой документ вот с таким кодом:

    ymaps.ready(init); function init () { var myMap = new ymaps.Map("map", { center: , zoom: 10 }); }

    Теперь усложняем задачу. У нас есть база данных, в которой хранятся адреса болельщиков «Зенита». И мы хотим показать на карте адреса этих болельщиков.

    Решение задачи «в лоб»:

  • Делаем выборку из базы данных, получаем 1 млрд адресов.
  • Дописываем в файл index.html массив, содержащий весь миллиард адресов.
  • Передаем этот файл на клиент.
  • На клиенте перебираем данные массива и рисуем для каждого элемента метку на карте.
  • Если вы менеджер проекта, и ваш разработчик демонстрирует такое решение, скорее всего, вы поседеете. Вы выскажете ему свое оценочное суждение. Если убрать нецензурную брань, можно будет выделить следующие тезисы:

    • Вес файла index.html увеличится до нескольких Мб и у пользователя страница будет открываться по несколько секунд.
    • Зачем передавать на клиент ВСЮ базу, если нужно показать только метки для Москвы?
    • Зачем рисовать на карте ВСЕ метки, если человек увидит только десятую их часть?
    • Если на карте нарисовать около 100-200 меток обычным способом, карта будет тормозить.
    • Можно загружать метки постепенно, пачками, чтобы канал не забивался и браузер успевал эти метки отрисовывать?

    Кратко – вы генерируете на сервере прозрачные картинки с метками плюс текстовое описание меток. Клиент может следить за видимой областью карты и запрашивать данные, которые нужны для текущей видимой области карты.

    С помощью хотспотов, например, рисуются пробки на maps.yandex.ru. На этой же технологии сделан сайт bankomator.ru.

    У этой технологии есть несколько существенных минусов
    1. Очень сложная серверная часть. Попробуйте на досуге написать модуль, который генерирует вот такие картинки и их геометрические описания, и вы все поймете.

    2. Абсолютная негибкость. Невозможно «приподнять» метку при наведении на нее курсора. Невозможно быстро поменять на клиенте внешний вид меток. Короче – на любой чих надо просить сервер перегенерировать картинку.

    Поэтому пользователи крутились, как могли, без хотспотов – передавали наборы единичных объектов на клиент пачками, через таймаут. При этом на клиенте их снова ждали проблемы. Если вы передали на клиент 1000 точек, как их отрисовать?

    Из каждой точки нужно было сгенерировать объект ymaps.Placemark и добавить его на карту. Можно было добавить метки в кластеризатор (ymaps.Clusterer) и добавить откластеризованные метки на карту. Тут надо обратить внимание, что при кластеризации 10 000 точек нужно сначала эти 10 000 точек инстанцировать, а потом передать в кластеризатор. То есть метка может не показаться на карте, так как войдет в кластер, но мы все равно потратим время на ее инициализацию.

    Подытожив все эти дела, мы решили написать модуль, который бы позволил:

  • Быстро и легко отрисовать на клиенте большое количество точек.
  • Избежать лишних инициализаций при работе с точками на клиенте.
  • Загружать данные на клиент строго по требованию.
  • И мы это сделали. Мы котики. Пункт 2. Рисуем метки быстро Чтобы научиться рисовать метки быстро, надо было понять, какие проблемы кроются в текущем, уже существующем решении. Давайте посмотрим, что может делать объект ymaps.Placemark:
  • Он умеет рисоваться на карте.
  • У него есть свой менеджер балуна placemark.balloon.
  • У него есть свой менеджер хинта placemark.hint.
  • У него есть редактор, который позволяет перетаскивать метку и фиксировать ее координаты placemark.editor .
  • Кроме того, метка динамически реагирует на любое изменение внешней среды – изменение опций, данных, проекции карты, смена масштаба карты, смена центра карты и многое, многое другое. Такие вот у нас могучие плейсмарки.

    А нужна ли вся эта программная мощь для случая, когда разработчику просто нужно показать много однотипных меток на карте? Правильно, не нужна.

    Поэтому первое озарение заключалось в следующем: а давайте вынесем все вспомогательные модули меток в один общий компонент и для каждого отдельного объекта будем создавать только программную сущность, которая непосредственно отвечает за отрисовку.

    Второе озарение пришло, когда мы думали над проблемой лишних программных инициализаций. Вспоминаем рассказ выше, где-то в районе вот такой картинки.

    Нам захотелось избавиться от лишних программных инициализаций, и мы придумали гениальное. Садитесь поудобнее, сейчас будет откровение: если вам мешают лишние программные инициализации – не делайте их.
    Мы решили, что будем хранить пользовательские данные об объектах (по факту в JSON), а программные сущности для объектов будут создаваться только тогда, когда какой-либо объект нужно будет отрисовать на карте.

    После комбинации этих идей и некоторой разработки родился новый модуль API для отображения большого количества точечных объектов – ymaps.ObjectManager .

    На вход этого менеджера скармливается JSON-описание объектов.
    Менеджер анализирует, какие метки попадают в видимую область карты и либо рисует метки, либо кластеризует эти метки и показывает результат на карте.

    Для отрисовки меток и кластеров на карте мы взяли только часть объекта ymaps.Placemark (а именно ymaps.overlay.*), которая отвечала только за отображение метки на карте. Всю инфраструктуру типа балунов и хинтов мы вынесли в единый общий компонент.

    Эти приемы позволили нам неплохо продвинуться в вопросе отрисовки большого числа меток на клиенте. Вот какие мы получили приросты по скорости:


    График 1. Скорость создания и добавления объектов на карту с последующей асинхронной отрисовкой их видимой части

  • Создание 50 000 меток и добавление их на карту без кластеризации, видны 10 000.

  • График 2. Скорость создания и добавления объектов на карту с последующей синхронной отрисовкой их видимой части

  • Создание 1000 меток и добавление их на карту, все метки видны.
  • Создание 1000 меток и добавление их на карту с кластеризацией, все метки видны.
  • Создание 10000 меток и добавление их на карту с кластеризацией, все метки видны.
  • Создание 50 000 меток и добавление их на карту с кластеризацией, все метки видны.
  • Создание 50 000 меток и добавление их на карту с кластеризацией, видны 500 объектов.
  • Создание 10 000 меток и добавление их на карту без кластеризации, видны 2000.
  • Создание 5000 меток и добавление их на карту без кластеризации, видны 1000.
  • Важное замечание. Вся эта статистика справедлива для современных браузеров. IE8 к числу этих браузеров не относится. Поэтому для него цифры будут значительно хуже, но думаю для большинства это не имеет значения.

    У нас получилось ускорить непосредственно создание и отрисовку объектов, вдобавок к этому мы максимально оптимизировали инициализацию программных сущностей. Теперь вы можете, например, откластеризовать на клиенте 50 000 точек, и работать с картой будет комфортно.

    Почитать подробно про модуль можно в нашем руководстве разработчика , а посмотреть вживую примеры работы модуля - в песочнице .

    Итак, мы научились быстро-быстро рисовать и кластеризовать точки на клиенте. Что дальше?

    Пункт 3. Оптимально подгружаем данные Помните пример про болельщиков «Зенита»? Мы решили проблему отрисовки данных на клиенте, но никак не решили проблему, связанную с оптимальной подгрузкой этих данных. Мы начали собирать типовые задачи пользователей API. По итогам исследований мы получили два типовых кейса:
  • У человека на сервере много данных, он хочет показывать их на клиенте, но подгружать данные по мере надобности.
  • Разработчик подготавливает данные на сервере (например, реализует серверную кластеризацию) и хочет показывать на клиенте результаты этой обработки.
  • Для решения этих кейсов были написаны модули и RemoteObjectManager соответственно.Оба модуля основаны по сути на реализации ObjectManager , но имеют ряд различий в алгоритме загрузки и кеширования загруженных данных.

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

    Данные хранятся на клиенте в pr-дереве, поэтому выборки даже для большого количества данных делаются довольно шустро.

    Теперь обсудим вариант номер два – отображение на клиенте результатов серверной кластеризации. Допустим, вы написали серверную кластеризацию меток. Также вы написали скрипт, который по запросу от клиента умеет отдавать кластеры и единичные метки, не вошедшие в состав кластера.

    Вам остается только создать инстанцию RemoteObjectManager и прописать в нем путь до этого чудо-скрипта. RemoteObjectManager будет работать почти так же, как и . Разница будет только в том, что мы будем перезапрашивать данные с сервера при каждой смене зума.

    Поскольку данные кластеризуются на сервере, то сервер и только сервер может знать, какие данные нужно, а какие не нужно показывать в данный момент на карте. Поэтому информация об объектах хранится на клиенте только до первой смены зума, а потом все запрашивается заново.

    Если с сервера передается описание метки-кластера, то на клиенте эти метки подцепят всю инфраструктуру из API – для кластеров нарисуются специальные значки, для них будут работать все стандартные поведения и так далее и тому подобное.

    Пункт 4. Размышления на тему серверной реализации В этом разделе мы хотим перечислить концепции хранения и обработки данных на сервере, которые мы предполагали при проектировании клиентской части. Пойдём от простого к сложному.1. Хранение информации об объектах на сервере в статических файлах Клиентский код оперирует данными исключительно потайлово. Тайл – это некоторая нумерованная область на карте. Подробнее про нумерацию тайлов можно прочитать в нашей документации.

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

    У клиентского модуля есть настройки, которые заставляют отправлять запросы за каждым новым тайлом по отдельности. Чем это ценно? Да тем, что мы получаем конечное число вариантов запроса клиента на сервер.

    Zoom=0, tile=
    zoom=1, tile=
    zoom=1, tile=
    zoom=1, tile=
    zoom=1, tile=
    zoom=2, tile=

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

    В файлах будет храниться примерно такой код:

    MyCallback_x_1_y_2_z_5({ "type": "FeatureCollection", "features": [ { "type": "Feature", "id": 0, "geometry": { "type": "Point", "coordinates": }, "properties": { "balloonContent": "Содержимое балуна", "clusterCaption": "Метка 1", "hintContent": "Текст подсказки" } }, ... ] }

    При загрузке такого файла на клиенте будет вызван JSONP-callback, прописанный в файле. Данные попадут в недры LoadingObjectManager, закешируются и отрисуются в нужном виде.

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

    2. Динамическое формирование ответа из статических файлов Существенным минусом вышеописанного решения является большое количество запросов за данными от клиента к серверу. Намного целесообразнее отправлять запрос сразу за несколькими тайлами, чем запрашивать данные для каждого тайла по отдельности.Но для обработки запросов за группами тайлов уже придется написать некоторый серверный код.

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

    3. Динамическое формирование ответа с использованием базы данных Самый верный, на наш взгляд, путь – реализовать серверную часть с использованием какой-либо базы данных, умеющей индексировать геопривязанные данные. Для любой базы, не поддерживающей пространственные индексы, можно создать подобный индекс самостоятельно, используя концепцию пространственных ключей .

    Вообще хранение геопривязанных данных на сервере и их кластеризация – тема отдельной беседы. Так что обсудим в другой раз.

    Заключение Сравнительная таблица новых модулей.Модуль Преимущества Недостатки
    ObjectManager

    Отрисовка производится только тех объектов, которые попадают в видимую область карты.

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

    Данные загружаются для всех объектов сразу (даже для тех, которые не попадают в видимую область карты).

    Кластеризация объектов производится на стороне клиента.

    Позволяет кластеризовать объекты на клиенте.
    Загружает данные только для видимой области карты.

    Сохраняет загруженные данные. Для каждого объекта данные загружаются только один раз.

    Позволяет фильтровать объекты при их отображении.

    Поддерживает работу только с метками.

    Кластеризация объектов производится на стороне клиента.

    RemoteObjectManager Использует серверную кластеризацию данных.

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

    Поддерживает работу только с метками.

    При изменении коэффициента масштабирования данные загружаются заново (даже для тех объектов, для которых данные уже были загружены).

    Необходимо реализовывать собственную кластеризацию.

    Необходимо реализовать серверную часть.

    На данный момент мы поддерживаем работу только с точечными объектами. Поддержка полигонов, полилиний и прочих прекрасных фигур стоит у нас в планах и появится в будущих релизах.

    Когда стоит задуматься об использовании этих модулей? Почти в любой ситуации, когда вам надо отрисовать на карте много точечных объектов.

  • Подробнейшее руководство разработчика с картинками – tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/many-objects-docpage .
  • Примеры в песочнице – tech.yandex.ru/maps/jsbox/2.1/object_manager
  • Проект на гитхабе с примером реализации серверной части для RemoteObjectManager – github.com/dimik/geohosting-server .
  • Клуб разработчиков API Яндекс.Карт, куда нужно приходить с вопросами – clubs.ya.ru/mapsapi .
  • Теги:

    • javascript
    • api
    • geo
    Добавить метки

    В данной статье я хочу начать цикл статей по работе с API Яндекс.Карт. Документация Яндекс.Карт достаточно полна, но степень разрозненности информации в ней высокая, при первом заходе в документацию без пол-литры не разобраться, и для решения какой-то проблемы можно потратить много времени на поиск по документации и в поисковике. Этот цикл статей будет рассказывать о практических решениях наиболее частых случаев использования API Яндекс.Карт последней, на момент написания статьи, версии 2.1.

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

    Для вставки интерактивной карты может использоваться конструктор карт
    https://tech.yandex.ru/maps/tools/constructor/ :

    В случае, если нам нужно более продвинутое использование карт (свои метки, программное перемещение карт и т.п.), то для этого надо использовать API Яндекс.Карт: https://tech.yandex.ru/maps/jsapi/ . В качестве примера использования карт в статье будет рассмотрено создание карты с простым добавлением пользовательских метки и балуна.

    Для начала подключим компоненты API:

    Если разрабатывается какое-то большое приложение с использованием карт, то лучше подключать компоненты API определённой версии, чтобы при обновлении API на стороне Яндекса у нас ничего не сломалось на продакшине:

    Карту необходимо будет расположить в каком-нибудь блоке, например в div#map . Далее карту необходимо создать в данном блоке (после срабатывания события готовности карты и DOM):

    ymaps.ready (init) ; function init() { var myMap; myMap = new ymaps.Map ("map" , { center: [ 55.76 , 37.64 ] , zoom: 7 } ) ; }

    Здесь мы указываем:

  • идентификатор блока «map» , где у нас будет создана карта;
  • center — центр карты с указанием ширины и долготы;
  • zoom — коэффициент масштаба карты.
  • По умолчанию Яндекс.Карты создают много лишних элементов, которые в большинстве случаев не нужны на сайтах. В основном к элементам управления и к поведению карты достаточно применить 2 условия:

  • из элементов карты присутствует только ползунок изменения масштаба;
  • карта не должна менять масштаб скроллом мыши.
  • Для выполнения этих требований дополняем код:

    ymaps.ready (init) ; function init() { var myMap; myMap = new ymaps.Map ("map" , { center: [ 55.76 , 37.64 ] , zoom: 13 , controls: } ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap.controls .add ("zoomControl" , { position: { top: 15 , left: 15 } } ) ; }

    Здесь мы отключили «scrollZoom» и добавили «zoomControl» с позиционированием от левого верхнего угла.

    Теперь нужно добавить на карту метку, для статьи скачаём её картинку с http://medialoot.com/item/free-vector-map-location-pins/ и расположим в коде следующим образом:

    ymaps.ready (init) ; function init() { var myMap; myMap = new ymaps.Map ("map" , { center: [ 55.7652 , 37.63836 ] , zoom: 17 , controls: } ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap.controls .add ("zoomControl" , { position: { top: 15 , left: 15 } } ) ; var myPlacemark = new ymaps.Placemark ([ 55.7649 , 37.63836 ] , { } , { iconLayout: "default#image" , iconImageHref: , iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] } ) ; myMap.geoObjects .add (myPlacemark) ; }

    Здесь мы объявляем переменную myPlacemark , в которой запишем маркер, в первом параметре ymaps.Placemark указываем координаты метки, а в третьем параметре:

  • указываем в iconLayout , что будет использоваться пользовательское изображение метки;
  • iconImageHref — путь к изображению;
  • iconImageSize — указываем размеры изображения;
  • iconImageOffset — указываем сдвиг от левого верхнего угла картинке к точке изображения, которая показываем на нужный нам объет. Нужно это чтобы при масштабировании карты положение метки не сбивалось. Почему смещение указывается в отрицательных значениях — одному Богу создателю API известно.
  • И через myMap.geoObjects.add() добавляем метку на карту.

    А теперь сделаем баллун, который у нас будет показываться при клике на метку карты, макет баллуна и его содержимое возьмём с http://designdeck.co.uk/a/1241

    ymaps.ready (init) ; function init() { var myMap; myMap = new ymaps.Map ("map" , { center: [ 55.7652 , 37.63836 ] , zoom: 17 , controls: } ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap.controls .add ("zoomControl" , { position: { top: 15 , left: 15 } } ) ; var html = "" ; html += "" ; html += "" ; html += "

    The Victoria Tower Gardens

    " ; html += "" ; html += "

    City of London

    " ; html += "" ; html += "

    United Kingdom

    " ; html += "

    020 7641 5264

    " ; html += "" ; html += "" ; var myPlacemark = new ymaps.Placemark ([ 55.7649 , 37.63836 ] , { balloonContent: html } , { iconLayout: "default#image" , iconImageHref: "http://сайт/files/APIYaMaps1/min_marker.png" , iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] , balloonLayout: "default#imageWithContent" , balloonContentSize: [ 289 , 151 ] , balloonImageHref: "http://сайт/files/APIYaMaps1/min_popup.png" , balloonImageOffset: [ - 144 , - 147 ] , balloonImageSize: [ 289 , 151 ] , balloonShadow: false } ) ; myMap.geoObjects .add (myPlacemark) ; }

    Здесь мы:

  • в balloonContent указываем контент, который будет отображаться при открытии балуна;
  • balloonLayout — указываем, что в качестве макета баллуна будет использоваться пользовательское изображение;
  • balloonContentSize и balloonImageSize — размеры контента и изображения соответственно;
  • balloonImageHref — путь к изображению;
  • balloonImageOffset — смещение относительно левого верхнего угла;
  • balloonShadow — отключение тени у балуна (с пользовательскими изображениями ни на что не влияет).
  • С 1 октября 2012г. мы ввели в эксплуатацию новейший уникальный сервис в Интернете – показ списка адресов на карте.

    Это единственный известный нам удобный сервис, который позволяет большой список адресов (например - из файла EXCEL) легко показать на карте, и узнать географические координаты всех точек.

    Воспользоваться этим сервисом исключительно просто.

    Нужно сформировать файл с адресами следующим образом:

    Адрес – адрес подряд в произвольной форме, например - Санкт-Петербург, Невский пр. д.155 корпус 3, или Невский 155/3

    Адрес должен быть записан обязательно в первом столбце и обязательно в ОДНОМ столбце целиком. Если у вас адрес в нескольких столбцах – нужно просто слить их в один.

    Название точки (имя точки) – если его не будет, то система ставит порядковый номер точки.

    Описание – любой текст – описание точки, оно переносится в описание точки на карте.

    Пример заполнения таблицы:


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

    Совершенно очевидно, что объективно система не всегда сможет привязать адреса к карте. Иногда привязать адреса невозможно.

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

    Ну и конечно, программа не сможет правильно привязать адрес, если он указан неверно, например «от ларька налево за углом».

    А результаты привязки программа выдает в виде статистики.

    Также программа выдает результирующий EXCEL файл, куда она добавляет два столбца с координатами (широта и долгота).

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

    Эти коды привязки адреса – очень важный показатель. С помощью этих кодов вы можете выбрать только те адреса, которые наиболее правильно привязались с вашей точки зрения.

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

    Выводы.

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

    Механизм уникален, т.к. в Интернете нет подобного механизма по удобству и по возможностям обработки сразу больших массивов адресов из файла.

    Механизм весьма востребован, т.к. мы неоднократно встречали в Интернете запросы на такой механизм – показать именно большой список адресов на карте.

    Механизм имеет неоспоримое преимущество перед google и yandex – потому, что может сразу обрабатывать целые списки адресов, а google и yandex обрабатывают по одному адресу или требуют писать отдельную программу, с использованием своего интерфейса.

    Очевидно, что пользователь не будет писать программу, если ему нужно просто показать свои большие списки адресов на карте, а просто воспользуется нашим сервисом.

    Этот сервис можно искать по различным ключевым словам, например:

    все адреса на карте;

    список адресов на карте;

    интернет сервис размещения на карте большого количества адресов точек;

    отметить много адресов точек на карте;

    отметить адреса на карте;

    Санкт-Петербург Москва карта импорт адресов Excel;

    показать адреса из базы на карте;

    показать адреса из файла на карте;

    поиск с указанием нескольких адресов на карте;

    поиск с указанием многих адресов на карте;

    множественный поиск адресов на карте;

    одновременный поиск нескольких адресов на карте;

    привязать много адресов к карте;

    показать много адресов на карте;

    показать много адресов из файла на карте.

    Код статуса – трехзначное число, где:
    Первая цифра (сотни): статус привязки к населенному пункту
    Вторая цифра (десятки): статус привязки к улице
    Третья цифра (единицы): статус привязки к номеру корпуса.

    Привязка к нас.пункту:
    0 – норма, нас.пункт был найден в адресе и он правильный.
    1 – населенный пункт отсутствует в адресе, потребовалось подставить нас.пункт по умолчанию (например, для карты спбло таким нас.пунктом является Санкт-Петербург).
    2 – населенный пункт был найден в адресе, однако он оказался неправильным (т.е. остальная часть адреса ему не соответствовала), либо населенный пункт отсутствовал в адресе и подставленный вместо него нас.пункт по умолчанию тоже не подошел – потребовалось изменить населенный пункт на произвольный, но такой, чтобы нашлось соответствие.

    Привязка к улице
    0 – норма, название улицы в адресе точно совпало с названием в адресной базе.
    1 – название совпало после перестановки слов в названии (например, вместо «Малая Конюшенная» было указано «Конюшенная Малая»).
    2 – название совпало после того, как было подставлено слово слева (например, вместо «ул. Генерала Карбышева» было указано просто «ул. Карбышева»).
    3 – название совпало после того, как было подставлено слово справа.
    4-8 – зарезервировано
    9 – нет улицы, то есть поиск велся только по региону, без привязки к улице и дому

    Привязка к корпусу
    0 – норма, корпус был найден в адресе и он правильный; либо корпус был не найден в адресе, и в адресной базе есть дом без корпуса
    1 – указанного в адресе корпуса нет, была проведена замена.
    2 – указанного в адресе дома нет, был найден ближайший по номеру дом той же четности (отличающийся не более чем на 10).
    3-8 – зарезервировано
    9 – нет дома, то есть поиск велся только по региону, без привязки к улице и дому

    Использование интерактивных карт на веб-страницах — это отличный и удобный способ показать клиенту, где именно располагается ваша организация. При использовании "Яндекса" можно не только расположить модуль с картой, но и поставить по нужному адресу метку, которая поможет посетителям легко сориентироваться при поиске.

    Конструктор карт от "Яндекса"

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

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

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

    Настройка метки

    Чтобы было понятнее, как поставить метку организации на карте "Яндекс", разберем этот процесс по пунктам:

    • В интерфейсе работы с картой слева в окне введите название и описание организации, как показано на скриншоте ниже.
    • Сверху нажмите на кнопку "Метки" и левой кнопкой мыши выберете необходимое место карты.
    • Появится значок, который будет отмечать нужное место, а в левой части окна вы увидите список добавленных объектов. Конструктор дает возможность не только разобраться, как поставить метку на карте "Яндекс", но и поможет ее отредактировать по своему вкусу.

    • При выборе места, в меню слева откроется интерактивное диалоговое окно, в котором можно вписать данные об организации, выбрать цвет и тип иконки, а также пиктограмму, указывающую на направленность работы организации.
    • Нажав кнопку "Готово", вы сформируете метку на карте.

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

    Как только редактирование завершено, нажмите "Сохранить и продолжить". В открывшемся окне можно задать необходимый размер для карты — его вы можете выбрать, исходя из требований сайта, на котором он будет расположен. Рекомендуется располагать метку в центре карты, а масштаб сделать такой, чтобы были видны названия близлежащих улиц. Так информация воспринимается гораздо лучше.

    Как только получилось поставить на карте "Яндекс" метку по адресу расположения организации, можно выбрать более предпочтительный вариант размещения — динамический или статический. Первый гораздо удобнее, потому что предполагает возможность интерактивного взаимодействия пользователя с картой, а второй хорошо подойдет для случаев, когда требуется снизить нагрузку на сайт.

    Получение кода для размещения

    После того как вы смогли поставить метку на карте "Яндекс", можно приступать к размещению последней на сайте:

  • Для этого необходимо получить код. Нажмите на соответствующую кнопку слева, откроется диалоговое окно.
  • Данный код вставляется в нужное место на вашем сайте, и после обновления страницы интерактивная карта с расположенной на ней меткой, которая указывает на вашу организацию, начнет работать.
  • Обратите внимание, что в этом же окне можно выбрать вариант для распечатки карты на бумажном носителе, получить на нее активную ссылку, а также задать размер: фиксированный на ширину экрана. Если вы выбрали вариант для распечатывания, можно задать соответствующие параметры — формат, качество и размер. Сохранить файл рекомендуется на компьютере или на сервисе "Яндекс.Диск".

    Вы можете в любой момент вернуться к редактированию полученной метки, нажав на кнопку в левом верхнем углу. Метки можно добавлять в любом количестве, перемещать, удалять и менять их оформление.

    В заключение

    Наличие на веб-странице интерактивной карты — хороший способ показать заботу о клиенте. Также ее можно использовать в любых других целях для собственного удобства. При помощи этой статьи вы смогли узнать, как поставить метку на карте "Яндекс", и в дальнейшем вы избежите проблем с указанием расположения вашей организации и схемы проезда к ней.