Наша взаимовыгодная связь https://banwar.org/
Я працював над тим, щоб створити сторінку про розташування для концепції ресторану з кількома локаціями. В даний час переважає тенденція включати карту Google з маркером для кожного місця.
Величезні компанії, які мають локації по всьому світу, мають величезну базу даних карт та багато різних перешкод для подолання - можливість пошуку за містом чи поштовим індексом, доступність Wi-Fi, години роботи тощо.
Для мого конкретного проекту у мене було лише кілька потреб:
- Включити карту на мою сторінку
- Показати маркер для кожного місця
- Кожен маркер показує адресу та може надавати вказівки
Для цього мені потрібно було API Карт Google , частиною Google Developers .
Моя найбільша помилка з API Карт Google перед тим, як їх вивчити, - це те, що ви вбудовуєте Карти Google так, як ми це знаємо, на сайт. Я думав, що просто включивши маркер для місцеположення, вся інформація з’явиться на бічній панелі, наприклад, адреса та рядок пошуку для вказівки.
Це виявилося не так - ви отримуєте карту, але просто включення маркера не призводить до жодних очікуваних дій. Я зрозумів щось, що для мене спрацювало, і я пишу про кроки, які я вжив, якщо хтось бореться у подібній ситуації.
API означає інтерфейс прикладної програми. Для веб-розробки це зазвичай означає програмне забезпечення сторонніх виробників, яке ви можете вбудовувати у свій веб-сайт.
Отримайте ключ API Java Maps
API Карт Google мають декілька варіантів - Android, iOS, Web та веб-сервіси. Просто вбудуючи карту на свій сайт за допомогою декількох маркерів, підпадає під категорію веб, яка відома як Google Maps Javascript.
Перший крок - це зробити отримати ключ API.
Вам доведеться погодитися з їх умовами та послугами.
Вони захочуть, щоб ви дали ім’я та вирішили будь-які обмеження. Якщо ви не обмежуєтесь, будь-хто може ним скористатися та скористатися вашою квотою. Карти безкоштовні лише до певного моменту.
Після цього він з’явиться з надто захищеним виглядом рядком символів, і тепер у вас є ключ.
Ключ API надає розробнику доступ до API.
Тепер, коли у мене є ключ, я можу почати впроваджувати Карти Google на свій сайт.
Вставте карту у свій сайт
The документація для API Карт Google є великим. У них є досить хороший "Привіт, світ!" Або керівництво для початку роботи. Важливо переконатися, що все налаштовано правильно, перш ніж ви можете перейти до спроб більш досконалих концепцій.
Як і все, що є інтерактивним в Інтернеті, є три компоненти - HTML, CSS та JavaScript. У прикладі на сайті розміщено все в одному файлі, але ми просто почнемо ділити їх на три окремі файли, оскільки саме так у вас буде реально налаштований ваш проект.
HTML
У мене є звичайний документ HTML5, який посилається на таблицю стилів CSS та сценарій JS. Карта міститиметься у <div id = "map"> </div>. Звичайно, ви повинні замінити YOUR_API_KEY на ключ з попереднього кроку.
<! DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <meta name = "viewport" content = "width = ширина пристрою, початковий масштаб = 1" /> <назва> Google API API </ / title> <link href = "style.css" rel = "stylesheet" /> </ head> <body> <div id = "map"> <script src = "script.js"> </ script > <script async defer src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script>
Com/maps/api/js?