Яндекс карты метка круглая. Изменение масштаба и положения

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

Как добавить компанию на карты Google

Необходимо создать страницу в сервисе Google Мой бизнес .

Что это даёт? В первую очередь — возможности:

• информировать пользователей о ценах, времени работы, событиях и новостях организации;
• следить за отзывами и быстро реагировать на них;
• анализировать просмотры информации о бизнесе (количество просмотров данных о компании, просмотры фото, видеозаписей);
• общаться с потенциальными клиентами с помощью Hangouts;
• прикреплять карты с маршрутом к организации;
• укреплять репутацию благодаря оценкам пользователей.

Блок Google Мой Бизнес в поисковой выдаче

Алгоритм добавления компании.

Если вы не получите письмо в течение 3-4 недель, смело пишите в техподдержку: «Письмо не пришло, что мне делать?». Google предложит пройти процедуру подтверждения вручную.

Для этого нужно будет отправить несколько фотографий:

9. После этого вы попадете в личный кабинет своей компании:

На странице «Информация» необходимо предоставить наиболее полную информацию о вашей компании:

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

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

Чем полнее и качественнее будет представлена информация о вашей компании, тем больше вероятность, что её увидят пользователи Google.

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

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

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

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

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

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

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

• В интерфейсе работы с картой слева в окне введите название и описание организации, как показано на скриншоте ниже.

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

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

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

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

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

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

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

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

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

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

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

В заключение

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

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

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

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

Поиск по Yandex Maps, народная карта и Яндекс.Справочник

Сам сервис онлайн карт от Яндекса (читайте про то, ) появился в 2004 году и с тех пор продолжает усилено развиваться, тем более, что у него есть очень мощный конкурент в лице Google maps. Жители многих крупных городов России, Украины, Казахстана или Белоруссии пользуются такими расширенным возможностями, как Пробки или Панорамы.

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

Кроме автомобиля, сотрудники Яндекс Карт объезжают некоторые участки на велосипедах или же пешком (например, в парках). В последнее время появились еще и панорамы сделанные с вертолета, и чтобы их можно было посмотреть, нужно поставить галочку «С воздуха» под соответствующей кнопкой, но правда такая штука доступна только для Питера.

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

Далее следуйте инструкциям в приведенном ниже ролике (указанные данные, такие как, например, телефон или адрес, потребуется подтвердить, поэтому они не должны быть фейковыми, иначе добавиться на карту не получится):

При этом нужно быть авторизованным на Yandex и лучше всего, если это будет не ваш личный аккаунт, ибо может понадобиться отредактировать данные добавленные на карту (или заказать приоритетное размещение), а доверять свой аккаунт сотруднику будет не всегда правильно. Чтобы достаточно будет следовать приведенным инструкциям.

Чем еще привлекателен поиск по Yandex Maps для пользователей, так это тем, что они могут почитать и при желании оставить отзыв об организации. Причем отзывы модерируются (не владельцами фирмы, естественно, а сотрудниками зеркала рунета) и явный спам или бред отсеивается.

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

Создание карт в Яндексе, маршруты и мобильные приложения

Это мы описали три основных источника, откуда Яндекс черпает информацию при поиске по географическим объектам. Но есть еще и четвертый. Это так называемые метки, которые пользователь оставляет на так называемых «Моих картах» , сохраняя их с возможностью публичного доступа к ним. Понимаете о чем я говорю? Если нет, то буквально в паре абзацах попробую уложиться с разъяснениями.

В левой колонке есть вкладка «Мои карты». Суть ее заключается в том, что здесь вы можете сохранить все те метки, выделения, проложенные маршруты и другие вещи, которые вы сотворили на Yandex Maps. Лично я таким образом отмечал места, куда мне удалось доехать на велосипеде в окрестностях моего местожительства.

Однако, вы можете поставить метку, выделить любое здание (проложить маршрут) и написать, что там находится ваша фирма, добавив в описание метки нужные ключевые слова (в этом случае подтверждать информацию будет не нужно), ибо есть вероятность учета этой информации при поиске по Yandex Maps. В таком случае карту лучше будет сохранять как публичную (пометка «всем») на приведенном выше скриншоте.

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

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

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

Раз уж речь зашла о прокладке маршрута на Yandex Maps , то и об этом скажу пару слов. Удобная штука. Когда не было машины, то актуально было прокладывать маршрут движения на общественном транспорте в незнакомое место.

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

К тому же, Yandex Maps предупреждает и про время, предположительно необходимое на совершение данного паломничества и даже альтернативные маршруты предлагает к вашему рассмотрению.

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

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

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

Но маршруты и пробки прокладывать дома, конечно же, интересно, однако чаще всего мы с вами пользуемся именно мобильными приложениями Яндекса (Карты, Навигатор или Метро). Первая программа, думаю, установлена на 90% телефонов в крупных городах России, где имеют привычку собираться огромные пробки. Оно и понятно, ибо удобно, оперативно и достоверно. Меня эта шняга пока серьезно не подводила.

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

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

Хотя, лично я Навигатор с Yandex Maps храню на телефоне как резервный вариант, ибо тонюсенький Гармин с обалденным экраном, голосовым управлением и прекрасными картами России меня полностью устраивает, разве что только пробки у него не всегда своевременно подгружаются, ибо для этого используется радиоканал и когда вся Москва стоит, то вещать приходится много и пока дойдет очередь до района, в котором ты едешь, все может десять раз поменяться.

Api Яндекс карт и конструктор для их создания

Ну, вот с общими вопросами покончили, теперь пора переходить к практике, а именно к тому, как создать в конструкторе и вставить на свой сайт карту от Яндекса . На самом деле это и легко, и сложно одновременно.

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

Собственно, есть очень хороший ролик, который поможет вам принять решение о необходимости со всем этим заморачиваться — Как улучшить сайт с помощью API Яндекс.Карт (в примерах):

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

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

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

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

Да, сам термин API (application programming interface) означает получение возможности использовать какое-то программное обеспечение, не зная вообще как оно работает, но имея описание тех инструментов (ручек), которые необходимы для его подключения и реализации тех или иных возможностей. Штука эта распространенная и довольно часто используется.

Апи Yandex Maps описано по приведенной чуть выше ссылке, но также имеется и простой конструктор, который вам позволит оперативно создать карту нужного вам района, поставить на ней необходимые метки с описаниями, выделить нужные объекты и показать путь, по которому к ним проще всего добраться, например, от ближайшей станции метро.

Конструктор карт в Яндексе function customscript_shortcode($atts, $text) { global $post; return get_post_meta($post->ID, $text, true); } @add_shortcode("customscript","customscript_shortcode");

После этого в статью или статическую страницу можно будет вставлять код, полученный в конструкторе Яндекс карт , с помощью такой вот конструкции, где вместо «yandexmap» вставьте используемый вами идентификатор:

Теперь вам не страшен визуальный редактор, который готов порезать все, что отличается от Html кода. Ура. Если нужно вставить схему проезда в каркас блога (хедер, сайдбар или футер), то скрипт туда можно вставлять напрямую, но нужно будет выбрать нужный , чтобы карта выводилась там, где вы хотите. Про назначение шаблонов читайте по приведенной ссылке.

Для вставки API карты с Яндекса на сайт под управление Joomla можно будет использовать все тот же , но предварительно отключить визуальный редактор, чтобы код опять же не порезался им. После вставки редактор можно включить взад.

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

В этом случае модуль с кодом карты от Яндекса нужно расположить в несуществующую позицию шаблона (банально набрать в поле выбора позиции в настройках модуля произвольного Html кода что-нибудь типа: yandex-karta). А затем, уже при написании или редактировании статей, вы сможете вставить в нужном месте конструкцию:

{loadposition yandex-karta}

Кстати, если вдруг этот способ у вас не работает, то зайдите в менеджер плагинов (из админки Joomla, выберете пункты меню «Расширения» - «Менеджер плагинов») и найдите, а затем активируйте «Content - Load Module». Он входит в стандартный комплект поставки Joomla, поэтому он у вас должен быть в обязательном порядке.

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

Для подключения Апи Яндекса достаточно будет разместить между тегов head (найти их в случае Joomla или Вордпресс можно так же, как это было описано с статье про ) следующий вызов скрипта:

Ну, а в нужном месте (где должна вставляться и выводиться схема проезда) достаточно будет вставить:

? ymaps.ready(function () {? var map = new ymaps.Map("YMapsID", {? center: ,? zoom: 9,? behaviors: ["scrollZoom", "drag"]? });?? //Необходимо подставить свой URL.? ymaps.geoXml.load("скопированная ссылка на YMapsML-файл")? .then(function (res) {? // Добавление загруженных из YMapsML-файла объектов на карту.? map.geoObjects.add(res.geoObjects);? });? });?

Будем считать, что с созданием простейшей схемы проезда и вставкой ее на свой сайт, мы кое-как разобрались. Что же дальше? Наверное, стоит сказать пару слов о более сложных вариантах API Яндекс Карт, которые уже не подвластны упомянутому конструктору, но зато вполне по силам человеку знакомому с языком ДжаваСкрипт.

В этом случае перед вами открываются все возможности API Yandex Maps , которые описаны по приведенной ссылке. Там имеется вся необходимая документация , а девушка из этого ролика введет вас в курс дела:

Отлично, передайте эти материалы вашему программисту и он вам сварганит что-нибудь похожее на это (если в этом есть необходимость):

Как вставить Yandex Maps в Вордпресс и Joomla при помощи расширений

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

Список таких расширений можно найти на официальном сайте. Если рассматривать Вордпресс, то для него существует, по-моему, только один плагин под названием Yandex Maps for WordPress , который можно будет бесплатно скачать по указанной ссылке. Устанавливается и активируется он стандартным образом.

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

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

Потом переносите курсор (кликаете мышью) в то место статьи, где вы хотите вставить Яндекс карту и жмакаете по кнопке «Send Map To Editor». В результате получим что-то похожее на это:

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

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

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

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

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

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

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

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

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

• В интерфейсе работы с картой слева в окне введите название и описание организации, как показано на скриншоте ниже.

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

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

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

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

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

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

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

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

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

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

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

В заключение

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

В данной статье я хочу начать цикл статей по работе с 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 — отключение тени у балуна (с пользовательскими изображениями ни на что не влияет).