Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

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

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

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

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

Як це зробити

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

PS

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

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

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

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

Коментарі до запису: 19

Mixis:

Чи є спеціальний плагін для вставки короткого посилання? Або можливо через довільне поле. Створюю сайт для туристичної агенції — не зовсім зручно вставляти величезний код у пости.

WordPresso:

Плагінів для цього достатньо. http://wordpress.org/extend/plugins/search.php?q=google+maps&sort=
Метою цього уроку було додати карту, не вдаючись до сторонніх плагінів.

Mixis:

Дякую. Вже вирішило питання.

Andrej Isae2012:

У Гугле немає моуго міста а я б хотів встановити карту міста Пенза та інструмент типу олівця щоб можна було на ній малювати, щоб змінювався масштаб і можна було зробити хоча б псевдо 3д

Артем:

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

Ab:

Сука, блищати, гавно.

S_lee:

Добридень! а чи можна якось без АПИ за допомогою вашого методу змінювати саму карту (тобто видаляти прибирати кнопки і т.д)

WordPresso:

Це буде простіше зробити через сторонні плагіни.

Олександр:

Дякую за інфу

Ольга:

Дякую, все просто я зрозуміло :)

Володимир:

Це все круто звичайно) і легко так сказати.

але...

якщо відкрити консоль Google Chrome (F12) то побачимо на цій сторінці 600 з гаком помилок js типу unsafe javascript — ось як цього уникнути

WordPresso:

Користуватися плагінами із готовою реалізацією Google Maps.

Борис:

Спасище величезне! Єдине, Google показує не зовсім коректний індекс. Наприклад, у Пітері — головний (за головпоштамптом) не для кожного ОПС, а скрізь — 190000…

Поля Єва:

Величезне спасибі!)))))

мескалін:

а чи можна користуватися Яндекс картами?

Роман Абрамович:

У пригоді

Антон Кандакчян:

Це вже не актуальна тема, так як гугл закрив використання старих карт ... а в нових цієї функції немає (

serawww:

Велика подяка просто бістро і головне ефективно. Дякую ще раз

Додати коментар