Як вставити фрагмент картки Google Maps у WordPress без використання плагінів

Дуже часто у записах блогу виникає потреба вставити шматочок карткищоб наочно продемонструвати, про яке місце йде мова. Можна зробити знімок екрана з карткою та вставити його в запис зображенням. Але є більш витончений спосіб з використанням Google Maps разом з кнопками масштабу та скролінгом.

І для цього нам не потрібно встановлювати та налаштовувати додаткові WordPress-плагіни.

Приклад фрагмента Google Maps

Ось про що йдеться. Припустимо, у своєму записі я хочу показати шматок карти Києва та вказати на площу Льва Толстого. Розмір карти я спеціально поставлю по ширині всієї колонки. Виглядати це буде ось так:

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

Як це зробити

Це дуже просто. Все, що нам для цього потрібно - це maps.google.com.

Насамперед відкрийте карти Google за посиланням, зазначеним вище, і знайдіть місце, що вас цікавить, використовуючи навігацію мишкою.

Якщо ви бажаєте показати на своєму сайті фрагмент картки без маркера - одразу переходьте до наступному пункту. Якщо потрібна картка з маркером конкретної адреси – читаємо далі.

У рядку пошуку введіть адресу, яку хочете показати. Як тільки введена адреса буде оброблена - одразу з'явиться маркер на потрібній позиції.

Переконайтеся, що маркер знаходиться в правильній точці і адреса вказана правильно.

Використання посилання на карту

Тепер, коли ви знайшли потрібний фрагмент картки, натисніть кнопку Посилання ліворуч у сайдбарі. У вас відкриється додаткова панель з адресою посилання та HTML кодом для вставки картки. Натисніть Налаштування та перегляд вбудованої карти.

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

Під картою ви бачите HTML код для вставки фрагмента, який ви налаштували. Виділіть весь код та скопіюйте.

Тепер відкрийте ваш WordPress запис у режимі редагування та перейдіть до перегляду HTML. просто вставте код у потрібному місці.

Ось, що вийде під час перегляду самого запису:

Переглянути збільшену карту

Якщо ви хочете позбавитися тексту "Переглянути збільшену картупід самою картою, просто видаліть зайвий код відразу після закриття тега :

Як бачите, нічого складного. Сподіваюся, цей спосіб допоможе вам наочно показати потрібний будинок або вулицю на своєму сайті.

PS

Думаю, деяким власникам iPhone або IPad буде це цікаво.

Зверніть увагу на мініатюру до цього запису в самому верху та порівняйте його з іконкою вбудованої програми Карти на своєму iOS гаджеті.

Не бачите жодної подібності? :)

 

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/