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

12.03.2017

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

И встроить на сайт, выбрав один из вариантов карты: интерактивная, статичная, печатная.


Для создания карты воспользуйтесь Конструктором карт Яндекса.

У меня уже есть созданные карты, поэтом отображается список карт.

Чтобы создать Яндекс карту, нажмите кнопку Создать новую карту.



Далее в полях слева впишите название и описание карты.



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

Автоматически появится метка на найденном объекте.

Вы можете задать собственное описание метки, выбрать цвет метки:



Справа измените тип метки, если Вам  это нужно. Метки могут быть: пустые, с номером, с подписью.



Или в виде картинки:

После того как Вы настроили метку, нажмите кнопку Готово.


На Яндекс карту можно добавить столько меток, сколько нужно. И также их настроить.


Под строкой поиска объектов есть еще кнопки Линии, Многоугольники, Пробки, Слои. В последнем пункте выбирается вид карты: схема, спутник, гибрид (вид со спутника+подписаны дороги и некоторые объекты). Так, например, выглядит часть нашего города. 


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

После всех настроек карты и меток нажмите в нижнем левом углу экрана Сохранить и продолжить.





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



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

Далее нажмите Получить код карты


Скопируйте готовый HTML-код и вставьте на сайт в гаджет или в статью (сообщение) в режиме HTML.

Вот пример интерактивной карты нашего города:


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

1 комментарий:

  1. Мария! Спасибо! Обязательно пригодится! Можно сделать к Юбилею города!

    ОтветитьУдалить

Kwork.ru - услуги фрилансеров от 500 руб.

Загляните и на другие страницы ^