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

Итак, первое, что вам необходимо сделать – это перед закрывающим тегом `head` вашего сайта подключить сам API Яндекс.Карт:

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=API_KEY" type="text/javascript"></script>

Обратите внимание, что API_KEY в ссылке нужно заменить на свой, иначе карта будет серая (правила Яндекса).

В нужное место на вашем сайте вставьте код, где будет отображаться карта:

<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>

С ним-то мы и будем сейчас работать. Из всего этого кода нам нужно изменить пару строк, которые прокомментированы.

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

Для настройки скрипта нам нужны координаты метки + масштаб. Копируете и вставляете их в соответствующее место в скрипте. Обратите внимание, что сначала вам нужно определиться с масштабом, а только потом копировать координаты метки, потому что при изменении масштаба координаты метки меняются.

Далее приступим к настройке вида метки. Здесь есть несколько вариантов решений. Либо вы заменяете надпись в скрипте и оставляете все как есть – в таком случае стиль у вас будет как на первом изображении. Либо вы можете вовсе убрать надпись и оставить стандартную метку. Список всех доступных меток вы можете найти в официальной документации Яндекс.Карт.

Для этого в скрипте вам необходимо:

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