Инструкция по добавлению Яндекс.Карты на свой сайт

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

 

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

Первое, что необходимо сделать – это перед закрывающим тегом </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>"

Третье, добавляем стили

CSS

<style>
.ya_map {
	font-family: arial;
	font-size: 12px;
	color: #454545;}
#map {
	width: 100%;
	height: 500px;}
</style>

Четвертое, это добавляем скрипт карты

JS

<!--Скрипт ЯндексКарты-->
<script type="text/javascript">
ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
            center: [55.75399399999374,37.62209300000001],
            zoom: 9
        }, {
            searchControlProvider: 'yandex#search'
        }),

    // Создаем геообъект с типом геометрии "ZOTMOSCOW".
        myGeoObject_01 = new ymaps.GeoObject({
            // Описание геометрии.
            geometry: {
                type: "Point",
                coordinates: [55.767003, 37.602885]
            },
            // Свойства.
            properties: {
                // Контент метки.
                iconContent: 'ZOTMOSCOW',
                hintContent: 'ул. Тверская дом 20 строение 3 офис 2',
				balloonContent: "<div class='ya_map'>ZOTMOSCOW<br>ул. Тверская дом 20 строение 3 офис 2</div>" // Подсказка метки
            }
        }, {
            // Опции.
            // Иконка метки будет растягиваться под размер ее содержимого.
            preset: 'islands#redStretchyIcon',
            // Метку можно перемещать.
            //draggable: true
        });

    myMap.geoObjects
    .add(myGeoObject_01);
}

</script>
<!--КОНЕЦ Скрипт ЯндексКарты-->

Далее рассмотрим как нам располагать на карте точки и как с ней работать и настраивать.

 

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

Первое что сделаем, это определим центр карты у нас на сайте, правится все это в JS коде. Но перед этим переходим сюда и определяемся с координатами центра и с масштабом.

 JS

var myMap = new ymaps.Map("map", {
            center: [55.75399399999374,37.62209300000001],
            zoom: 9
        }, {
            searchControlProvider: 'yandex#search'
        }),

Далее создаем нашу метку. Определяемся с адресом и координатами на странице ЯндексКарты. И копируем координаты в нужную строку JS кода. В свойствах указываем нужные нам данные по описанию объекта. Выбираем тип метки на этой странице, и пишем этот тип так же в код.

Полный пример создание одной точки 

<!--Скрипт ЯндексКарты-->
<script type="text/javascript">
ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
            center: [55.75399399999374,37.62209300000001],
            zoom: 9
        }, {
            searchControlProvider: 'yandex#search'
        }),

    // Создаем геообъект с типом геометрии "ZOTMOSCOW".
        myGeoObject_01 = new ymaps.GeoObject({
            // Описание геометрии.
            geometry: {
                type: "Point",
                coordinates: [55.767003, 37.602885]
            },
            // Свойства.
            properties: {
                // Контент метки.
                iconContent: 'ZOTMOSCOW',
                hintContent: 'ул. Тверская дом 20 строение 3 офис 2',
		balloonContent: "<div class='ya_map'>ZOTMOSCOW<br>ул. Тверская дом 20 строение 3 офис 2</div>" // Подсказка метки
            }
        }, {
            // Опции.
            // Иконка метки будет растягиваться под размер ее содержимого.
            preset: 'islands#redStretchyIcon',
            // Метку можно перемещать.
            //draggable: true
        });

    myMap.geoObjects
        .add(myGeoObject_01);
}

</script>
<!--КОНЕЦ Скрипт ЯндексКарты-->

Так же про добавление метки на карту можно почитать документацию по API ЯндексКарты. 

Приведем ниже пример с тремя точками на карте, в этом случае, когда точек много лучше подключить отдельный JS файл к сайту с этими точками.

placemark.js

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
            center: [55.75399399999374,37.62209300000001],
            zoom: 12
        }, {
            searchControlProvider: 'yandex#search'
        }),

    // Создаем геообъект с типом геометрии "ZOTMOSCOW".
        myGeoObject_01 = new ymaps.GeoObject({
            // Описание геометрии.
            geometry: {
                type: "Point",
                coordinates: [55.767003, 37.602885]
            },
            // Свойства.
            properties: {
                // Контент метки.
                iconContent: 'ZOTMOSCOW',
                hintContent: 'ул. Тверская дом 20 строение 3 офис 2',
				balloonContent: "<div class='ya_map'>ZOTMOSCOW<br>ул. Тверская дом 20 строение 3 офис 2</div>" // Подсказка метки
            }
        }, {
            // Опции.
            // Иконка метки будет растягиваться под размер ее содержимого.
            preset: 'islands#redStretchyIcon',
            // Метку можно перемещать.
            //draggable: true
        }),
	
	// Создаем геообъект с типом геометрии "Скупка «Златия»".
        myGeoObject_02 = new ymaps.GeoObject({
            // Описание геометрии.
            geometry: {
                type: "Point",
                coordinates: [55.730902, 37.641548]
            },
            // Свойства.
            properties: {
                // Контент метки.
                iconContent: 'Скупка «Златия»',
                hintContent: 'Кожевническая улица, 1 строение 1, Москва',
				balloonContent: "<div class='ya_map'>Скупка «Златия»<br>Кожевническая улица, 1 строение 1, Москва</div>" // Подсказка метки
            }
        }, {
            // Опции.
            // Иконка метки будет растягиваться под размер ее содержимого.
            preset: 'islands#redStretchyIcon',
            // Метку можно перемещать.
            //draggable: true
        }),
	
	// Создаем геообъект с типом геометрии "Скупка «Аурум24»".
        myGeoObject_03 = new ymaps.GeoObject({
            // Описание геометрии.
            geometry: {
                type: "Point",
                coordinates: [55.741434, 37.657314]
            },
            // Свойства.
            properties: {
                // Контент метки.
                iconContent: 'Скупка «Аурум24»',
                hintContent: 'Кожевническая улица, 1 строение 1, Москва',
				balloonContent: "<div class='ya_map'>Скупка «Аурум24»<br>Ул. Таганская 1/2, стр. 2, офис 16 - Метро Таганская и Марксистская</div>" // Подсказка метки
            }
        }, {
            // Опции.
            // Иконка метки будет растягиваться под размер ее содержимого.
            preset: 'islands#redStretchyIcon',
            // Метку можно перемещать.
            //draggable: true
        });

    myMap.geoObjects
        .add(myGeoObject_01)
	.add(myGeoObject_02)
	.add(myGeoObject_03);
}

 

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

Редактирование и добавление точек ЯндексКарт через админку WordPress

Вначале мы подключим API как описано выше.

Затем мы создадим в нашей теме шаблон для страницы с картой, например "Шаблон страницы «Страница с картой» (map_page.php)". Далее создадим страницу, которая будет использовать этот шаблон с внутренним содержанием "<div id="map"></div>".

После мы воспользуемся пользовательскими полями в WordPress, создаем группу полей с повторителем для добавления точек. И прицепим эту группу к шаблону который мы создали для страницы с картой. Заполняем на странице с картой повторитель, добавляем все наши точки.

Далее в шаблоне map_page.php мы вставляем код JS, который будет работает с API ЯндексКарт, и там где нужно, мы с помощью PHP будем добавлять в цикле значения наших пользовательских полей.

Вот и весь принцип редактирования и добавления точек ЯндексКарт через админку на WordPress, ниже для примера я приведу два кода JS, первый это JS при ручном вводе точек, второй при помощи PHP.

JS ручной ввод точек

<script type="text/javascript">
ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
            center: [55.75399399999374,37.62209300000001],
            zoom: 12
        }, {
            searchControlProvider: 'yandex#search'
        }),

    // Создаем геообъект с типом геометрии ZOTMOSCOW.
        myGeoObject_01 = new ymaps.GeoObject({
            // Описание геометрии.
            geometry: {
                type: "Point",
                coordinates: [55.767003, 37.602885]
            },
            // Свойства.
            properties: {
                // Контент метки.
                iconContent: 'ZOTMOSCOW',
                hintContent: 'ул. Тверская дом 20 строение 3 офис 2',
				balloonContent: "<div class='ya_map'>ZOTMOSCOW<br>ул. Тверская дом 20 строение 3 офис 2</div>" // Подсказка метки
            }
        }, {
            // Опции.
            // Иконка метки будет растягиваться под размер ее содержимого.
            preset: 'islands#redStretchyIcon',
            // Метку можно перемещать.
            //draggable: true
        }),
	
	// Создаем геообъект с типом геометрии Скупка Златия.
        myGeoObject_02 = new ymaps.GeoObject({
            // Описание геометрии.
            geometry: {
                type: "Point",
                coordinates: [55.730902, 37.641548]
            },
            // Свойства.
            properties: {
                // Контент метки.
                iconContent: 'Скупка Златия',
                hintContent: 'Кожевническая улица, 1 строение 1, Москва',
				balloonContent: "<div class='ya_map'>Скупка Златия<br>Кожевническая улица, 1 строение 1, Москва</div>" // Подсказка метки
            }
        }, {
            // Опции.
            // Иконка метки будет растягиваться под размер ее содержимого.
            preset: 'islands#redStretchyIcon',
            // Метку можно перемещать.
            //draggable: true
        }),
	
	// Создаем геообъект с типом геометрии "Скупка Аурум24".
        myGeoObject_03 = new ymaps.GeoObject({
            // Описание геометрии.
            geometry: {
                type: "Point",
                coordinates: [55.741434, 37.657314]
            },
            // Свойства.
            properties: {
                // Контент метки.
                iconContent: 'Скупка Аурум24',
                hintContent: 'Кожевническая улица, 1 строение 1, Москва',
				balloonContent: "<div class='ya_map'>Скупка Аурум24<br>Ул. Таганская 1/2, стр. 2, офис 16 - Метро Таганская и Марксистская</div>" // Подсказка метки
            }
        }, {
            // Опции.
            // Иконка метки будет растягиваться под размер ее содержимого.
            preset: 'islands#redStretchyIcon',
            // Метку можно перемещать.
            //draggable: true
        });

    myMap.geoObjects
        .add(myGeoObject_01)
	.add(myGeoObject_02)
	.add(myGeoObject_03);
}

</script>

JS PHP при помощи пользовательских полей WordPress

<script>
	ymaps.ready(init);
	function init() {
		var myMap = new ymaps.Map("map", {
				center: [55.75399399999374,37.62209300000001],
				zoom: 12
			}, {
				searchControlProvider: 'yandex#search'
			}),

	//Создаем геообъекты
	<?php
	$points_map = get_field('points_map');
	foreach($points_map as &$item) {
	?>
		<?=$item['name_geoobject'];?> = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: [<?=$item['coordinates'];?>]
            },
            properties: {
                iconContent: '<?=$item['icon_сontent'];?>',
                hintContent: '<?=$item['hint_сontent'];?>',
		balloonContent: "<?=$item['balloon_сontent'];?>"
            }
        	}, {
            	preset: 'islands#redStretchyIcon',
        	}),
	<?php
	}
	?>
			
		myGeoObject_last = new ymaps.GeoObject({
			geometry: {
				type: "Point",
				coordinates: [0, 0]
			},
			properties: {
			}
			}, {
				preset: 'islands#redStretchyIcon',
			});
	
	//Инициализируем геообъекты
	myMap.geoObjects
	<?php
	$points_map = get_field('points_map');
	foreach($points_map as &$item) {
	?>
	.add(<?=$item['name_geoobject'];?>)	
	<?php
	}
	?>
	.add(myGeoObject_last);	
	}
</script>

 

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

www.vk.com/udnlx www.ok.ru/udnlx

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

Udnlx@yandex.ru

С моим резюме можно ознакомиться по ссылке:

https://penza.hh.ru

© 2020-2024 Портфолио Юдина Александра г.Пенза. Все права защищены