Інтеграція користувацьких карт в WordPress за допомогою JS і CSS

Інтерактивні карти є незамінний інструмент для вебсайтів. Вони пропонуючи користувачам візуальний та інтуїтивно зрозумілий спосіб зорієнтуватись на місцевості, знайти потрібний офіс, майстерню, медичний центр, заклад.

У WordPress інтеграція користувацьких карт покращує контактні сторінки, сторінки з описами зони роботи бізнесу або місця проведення подій.

Ця стаття проведе вас через процес вбудовування користувацьких, інтерактивних карт у ваш сайт WordPress за допомогою JavaScript (JS) та каскадних таблиць стилів (CSS), зосереджуючись на Google Maps та Leaflet як прикладах.

Чому користувацькі карти потрібні на сайті?

Користувацькі карти дозволяють індивідуально представляти географічні дані, відповідаючи потребам дизайну та функціональності вашого вебсайту. За допомогою інтерактивних карт можна збільшувати масштаб, переміщатися та додавати маркери або маршрути, пропонуючи динамічний спосіб відображення інформації, заснованої на місцезнаходженні.

Також читайте: HTML теги, довідник та приклади використання

Інтеграція Google Maps

Google Maps є одним з найпопулярніших сервісів для вбудовування інтерактивних карт завдяки своїм всебічним даним та можливостям налаштування.

Початок роботи з Google Maps

• API ключ: спочатку отримайте API ключ Google Maps, відвідавши консоль Google Cloud Platform. Цей ключ дозволяє вам використовувати сервіси Google Maps на вашому вебсайті.

• Вбудування карти: вставте наступний HTML там, де ви хочете, щоб карта з'явилася, зазвичай на контактній або локаційній сторінці.

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

• Ініціалізація карти: додайте JS скрипт для ініціалізації карти з вашими бажаними координатами та опціями.

<script>
  function initMap() {
    var location = {lat: -34.397, lng: 150.644};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: location
    });
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
  }
</script>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Замініть YOUR_API_KEY на ваш справжній API ключ Google Maps.

Налаштування вашої карти

Використовуйте JavaScript API Google Maps для налаштування вигляду вашої карти, додавання маркерів або малювання маршрутів. CSS може бути використаний для стилізації контейнера карти для адаптивного дизайну, забезпечуючи її чудовий вигляд на всіх пристроях.

Інтеграція Leaflet

Leaflet є відкритим джерелом JavaScript бібліотекою для мобільно-дружніх інтерактивних карт. Вона легка і має широкий спектр плагінів.

Початок роботи з Leaflet

• Посилання на Leaflet: додайте CSS і JS Leaflet до заголовка або нижнього колонтитула вашої WordPress теми.

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

• Вбудування карти:

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

• Ініціалізація карти:

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();

Налаштування вашої карти з Leaflet

Leaflet дозволяє широко налаштовувати за допомогою плагінів для функціональностей, як-от кластеризація маркерів, теплові карти або навіть додавання geoJSON даних для складних географічних візуалізацій. CSS може бути використаний для стилізації розмірів карти та забезпечення її акуратного вписування в макет вашого сайту.

Стилізація та адаптивність

Щоб забезпечити реактивність вашої карти та впевнитись, що вона добре виглядає на всіх пристроях, використовуйте CSS. Ви можете додати медіа-запити для коригування розміру карти на різних розмірах екрану або забезпечити її завжди центроване розташування у контейнері.

#map {
    height: 400px;
    width: 100%;
}

@media (max-width: 600px) {
    #map {
        height: 200px;
    }
}

Висновок

Інтеграція користувацьких карт у ваш сайт WordPress може значно покращити користувацький досвід, надаючи інтерактивні та візуально привабливу інформацію про локації бізнесу. Виберете ви Google Maps за його надійність та функціональність, або Leaflet за його гнучкість та відкритий код? Обидва варіанти можуть бути широко налаштовані з JS і CSS, щоб відповідати потребам вашого сайту. Пам'ятайте про акцент на адаптивному дизайні, щоб переконатися, що ваші карти чудово виглядають на будь-якому пристрої.

Зручний хостинг для ваших сайтів на WordPress

Шукаєте хороший хостинг для ваших сайтів на WordPress? Зверніть увагу на Host4Biz. Це надійний хостинг з сучасними серверами в Європі та українською командою.

А за промокодом MYHOST10 ви отримаєте знижку в 10% на першу оплату. Для цього реєструйтесь за посиланням та введіть код перед оплатою.