Как изменить точку на карте яндекс на сайте

Сборник примеров установки меток на карту по координатам и адресу, изменение их вида и вывод балунов.

Подробнее по JS API 2.1 можно посмотреть на Яндексе:

• Документация API карт
• Стили меток
• Примеры в песочнице

В начале подключение скрипта и инициализация:

<div id="map" style="width: 100%; height: 400px;"></div>	

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);		
function init() {
	var myMap = new ymaps.Map("map", {
		center: [55.76, 37.64],
		zoom: 10
	}, {
		searchControlProvider: 'yandex#search'
	});

	// Вывод меток...
}
</script>

var myPlacemark = new ymaps.Placemark([55.85,37.45], null, {
	preset: 'islands#blueDotIcon'
});
myMap.geoObjects.add(myPlacemark);

ymaps.geocode("г.Москва, Химкинский бульвар, д.5").then(function (res) {
	var coord = res.geoObjects.get(0).geometry.getCoordinates();
	var myPlacemark = new ymaps.Placemark(coord, null, {
		preset: 'islands#blueDotIcon'
	});
	myMap.geoObjects.add(myPlacemark);
});

var myPlacemark = new ymaps.Placemark([55.86,37.59], null, {
	preset: 'islands#greenCircleDotIcon'
});
myMap.geoObjects.add(myPlacemark);

ymaps.geocode("г.Москва, Каргопольская, д.18").then(function (res) {
	var coord = res.geoObjects.get(0).geometry.getCoordinates();
	var myPlacemark = new ymaps.Placemark(coord, null, {
		preset: 'islands#greenCircleDotIcon'
	});
	myMap.geoObjects.add(myPlacemark);
});

var myPlacemark = new ymaps.Placemark([55.85,37.7], {
	iconContent: '1'
}, {
	preset: 'islands#redIcon'
});
myMap.geoObjects.add(myPlacemark); 

ymaps.geocode("г.Москва, Большой Лосиноостровский пруд").then(function (res) {
	var coord = res.geoObjects.get(0).geometry.getCoordinates();
	var myPlacemark = new ymaps.Placemark(coord, {
		iconContent: '1'
	}, {
		preset: 'islands#redIcon'
	});
	myMap.geoObjects.add(myPlacemark);    
});	

var myPlacemark = new ymaps.Placemark([55.75,37.45], {
	iconContent: 'текст'
}, {
	preset: 'islands#darkOrangeStretchyIcon'
});
myMap.geoObjects.add(myPlacemark);   

ymaps.geocode("г.Москва, Нижние Мневники").then(function (res) {
	var coord = res.geoObjects.get(0).geometry.getCoordinates();
	var myPlacemark = new ymaps.Placemark(coord, {
		iconContent: 'текст'
	}, {
		preset: 'islands#darkOrangeStretchyIcon'
	});
	myMap.geoObjects.add(myPlacemark);    	
});

var myPlacemark = new ymaps.Placemark([55.75,37.59], {
	iconCaption: 'подсказка'
}, {
	preset: 'islands#pinkDotIcon'
});
myMap.geoObjects.add(myPlacemark); 

ymaps.geocode("г.Москва, Большой Николаевский пер.").then(function (res) {
	var coord = res.geoObjects.get(0).geometry.getCoordinates();
	var myPlacemark = new ymaps.Placemark(coord, {
		iconCaption: 'подсказка'
	}, {
		preset: 'islands#pinkDotIcon'
	});
	myMap.geoObjects.add(myPlacemark); 
});	

var myPlacemark = new ymaps.Placemark([55.75,37.75], null,{
	iconLayout: 'default#image',
	iconImageHref: "/map.png",
	iconImageSize: [30, 44],
	iconImageOffset: [-15, -44]
});
myMap.geoObjects.add(myPlacemark);

ymaps.geocode("г.Москва, ш.Энтузиастов").then(function (res) {
	var coord = res.geoObjects.get(0).geometry.getCoordinates();
	var myPlacemark = new ymaps.Placemark(coord, null,{
		iconLayout: 'default#image',
		iconImageHref: "/map.png",
		iconImageSize: [30, 44],
		iconImageOffset: [-15, -44]
	});
	myMap.geoObjects.add(myPlacemark);
});	

var myPlacemark = new ymaps.Placemark([55.65,37.5], {
	balloonContentHeader: "Заголовок",
	balloonContentBody: "Содержимое",
	balloonContentFooter: "Подвал",
	hintContent: "Подсказка"
}, {
	preset: 'islands#yellowDotIcon'
});
myMap.geoObjects.add(myPlacemark);

ymaps.geocode("г.Москва, ул.Миклухо-Маклая").then(function (res) {
	var coord = res.geoObjects.get(0).geometry.getCoordinates();
	var myPlacemark = new ymaps.Placemark(coord, {
		balloonContentHeader: "Заголовок",
		balloonContentBody: "Содержимое",
		balloonContentFooter: "Подвал",
		hintContent: "Подсказка"
	}, {
		preset: 'islands#yellowDotIcon'
	});
	myMap.geoObjects.add(myPlacemark);
});	

myMap.balloon.open([55.65,37.7], "Содержимое балуна", {
	closeButton: false
});

ymaps.geocode("г.Москва, ул.Шоссейная, д.5").then(function (res) {
	var coord = res.geoObjects.get(0).geometry.getCoordinates();
	myMap.balloon.open(coord, "Содержимое балуна", {
		closeButton: false
	});
});	

<div id="map" style="width: 100%; height: 400px;"></div>

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);        
function init() {
	var myMap = new ymaps.Map("map", {
		center: [55.76, 37.64],
		zoom: 10
	}, {
		searchControlProvider: 'yandex#search'
	});

	ymaps.geocode("г. Истра, ул. 2-ая Первомайская").then(function (res) {
		var coord = res.geoObjects.get(0).geometry.getCoordinates();
		var myPlacemark = new ymaps.Placemark(coord, {
			balloonContentHeader: 'ООО "Рога и копыта"',
			balloonContentBody: "г. Истра, ул. 2-ая Первомайская",
			balloonContentFooter: "+7 (495) 777-77-77"
		},{
			iconLayout: 'default#image',
			iconImageHref: "/map.png",
			iconImageSize: [30, 44],
			iconImageOffset: [-15, -44]
		});
		myMap.geoObjects.add(myPlacemark);
		myMap.setCenter(coord, 13);
	});
}
</script>

<div id="map" style="width: 100%; height: 400px;"></div>	

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);		
function init() {
	var myMap = new ymaps.Map("map", {
		center: [55.76, 37.64],
		zoom: 10
	}, {
		searchControlProvider: 'yandex#search'
	});
	
	// 1. Метка с точкой.
	var myPlacemark = new ymaps.Placemark([55.85,37.45], null, {
		preset: 'islands#blueDotIcon'
	});
	myMap.geoObjects.add(myPlacemark);
	
	// 2. Круглая метка с точкой.
	var myPlacemark = new ymaps.Placemark([55.86,37.59], null, {
		preset: 'islands#greenCircleDotIcon'
	});
	myMap.geoObjects.add(myPlacemark);
	
	// 3. Метка с нумерацией.
	var myPlacemark = new ymaps.Placemark([55.85,37.7], {
		iconContent: '1'
	}, {
		preset: 'islands#redIcon'
	});
	myMap.geoObjects.add(myPlacemark);    
		
	// 4. Метка с текстом.
	var myPlacemark = new ymaps.Placemark([55.75,37.45], {
		iconContent: 'текст'
	}, {
		preset: 'islands#darkOrangeStretchyIcon'
	});
	myMap.geoObjects.add(myPlacemark);    	
	
	
	// 5. Метка с подсказкой.
	var myPlacemark = new ymaps.Placemark([55.75,37.59], {
		iconCaption: 'подсказка'
	}, {
		preset: 'islands#pinkDotIcon'
	});
	myMap.geoObjects.add(myPlacemark); 
		
	// 6. Метка со своей картинкой.
	var myPlacemark = new ymaps.Placemark([55.75,37.75], null,{
		iconLayout: 'default#image',
		iconImageHref: "/map.png",
		iconImageSize: [30, 44],
		iconImageOffset: [-15, -44]
	});
	myMap.geoObjects.add(myPlacemark);
		
	// 7. Балун.
	var myPlacemark = new ymaps.Placemark([55.65,37.5], {
		balloonContentHeader: "Заголовок",
		balloonContentBody: "Содержимое",
		balloonContentFooter: "Подвал",
		hintContent: "Подсказка"
	}, {
		preset: 'islands#yellowDotIcon'
	});
	myMap.geoObjects.add(myPlacemark);
		
	// 8. Балун без метки.
	myMap.balloon.open([55.65,37.7], "Содержимое балуна", {
		closeButton: false
	});
}
</script>

Помогла ли Вам статья?

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

На сайт можно вставить карту Google, Яндекс или 2ГИС с нужной меткой, чтобы пользователи могли сразу понять, куда им предстоит ехать. И дольше оставались на сайте, рассматривая карту и увеличивая время визита, что важно для поведенческих факторов и SEO. 😉

Выбрать можно любую карту, какая вам больше нравится.

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

Первый вариант: встроить Карту с уже существующей меткой

Откройте Яндекс.Карты, найдите компанию и скопируйте код для вставки:

Карта с меткой и информацией из Яндекс.Карт будет выглядеть так:

Пошагово:

1. Найдите нужный адрес.

2. В правом верхнем углу нажмите на кнопку с тремя точками, выберите Поделиться.

3. Выберите виджет с картой и скопируйте код для вставки. Можете сначала включить предпросмотр, чтобы увидеть, как она будет выглядеть.

Второй вариант: создать свою метку

Создайте карту в Конструкторе:

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

Создание карты пошагово:

1. Найдите адрес, выберите цвет и вид маркера.

2. Сохраните метку и добавьте еще адреса, если вы хотите отметить несколько филиалов.

3. При желании добавьте линии и нарисуйте фигуры, чтобы сделать маршрут понятнее. Линии можно изменять по изгибам улиц.

4. Сохраните карту. В следующем окне выберите ее вид: интерактивная или статическая.

   1. Интерактивная полезнее, ее можно двигать и масштабировать. Для вставки на сайт советуем ее.

   2. Статическая будет выглядеть как картинка, ее можно распечатывать.

5. Задайте размер карты: можно ввести пиксели в окошке размера или растянуть карту вручную.

6. Если выбрать «Растянуть по ширине», у карты появится параметр width = 100%, то есть потом при вставке карты на сайт она займет всю ширину блока.

7. Скопируйте код для вставки на сайт: можно выбрать JavaScript или iframe.

   1. У кода iframe есть ограничения: пользователь не сможет переключать виды карты, то есть доступен только вид Схема, и она будет отображаться только на крупных масштабах.

   2. Код JavaScript можно модифицировать с помощью API: добавить панораму, маршруты, поиск. Чтобы они появились, нужно получить API-ключ в Кабинете разработчика для продукта «JavaScript API и HTTP Геокодер» и добавить его в код.

8. Если вам нужно поменять язык топонимов, измените параметр lang в скопированном коде. Сейчас там lang=ru_RU, но можно поставить другой язык с помощью кода языка в формате ISO 639-1 и кода региона в формате ISO 3166-1: uk_UA — украинский для Украины, tr_TR — турецкий для Турции. Для пользователей из России и Украины регион и язык подстроится под настройки паспорта пользователя.

9. Вставьте код с картой Яндекса на сайт через редактор страницы.

Интересное для работы с Яндексом:
Как попасть в колдунщики

Как вставить Google карту на сайт

Первый вариант: вставить карту из Google Maps с существующей меткой

Откройте Google Maps, найдите компанию и скопируйте код для вставки:

Карта будет выглядеть так:

1. Найдите компанию на картах, нажмите на «Поделиться».

2. Нажмите «Встраивание карт» и выберите размер из предложенных или выберите «Другой размер» и укажите свои параметры.

3. Скопируйте получившийся HTML-код и вставьте его в код своего сайта в то место, где вы хотите разместить карту.

Второй вариант: создать свою метку в Google Maps

Создайте метку в Google Картах:

Так выглядит созданная нами метка в режиме предпросмотра: на ней есть описание, которое мы ввели, фотография и информация из Google Maps.

Пошаговое создание метки на Google картах:

1. Введите адрес или название компании.

2. Укажите название, добавьте описание организации, фотографии, выберите цвет и стиль значка.

3. Созданную карту вы можете посмотреть в Предпросмотре. Нажмите кнопку с тремя вертикальными точками и выберите «Добавить на сайт».

4. Скопируйте полученный код и вставьте его в код страницы, куда вы хотите добавить карту.

Как вставить карту 2ГИС на сайт

Встроить карту через API

Установить интерактивную карту 2ГИС можно через JS API — это версия API для простых задач.

Пошаговый процесс:

1. Перейдите на страницу и выберите город.

2. Найдите компанию по названию.

3. Установите нужный размер карты в правом нижнем углу.

4. Нажмите «Далее», прочитайте Лицензионное соглашение и примите условия.

5. Нажмите «Получить код» и скопируйте его для вставки на сайт.

Это простая карта с готовой меткой, но можно сделать свою через Кjнструктор. Выручит, если вашей компании нет в 2ГИС.

Создать в Конструкторе карту со своими метками

В 2ГИС есть бесплатный Конструктор карт, с его помощью можно создать карту со своей разметкой — добавить метки, описания, отобразить маршруты, графически выделить области.

Пошагово как сделать карту в Конструкторе 2ГИС:

1. Введите адрес и найдите нужное здание.

2. Настройте цвет метки, введите название.

3. Добавьте описание, можно вставить картинку с помощью разметки HTML или Markdown.

4. С помощью линий и выделения областей помогите клиентам сориентироваться по маршруту.

5. Выберите нужный размер карты.

6. Скопируйте код для вставки на сайт или в мобильное приложение.

Как настроить отложенную загрузку карты на сайте

Карты громоздкие, они влияют на загрузку сайта и могут тормозить отображение страницы. 

Проверить скорость загрузки конкретной страницы можно в этом инструменте. Он бесплатно измеряет скорость загрузки в соответствии с показателем Google Core Web Vitals, оценивает разные этапы загрузки и дает рекомендации:

Минимизировать влияние карты на скорость загрузки страницы поможет отложенная или Lazy-load загрузка.

Загрузка карты по доскроллу до нее

Если карта находится внизу страницы далеко в футере или в поп-апе, можно настроить, чтобы она загружалась не сразу при переходе на страницу, а только когда пользователь до нее доскроллит.

Пользователь Хабра iefedorov для этого советует изменить код карты, который Google предлагает вставить на сайт.

Пример исходного кода:

<iframe src="https://www.google.com/maps/embed?pb=!1m14..." width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

Его нужно изменить вот так:

<iframe data-aload data-original="https://www.google.com/maps/embed?pb=!1m14..." width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

Браузер будет получать src = «», когда читателю понадобится карта.

Пошаговая настройка lazy-loading карты от Максима Васяновича (MaxGraph):

Загрузка карты после наведения курсора

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

При создании карты в конструкторе Яндекса с использованием API-ключа получился примерно такой код:

<script type="text/javascript" charset="utf-8" async="" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A1ad4887964fc2e0a6f07c6246ffe638b138f8baacc8983f9a6a0f401a02e833a&width=1280&height=400&lang=ru_RU&scroll=true"></script>

На сайте нужно написать контейнер для блока с картой:

<div id="map_container" class="map container-fluid">
<script id="ymap_lazy" async="" data-src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A1ad4887964fc2e0a6f07c6246ffe638b138f8baacc8983f9a6a0f401a02e833a&width=1280&height=400&lang=ru_RU&scroll=true"></script>
</div>

Также нужны стили для статичной картинки, подойдет скриншот.

<style>
    .map.container-fluid {
        height: 340px;
        padding: 0;
        background-image: url(/uploads/common/ymap0.png);
        background-position: center center;
    }
</style>

Нужен JavaScript-код, который будет отслеживать события — наведение курсора мыши на карту или тап по карте на экране смартфона — и подменять статичное изображение на интерактивную карту:

<script>
    let map_container = document.getElementById('map_container');
    let options_map = {
        once: true,//запуск один раз, и удаление наблюдателя сразу
        passive: true,
        capture: true
    };
    map_container.addEventListener('click', start_lazy_map, options_map);
    map_container.addEventListener('mouseover', start_lazy_map, options_map);
    map_container.addEventListener('touchstart', start_lazy_map, options_map);
    map_container.addEventListener('touchmove', start_lazy_map, options_map);

    let map_loaded = false;
    function start_lazy_map() {
        if (!map_loaded) {
            let map_block = document.getElementById('ymap_lazy');
            map_loaded = true;
            map_block.setAttribute('src', map_block.getAttribute('data-src'));
            map_block.removeAttribute('data_src');
            console.log('YMAP LOADED');
        }
    }
</script>

Готово, теперь карта должна загружаться по наведении курсора или тапа на экран, если пользователь смотрит сайт с мобильного.

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

Проверить сайт в Анализе

Расскажите в комментариях, как вы сделали карту для вашего сайта и как оптимизируете ее, чтобы она не сильно тормозила загрузку?

Конструктор карт Яндекс Карты — это бесплатный визуальный редактор, в котором вы можете самостоятельно сделать интерактивную карту. Он помогает создавать мультимедийные элементы для ваших лонгридов и спецпроектов: например, показать перемещения героя материала, закрытые больницы или замороженные стройки в вашем городе, территорию реконструируемого парка, маршрут марафона. Сфера применения интерактивных карт ограничена только вашей фантазией.

В отличие от других сервисов с использованием API Яндекс. Карт (интерфейса программирования — прим.ред.), в Конструкторе нет страшных слов вроде JavaScript или MapKit: весь процесс кодинга надежно спрятан от глаз пользователя. Всё, что требуется — нажимать на симпатичные кнопки с понятными названиями «Готово», «Удалить».

С чего начать

Чтобы создать интерактивную карту, нужно зайти на сайт сервиса и кликнуть на надпись «Создать карту»:

Карта создана, теперь нужно нанести на нее объекты. В сервисе их три вида: метка, линия и многоугольник. Рассмотрим каждый из них подробнее.

Как добавить метку на карту

Метка — это точка с месторасположением, которая указывает на определенный город, район или дом или другой объект. Чтобы добавить метку, вводим в поисковую строку адрес — например, город, который вас интересует, точный адрес объекта или его координаты. Затем нажимаем «Enter» на клавиатуре или кликаем на кнопку «Найти». Конструктор автоматически добавит метку с месторасположением в список объектов.

В появившемся окне можно персонализировать метку: изменить ее тип и цвет, дать ей название. После этого нажимаем «Готово» — на карте появится наша метка:

Щелкнув на метку еще раз, можно снова вернуться в контекстное меню и изменить параметры точки. Также можно перетаскивать объект в любую сторону с помощью мыши.

Как построить маршрут

Для построения траектории будем использовать инструмент «Линии». Сначала необходимо создать, как минимум, еще одну метку. Например, мы можем построить маршрут между Москвой и деревней Петушки. Для этого повторяем для нового объекта первый шаг: вводим название деревни — «Петушки» — и добавляем ее в список. Также можно просто кликнуть в нужное место на карте.

Теперь кликаем на инструмент «Линии». Чтобы ускорить процесс, воспользуемся комбинацией клавиш Alt+L:

Нам нужно провести маршрут из одной точки в другую. Для этого нажимаем на одну из меток. Появится пунктирная линия:

Теперь кликаем по второй метке — линия станет сплошной. Кликаем по появившемуся узлу на конце линии, затем на кнопку «Завершить»:

Заполняем описание в появившемся окне и изменяем толщину линии, ее цвет и прозрачность, если нужно. Нажимаем «Готово».

Как добавить на карту водоем, дом или другой объект

Третий вид объектов, которые можно наносить на интерактивную карту, — многоугольники. С их помощью можно обозначать какие-либо зоны, рисовать на карте пруды и озера, дома, коттеджи и прочие объекты.

Нажимаем на кнопку «Многоугольники». С помощью кликов наносим на карту несколько точек. Затем нажимаем на одну из точек и кликаем по кнопке «Завершить» — мы уже выполняли похожее действие для построения маршрута.

Например, так на карте будет выглядеть водоем в деревне Петушки:

Можно менять цвет и прозрачность фигуры, изменять ее форму и перемещать ее в любую сторону с помощью мыши. В Конструкторе есть ограничения для многоугольников: нельзя задавать более 1000 вершин (узлов) для одного объекта.

Как опубликовать карту

Встроить карту на сайт можно с помощью кода iframe. Закончив редактирование карты, нужно дать ей название. Впрочем, дать ей имя можно на любом этапе до публикации.

Затем нажимаем «Сохранить и продолжить». В появившемся окне нужно выбрать область отображения карты — та часть, которая будет отображаться на сайте. Обратите внимание на то, чтобы в нее поместились все необходимые элементы. Чтобы увеличить или уменьшить область отображения, перемещайте мышкой узлы (маленькие белые квадраты).

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

Нажимаем «Получить код карты» и выбираем «iframe» в появившемся окне:

Последний шаг! Копируем код и вставляем его на сайт. Если в дальнейшем нужно что-то изменить, не обязательно делать новую карту, просто вносите необходимые изменения в первоначальную карту и встроенная на сайт карта будет обновляться автоматически.

Думаю, что на всех сайтах, ведущих коммерческую деятельность, существует раздел контактной информации или информации о компании. Без наличия карты, помогающей сориентироваться вашим клиентам, сайт сильно проигрывает в удобстве для пользователя.

Сервисов, бесплатно предоставляющих карты, множество, но я бы хотел остановиться сегодня на Яндекс.Картах. Не буду рассматривать вариант создания карт через простой конструктор, а поскольку мы с вами в какой то степени вебмастера, расскажу, как внедрить карту от Яндекс.Карт с помощью API.

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

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

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

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

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

Здесь вы задаете нужный вам размер в пикселях, либо, если хотите сделать карту на всю ширину/высоту, указываете проценты.

На этом базовую работу с Яндекс.Картами я заканчиваю. Урока вполне хватит для того, чтобы преобразить соответствующий раздел с помощью карты. Позднее мы вернемся к этой теме и рассмотрим еще несколько возможностей Яндекс.Карт.