КАК ДОБАВИТЬ И НАСТРОИТЬ ЯНДЕКС.КАРТУ

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

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

Вы можете добавлять на сайт любую карту —подавляющее большинство из них бесплатно. Чаще всего владельцы страниц останавливают выбор на Яндекс.Карте: её можно добавить через API.

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

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

Шаг первый. Копируем 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;},</div>

где .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>

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

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

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

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

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

     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(). 

Завершающий штрих — подгонка размера карты под макет сайта. В соответствующем коде указывает нужный размер в пикселях или процентах в зависимости от желаемого результата.

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

ПОЗВОНИТЕ МНЕ
+
Жду звонка!