Как пользоваться: Генератор Google Maps API
- Укажите местоположение, масштаб, стиль карты и размер.
- Добавьте маркеры: задайте каждому цвет, позицию и текст для информационного окна.
- Включите поиск мест или отзывы Google, если они нужны.
- Вставьте свой API-ключ, чтобы увидеть полный предпросмотр, затем скопируйте код или используйте Копировать в Webflow.
Получение ключа Google Maps API
- Откройте Google Cloud console и создайте проект с включённым выставлением счетов.
- Включите API, которые этот инструмент перечисляет для вашей настройки.
- Создайте ключ API в разделе Keys & Credentials (Ключи и учётные данные).
- Ограничьте ключ адресом вашего сайта и этими API. Ключ в веб-коде виден всем, поэтому именно ограничения защищают его.
Чтобы использовать предпросмотр здесь, разрешите devpack.app/* как сайт на время теста или используйте отдельный тестовый ключ.
Стоимость
Google выставляет счета по использованию и включает бесплатный месячный лимит для каждого API. Отзывы используют более дорогой запрос Place Details, поэтому настройте оповещение о бюджете в Google Cloud. Актуальные цены смотрите на странице цен Google.
О сгенерированном коде
Поле поиска и отзывы используют текущий Places API (New), так как старые сервисы Places недоступны новым проектам. Каждый маркер может быть цветной булавкой, точкой, квадратом или звездой либо вашим изображением по URL или загруженным файлом до 100 КБ. Маркеры используют google.maps.Marker, поэтому работают с JSON-стилями карт. Google рекомендует Advanced Markers для новых проектов, но они требуют Map ID и стилизацию в облаке, поэтому этот инструмент их не генерирует. Условия Google требуют показывать отзывы с указанием авторства, и сгенерированный код это учитывает.
Нужна простая карта без ключа? Используйте Генератор встраиваемых карт Google Maps. Также: Выбор цвета, Стили CSS-кнопок.
Также ищут как: кастомные маркеры google maps, пример google maps javascript api, кастомная карта google, стили google maps, встроить отзывы google, пример google places api, карта google в webflow.
Инструменты, которые хорошо сочетаются с Генератор Google Maps API
- Генератор Schema-разметки — Выберите тип схемы, заполните форму и скопируйте готовый JSON-LD.
- Генератор кода встраивания YouTube — Вставьте любую ссылку на YouTube — видео, Short или плейлист — и получите адаптивный код встраивания с режимом повышенной приватности, временем начала и окончания, автовоспроизведением без звука, повтором и субтитрами.
- JSON форматтер — Вставьте JSON, чтобы отформатировать, минифицировать или проверить его.
- Анализатор заголовков письма — Вставьте исходные заголовки письма, чтобы увидеть весь его путь: каждый почтовый сервер и время, которое он потратил, результаты SPF, DKIM и DMARC, IP-адрес отправителя и тревожные признаки, например несовпадающие Reply-To или Return-Path.