Думаю, що на всіх сайтах, які ведуть комерційну діяльність, існує розділ контактної інформації або інформації про компанію. Без наявності картки, що допомагає зорієнтуватися вашим клієнтам, сайт сильно програє в зручності для користувача. 
Сервісів, який безкоштовно надає карти, безліч, але я б хотів зупинитися сьогодні на Яндекс.Картах. Не буду розглядати варіант створення карт через простий конструктор, а оскільки ми з вами в якійсь мірі веб-майстри, розповім, як впровадити карту від Яндекс.Карт за допомогою API.
Додавання Яндекс.Карти на свій сайт
1. Отже, перше, що вам необхідно зробити - це перед закриває тегом </ head> вашого сайту підключити сам API Яндекс.Карт:
<Script src = "https://api-maps.yandex.ru/2.1/?lang=ru_RU" type = "text / javascript"> </ script>
2. У потрібне місце на вашому сайті вставте код, де буде відображатися карта:
<Div id = "map"> </ div>
3. У файл стилів (в самий кінець) вставте:
.ya_map {font-family: arial; font-size: 12px; color: # 454545; } #Map {width: 660px; height: 300px; }
тут:
.ya_map - це стиль тексту, який буде відображатися у підписи на карті, а
#map - розмір карти.
4. І під кінець одним з найважливіших кроків буде додавання перед закриває тегом </ 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>
З ним-то ми і будемо зараз працювати.
Налаштування Яндекс.Карти
З усього цього коду нам потрібно змінити пару рядків, які прокоментовані.
1. Почнемо з адреси. Для того щоб вам отримати координати потрібної адреси, зайдіть сюди . На що відкрилася карті введіть потрібний вам адресу. Після чого, знайшовши об'єкт на мапі, ви отримаєте його координати.
Для налаштування скрипта нам потрібні координати мітки + масштаб. Копіюєте і вставляєте їх у відповідне місце в скрипті.
Зверніть увагу, що спочатку вам потрібно визначитися з масштабом, а тільки потім копіювати координати мітки, тому що при зміні масштабу координати мітки змінюються.
2. Далі приступимо до налаштування виду мітки. Тут є кілька варіантів рішень.
Або ви замінюєте напис в скрипті і залишаєте все як є - в такому випадку стиль у вас буде як на першому зображенні.
Або ви можете зовсім прибрати напис і залишити стандартну мітку. Список всіх доступних міток ви можете знайти в офіційної документації Яндекс.Карт .
Для цього в скрипті вам необхідно:
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);
Тут twirl # skatingIcon - назва стилю мітки.
Або ви можете вставити свій логотип або потрібну картинку.
Для цього
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 ();
3. Розміри карти. Як говорилося раніше, за розмір карти відповідає стиль:
#map {width: 660px; height: 300px; }
Тут ви задаєте потрібний вам розмір в пікселях, або, якщо хочете зробити карту на всю ширину / висоту, вказуєте відсотки.
На цьому базову роботу з Яндекс.Картами я закінчую. Уроку цілком вистачить для того, щоб перетворити відповідний розділ за допомогою карти. Пізніше ми повернемося до цієї теми і розглянемо ще декілька можливостей Яндекс.Карт.
