Як вставити карту Гугл на сайт WordPress

11

Від автора: вітаю вас, друзі. З цієї невеликої статті ви дізнаєтеся, як вставити карту Гугл на сайт WordPress. Google мапа-це дуже зручна річ, оскільки дозволяє візуалізувати, наприклад, на сторінці контактів вашу електронну адресу чи просто показати будь-яке місце на карті.

До речі, якщо замість Google карти ви хочете використовувати Яндекс карти, то в цьому випадку можете ознайомитися зі статтею Як вставити Яндекс карту на сайт WordPress.

Отже, давайте приступимо до встановлення та налаштування Google Sitemap, тобто Гугл карти. Тут ми розглянемо два способи додавання карти: простіше і трішки складніше. Почнемо з найпростішого варіанту, за результатами якого ми отримаємо карту у вигляді статичної картинки. Для його реалізації нам навіть не потрібно звертатися до сервісу Google Maps (Карти Google), достатньо лише дізнатися і запам’ятати техніку додавання карти.

Отже, для додавання карти нам потрібен тег img із приблизно таким кодом:

Як вставити карту Гугл на сайт WordPress

Як бачимо, картинка береться з сервісу Google Maps і до неї додаються кілька параметрів, зокрема такі:

center — адресу, який необхідно показати на карті;

zoom — величина збільшення (чим більше число, тим крупніше), максимальне значення — 22;

size — ширина і висота карти.

Давайте спробуємо додати карту до статті. Для цього обов’язково перейдіть в режим HTML коду (вкладка Текст вгорі редактора) і додайте потрібний код.

Як вставити карту Гугл на сайт WordPress

Після цього цілком можете повернутися у вкладку Візуально і, якщо все зроблено вірно, ми вже в редакторі зможемо побачити вибране місце на картинці Гугл карти.

Як вставити карту Гугл на сайт WordPress

Також переконаємося в тому, що карта Google з’явилася і на сайті WordPress.

Як вставити карту Гугл на сайт WordPress

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

Однак цей спосіб може підійти не всім. В результаті ми отримали статичну карту, по якій можна переміщатися, тобто ми отримали звичайну картинку. Щоб отримати динамічну карту, доведеться звернутися до сервісу Google Карти.

Перейдемо за посиланням maps.google.com і знайдемо на карті потрібне нам місце.

Як вставити карту Гугл на сайт WordPress

Тепер нам залишилося отримати код карти. Для цього тиснемо посилання ПОДІЛИТИСЯ, у вікні вибираємо вкладку Код і копіюємо отриманий код Гугл карти.

Як вставити карту Гугл на сайт WordPress

Залишилося вставити в статтю отриманий код. Нагадую, вставляти код у редактор необхідно в режимі Текст.

Як вставити карту Гугл на сайт WordPress

Збережемо зміни і перевіримо, чи з’явилася Гугл карта на сайті WordPress.

Як вставити карту Гугл на сайт WordPress

Все вийшло. У статті з’явилася динамічна карта, по якій можна переміщатися. Дуже зручно. При цьому даний спосіб не набагато складніше, просто нам додатково довелося звертатися до сервісу Google Maps, щоб знайти місце і отримати код карти.

Повторюся, для використання Google Maps нам навіть не довелося шукати плагін WordPress. До речі, якщо ви хочете навчитися писати плагіни, що дозволяють легко додавати на сайт будь-яку Google карту, тоді познайомтеся з нашим курсом по API WordPress.

На цьому у мене все. Удачі!