Как добавить на сайт карту от Яндекс.Карты

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

   Практически каждый сайт-визитка, имеет страницу с контактами, где обычно указываются адрес, телефон, ICQ и другие типы связи с администрацией включая интерактивную карту проезда.
   У Яндекс есть прекрасный сервис: JavaScript API Яндекс.Карт - он позволяет разместить интерактивную карту на странице сайта,
добавить на карту необходимые элементы управления и обозначить географические объекты.
(Для начинающих: не пугайтесь терминов JavaScript и API, в итоге всё делается просто и понятно)
   Для этого Вам нужно:
1. Перейти на страницу API Яндекс.Карт в <<Конструктор карт>> вот прямая ссылка - http://api.yandex.ru/maps/tools/constructor/
Авторизуйтесь в Яндекс.
 
yandex maps
 
   Обратите внимание на строку в низу между изображением карты и желтой кнопкой <<Получить код без авторизации>>, это говорит о том, что вы не вошли в аккаунт Яндекс и у вас ограничены права.
2. Перейдя по ссылке, в поле <<Найти место на карте>> введите нужный Вам адрес, например: улица Гагарина 32а, город Могилев, Беларусь. И тут мы видим, что даже Яндекс не совершенен, он показал соседний 30а дом. Не проблема, закрываем окно <<Описание>>, в инструментах выбираем <<точка>> и отмечаем в нужном месте, выбрав цвет метки. Отредактируйте описание, кликнув на метку. Там вы можете также задать свой цвет метки, и переместить последнюю.
   В инструментах имеются: <<Рисование линий>>, <<Рисование многоугольников>> и <<Изменение размеров карты>>. Используйте эти инструменты по необходимости на свое усмотрение.
 
добавить карту Яндекс на сайт
 
3. Теперь кликните на желтую кнопочку <<Сохранить и получить код>> в самом низу страницы. Скопируйте полученный код.  В моем случае JavaScript API имеет следующее содержание:
<script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=ovGt2QUZWmtx0xL-fS_wht5LSqstEC5S&width=600&height=450"></script>
   Инструмент Яндекс <<Изменение размеров карты>> не позволил мне выставить нужные размеры, ограничив их width=600 & height=450, но это легко поправить в коде, прописав необходимые. Я указал: width=800&height=600.
4. Далее собственно вставьте полученный код на свой сайт. Всё.

Добавить комментарий

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и абзацы переносятся автоматически.
CAPTCHA
Этот вопрос задается для предотвращения спама.
CAPTCHA на основе изображений
Введите символы, которые показаны на картинке.