«Делать деньги без рекламы
может только монетный двор»
Томас Маколей – публицист XIX в.
+7 (964) 334-88-68
+7 (812) 425-50-75

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

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

Подробно заполненный сайт имеет куда больше шансов на успех, чем ресурс с минимумом полезной информацией. Особое внимание стоит уделять двум разделам: “О нас”, где клиент сможет узнать больше об организации и проникнуться к ней доверием, и ”Контактная информация”, благодаря которой вас можно будет легко найти. Во втором случае помимо стандартного номера телефона и адреса электронной почты можно добавить онлайн-карту: этот инструмент позволит визуально быстро определить, где располагается магазин или офис. Вы можете добавлять на сайт любую карту – подавляющее большинство из них бесплатно. Чаще всего владельцы страниц останавливают выбор на Яндекс.Карте: её можно добавить через API.

29ad ym

Пошаговое добавление Яндекс.Карты на сайт

Подробная инструкция добавления карты:

  • Шаг первый. Копируем API Яндекс.Карт (<script src="/https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>) и вставляем перед тегом </head>
  • Шаг второй. Выбираем оптимальное место для размещения будущей карты и вставляем код: <div id="map"></div>
  • Шаг третий. Переходим к стилям и вставляем следующий код:.ya_map {font-family: arial;font-size: 12px;color: #454545;} #map {width: 660px;height: 300px;}, где .ya.map – текста описания карты, а #map –размер самого виджета.
  • Шаг четвёртый. Выставляем настройки перед тегом </body>: <script type="text/javascript">ymaps.ready(init); var myMap;function init() {myMap = new ymaps.Map("map", {center: [43.238253, 76.945465], // Координаты объектаzoom: 13 // Маштаб карты}); myMap.controls.add(new ymaps.control.ZoomControl() ); myPlacemark = new ymaps.Placemark([43.238253,76.945465], { // Координаты метки объектаballoonContent: "<div class='ya_map'>Заезжайте в гости!</div>" // Надпись метки}, {preset: "twirl#redDotIcon" // Тип метки});myMap.geoObjects.add(myPlacemark);myPlacemark.balloon.open();};</script>

После этого его нужно настроить.

30ad ym

Настройка Яндекс.Карт на сайте

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

Полученные координаты и масштаб нужно скопировать, а затем просто добавить в текст кода в нужное место. Координаты и масштаб должны соответствовать, иначе на карте получится путаница.
Когда с этим этапом будет покончено, можно перейти к редактированию метки. Есть два варианта: либо оставить исходный вид, как в примере, либо убрать надпись. Часть кода myPlacemark = new ymaps.Placemark([43.238253,76.945465], { // Координаты метки объектаballoonContent: "<div class='ya_map'>Заезжайте в гости!</div>" // Надпись метки}, {preset: "twirl#redDotIcon" // Тип метки});myMap.geoObjects.add(myPlacemark);myPlacemark.balloon.open(); меняем на следующее: myPlacemark = new ymaps.Placemark([43.238253, 76.945465], {}, { // Координаты метки объектаpreset: "twirl#skatingIcon" // Тип метки});myMap.geoObjects.add(myPlacemark). Часть, отмеченная зелёным цветом – название стиля.

Еще один интересный вариант – вставка логотипа или изображения. Используем следующую комбинацию: myPlacemark = new ymaps.Placemark([43.238253, 76.945465], { // Координаты метки объектаballoonContent: "<div class='ya_map'>Заезжайте в гости!</div>" // Надпись метки}, {preset: "twirl#redDotIcon" // Тип метки});myMap.geoObjects.add(myPlacemark);myPlacemark.balloon.open() меняем на myPlacemark = new ymaps.Placemark([43.238253, 76.945465], { // Координаты метки объектаballoonContent: "<div class='ya_map'>Заезжайте в гости!</div>" // Надпись метки}, {iconLayout: "default#image",iconImageHref: "/images/pandoge_com.png", // Ссылка на изображение iconImageSize: [122, 59], // Размер изображения iconImageOffset: [-3, -42] // Положение изображения });myMap.geoObjects.add(myPlacemark);myPlacemark.balloon.open()

Завершающий штрих – подгонка размера карты под макет сайта. В соответствующем коде указывает нужный размер в пикселях или процентах в зависимости от желаемого результата. Это было базовые настройки: в итоге у вас на сайте появится стандартная карта от Яндекс, поддерживающая все функции. В последующем можно прибегнуть к дополнительным, более сложным настройкам.

©2018 «Барс». Санкт-Петербург, ул.Стахановцев, д.14, к.1, тел. +7 (964) 334-88-68, (812) 425-50-75. Создание и поддержка сайта - KmedWeb

Search