Карти - важливий аспект будь-якого веб-сайту бізнесу. Навіть якщо ви повністю на базі Інтернету, клієнти все ще хочуть знати, хто ви є і де живете. Google Maps тепер за замовчуванням для багатьох веб-сайтів, оскільки це найпростіший у використанні, здавалося б, найбільш точний і безкоштовний. В кінці цього підручника ви точно знатимете, як вбудовувати чуйну карту Google на свій веб-сайт.
Карти Google за замовчуванням не завжди реагують, тому можуть не змінювати масштаб для різних розмірів екрана. Залежно від того, використовуєте ви плагін WordPress або вбудовуєте його самостійно за допомогою коду, можливо, потрібно буде додати пару рядків CSS, щоб карта відповідала.
Чуйний веб-дизайн
Тут чутливий ключовий термін. Він описує веб-дизайн, який враховує досвід користувача та пристрій, щоб переконатися, що він однаковий незалежно від того, який пристрій ви використовуєте для доступу до веб-сайту. Наприклад, чуйний веб-сайт повинен забезпечувати однакову якість досвіду, незалежно від того, відвідуєте ви його на робочому столі, планшеті чи смартфоні.
Для цього веб-сайт повинен адаптуватися до різних дозволів, розмірів екрана та дотику.
Вставлення чуйної карти Google у веб-сайт
Я маю три способи вбудувати Карти Google на веб-сайт. Якщо ви використовуєте тему WordPress, вона може мати вбудовану функцію. Ви також можете використовувати плагін або вбудовувати код безпосередньо з Google на будь-який веб-сайт. Перший і другий варіанти чудово підходять для користувачів WordPress, інші CMS також використовують плагіни, щоб ви там були охоплені. Останній варіант, використовуючи код, повинен працювати на більшості веб-сайтів незалежно від того, як вони побудовані.
Використовуйте тему WordPress, щоб вставити чуйну карту Google
Деякі теми WordPress матимуть функцію спеціально для Карт Google. Оскільки карти є настільки фундаментальними для сучасних веб-сайтів, деякі дизайнери теми впровадили їх безпосередньо у свої проекти. Якщо ваша тема має функцію карти, вам, швидше за все, знадобиться API Карт Google для її роботи. Ви додаєте API в параметри теми, і він буде спілкуватися безпосередньо з Google, щоб створити карту при кожному відвідуванні.
- Відвідайте цю сторінку на веб-сайті Google, щоб розпочати процес API.
- Виберіть синю кнопку Початок роботи.
- Виберіть піктограму меню з трьома рядками у верхньому лівому куті нового екрана.
- Виберіть API та служби, а потім Акредитиви.
- Виберіть Створити облікові дані, а потім ключ API.
- Виберіть ключ обмеження та виберіть HTTP Referrers.
- Виберіть Зберегти.
- Скопіюйте ключ API і вставте його на сторінку з параметрами дизайну, яка цього вимагає.
Отримавши ключ API, ви можете впровадити карту Google на свій веб-сайт за допомогою інструментів дизайну тем. Поки тема чутлива, карта має бути занадто.
Використовуйте плагін, щоб вставити чуйну карту Google
WordPress використовує плагіни, Joomla використовує розширення, Drupal використовує модулі або плагіни, а інші CMS використовують схожі умови іменування. У будь-якому випадку плагіни відносяться до модульних елементів, які ви можете зафіксувати на своїй основній CMS, щоб додати функції. Одна корисна особливість - карта Google. Якщо тема вашого веб-сайту не містить елемента карт, і ви не хочете робити код самостійно, наступним найкращим моментом є плагін.
- У WordPress перейдіть до плагінів та додайте нові.
- Шукайте Карти Google і виберіть плагін, який вам подобається.
- Увімкніть його в плагінах та перейдіть до його Налаштувань.
- Додайте створений вище API Карт Google, де зазначено, та Зберегти.
- Реалізуйте плагін там, де ви хочете, щоб карта з’явилася.
Інші CMS дещо відрізняються за своїм найменуванням та положеннями меню, але принцип майже однаковий. Більшість, якщо не всі плагіни карт, потребують API API Карт Google.
Використовуйте код, щоб вставити чуйну карту Google
Якщо ви не використовуєте WordPress або інший CMS, ви все одно можете вбудовувати чуйну карту Google. Вам просто потрібно використовувати код замість модуля. Це займе трохи більше роботи, але доставить такі ж чуйні карти.
- Відвідайте Карти Google і перейдіть, поки карта, яку ви хочете відобразити, не заповнить екран.
- Виберіть синє посилання Share та скопіюйте код із Embed Map.
- Додайте свій конкретний код вбудовування до коду нижче між та.
- Додайте код у HTML вашої веб-сторінки, де ви хочете побачити карту.
- Збережіть свої зміни.
Код:
Це не мій код, я знайшов його в Інтернеті, але перевірив його на своєму веб-сайті. Це працює як шарм, і він повинен працювати, якщо ви використовуєте CMS, HTML, Hugo або будь-яку з багатьох інших мов веб-сайту чи інструментів сторінки.
