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

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

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

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

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

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

Як це зробити

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

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

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

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

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

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

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

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

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

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

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

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

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

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

P.S.

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

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

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

 

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

редактор wpcafe

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