Сервисов, бесплатно предоставляющих карты, множество, но в этой шпаргалке мы поговорим о подключении Яндекс.Карт. Расскажу, как внедрить карту от Яндекс.Карт с помощью API.
Первое, что необходимо сделать – это перед закрывающим тегом </head> вашего сайта подключить сам API Яндекс.Карт с помощью кода "<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&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);
}
Вначале мы подключим 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>