Вбудовання інтерактивних карт у вашу тему WordPress
Розділ 42: Дізнавайтеся про карту разом з вашою темою WordPress
Ласкаво просимо назад, воїни коду! Як прогресує ваша подорож по клавіатурі? Ми сподіваємося, що, як смачна кава, наші уроки тримають вас оновленими й на підборідді.
У цьому розділі ми додамо деякі геопросторові м’язи до вашої теми WordPress, створивши інтерактивну карту. Так, ви все правильно чули! Коли закінчите читати цю статтю, ви станете неперевершеними у своїй грі з геолокаціями.
Чому додавати карту, ви запитуєте? Уявіть, що ваш веб-сайт — це піцерія (мм… піца). Ви хочете, щоб ваші голодні клієнти легко знаходили ваші місця, чи не так? Інтерактивна карта може допомогти з цим і навіть більше!
Давайте розблокуємо це досягнення!
1.
Зрозуміння того, що вам потрібно
Перш ніж випустити монстрів коду з шафи, давайте швидко оглянемо, що ми будемо використовувати: Google Maps API. Це та сама магія, яку використовує Google Maps. І ми позичимо трохи цього чарівництва — чесно й без підводних каменів.
Тож, що означає API? Це не “Інспектор піци”, хоча я би хотів. Замість цього це означає “Інтерфейс програмування додатків”. Це спосіб для нашої теми WordPress спілкуватися й використовувати корисні можливості, які пропонує Google Maps API.
2.
Піднімаємо руки до плуга (але не до клавіатури!)
На перший погляд це може здатися складним, особливо коли ви розумієте, що Google Maps API включає в себе деякі терміни на JavaScript. Але не лякайтеся! Ми підтримуємо вас.
Першим кроком є включення Google Maps API у вашу тему. Просто додайте це посилання у ваш заголовок:
php
<script src="https://maps.googleapis.com/maps/api/js?key=ВАШ_КЛЮЧ_API"></script>
Просто замініть “ВАШ_КЛЮЧ_API” на свій власний ключ від Google, і вуаля!
Розміщення вашої карти на темі
Після включення API настав час виставити нашу карту на сцену. Спочатку створимо контейнер, схожий на цей:
php
<div id="map" style="width: 400px; height: 300px;"></div>
Пам’ятайте, що це ідентифікатор ‘map’ — наш сигнальний вогонь. Ось де з’явиться карта.
Налаштування властивостей карти
Тут ми вирішуємо, якою буде наша карта. Все від початкового рівня масштабування, довготи, широти, аж до типу карти (будь то дорожня карта, супутникова, гібридна або теренна).
Усе це робиться за допомогою цього простого скрипту:
javascript
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151},
mapTypeId: 'roadmap'
});
}
І ось вона! Ваша власна, блискуча, інтерактивна карта готова допомогти вашим відвідувачам!
Але, псс! Це лише базове використання географічних функцій. Ви можете додати маркери, вікна з інформацією або красиві анімації. Просто дайте шанс документації Google Maps API, і ви знайдете скарбницю функцій, які чекають на вас!
Тож, воїни коду, підтягніть свої шкарпетки, розігніть кулаки й почніть відкривати карти. До наступного разу, коли “Інспектор піци” спробує стукати у двері вашого веб-сайту піцерії. Головне, пам’ятайте, що велика сила приносить велику відповідальність. Тож розумно використовуйте свої нові сили картографування!
