--- title: "Как вставить карту Google на сайт без API-ключа" description: "Как встроить карту Google на сайт бесплатно и без ключа API: код из Google Карт, адаптивная ширина, маршрут. И когда без ключа уже не обойтись." url: "https://it-deweloper.pl/ru/blog/embed-google-map-on-website" date: "2026-10-17T22:34:38+00:00" language: "ru-RU" --- [Перейти к содержимому](#tm-main) - [ Главная](https://it-deweloper.pl/ru "Главная страница веб-студии IT Deweloper") - [Контакт](https://it-deweloper.pl/ru/contact "Контакты веб-студии IT Deweloper") - [ +48 731 190 041](tel:+48731190041 "Телефон") - [ office@it-deweloper.pl](mailto:office@it-deweloper.pl "Электронная почта") - [ Nowogródzka 4A, Белосток, Польша](https://maps.app.goo.gl/BNjvryytwRyv4omA7 "Адрес") - [ WhatsApp](https://wa.me/48731190041 "WhatsApp") - [ Telegram](https://t.me/+48731190041 "Telegram") - [Стоимость](https://it-deweloper.pl/ru/cost "Тарифы и стоимость услуг") - [ПрайсПримерные цены на веб разработку](https://it-deweloper.pl/ru/cost/pricing "Цены на разработку сайта") - [КалькуляторСамостоятельный онлайн-расчет](https://it-deweloper.pl/ru/cost/calculator "Рассчитать стоимость сайта онлайн") - [БрифПолучите точный расчет проекта](https://it-deweloper.pl/ru/cost/brief "Заполнить бриф на разработку сайта") - [Решения](https://it-deweloper.pl/ru/web "Решения по разработке и продвижению сайтов") - [Этапы работыКак мы делаем сайты](https://it-deweloper.pl/ru/web/process "Этапы и сроки разработки сайта") - [SEOПоисковая оптимизация ](https://it-deweloper.pl/ru/web/seo "SEO продвижение сайта: оптимизация, раскрутка, позиции в Google") - [GEOПродвижение сайта в ИИ](https://it-deweloper.pl/ru/web/geo "GEO оптимизация: продвижение сайта в ответах ChatGPT, Gemini и Perplexity") - [ИИИскусственный Интеллект на сайте](https://it-deweloper.pl/ru/web/ai) - [JoomlaСистема управления сайтом](https://it-deweloper.pl/ru/web/joomla "Разработка сайтов на Joomla") - [GoogleНастройка сервисов Google](https://it-deweloper.pl/ru/web/google "Настройка сервисов Google для сайта") - [Портфолио](https://it-deweloper.pl/ru/portfolio "Портфолио и примеры работ") - [FAQ](https://it-deweloper.pl/ru/faq "Частые вопросы о разработке сайтов") - [Блог](https://it-deweloper.pl/ru/blog "Статьи о разработке и продвижении сайтов") - [О нас](https://it-deweloper.pl/ru/about "Об основателе студии — Виктор Пархимчик") - [ Русский ](https://it-deweloper.pl/ru/blog/embed-google-map-on-website) - [ Polski ](https://it-deweloper.pl/pl/blog/embed-google-map-on-website) - [ Беларуская ](https://it-deweloper.pl/be/blog/embed-google-map-on-website) - [ English ](https://it-deweloper.pl/en/blog/embed-google-map-on-website) - ![](https://it-deweloper.pl/templates/yootheme/assets/images/language.svg) Русский - [ Русский ](https://it-deweloper.pl/ru/blog/embed-google-map-on-website) - [ Polski ](https://it-deweloper.pl/pl/blog/embed-google-map-on-website) - [ Беларуская ](https://it-deweloper.pl/be/blog/embed-google-map-on-website) - [ English ](https://it-deweloper.pl/en/blog/embed-google-map-on-website) [ ![IT-Deweloper](https://it-deweloper.pl/images/Faviocon.svg)![IT-Deweloper](https://it-deweloper.pl/images/Logo-light.svg)](https://it-deweloper.pl/ru) [ Меню ](#tm-dialog) - [ Главная](https://it-deweloper.pl/ru "Главная страница веб-студии IT Deweloper") - [Контакт](https://it-deweloper.pl/ru/contact "Контакты веб-студии IT Deweloper") - [ +48 731 190 041](tel:+48731190041 "Телефон") - [ office@it-deweloper.pl](mailto:office@it-deweloper.pl "Электронная почта") - [ Nowogródzka 4A, Белосток, Польша](https://maps.app.goo.gl/BNjvryytwRyv4omA7 "Адрес") - [ WhatsApp](https://wa.me/48731190041 "WhatsApp") - [ Telegram](https://t.me/+48731190041 "Telegram") - [Стоимость](https://it-deweloper.pl/ru/cost "Тарифы и стоимость услуг") - [ПрайсПримерные цены на веб разработку](https://it-deweloper.pl/ru/cost/pricing "Цены на разработку сайта") - [КалькуляторСамостоятельный онлайн-расчет](https://it-deweloper.pl/ru/cost/calculator "Рассчитать стоимость сайта онлайн") - [БрифПолучите точный расчет проекта](https://it-deweloper.pl/ru/cost/brief "Заполнить бриф на разработку сайта") - [Решения](https://it-deweloper.pl/ru/web "Решения по разработке и продвижению сайтов") - [Этапы работыКак мы делаем сайты](https://it-deweloper.pl/ru/web/process "Этапы и сроки разработки сайта") - [SEOПоисковая оптимизация ](https://it-deweloper.pl/ru/web/seo "SEO продвижение сайта: оптимизация, раскрутка, позиции в Google") - [GEOПродвижение сайта в ИИ](https://it-deweloper.pl/ru/web/geo "GEO оптимизация: продвижение сайта в ответах ChatGPT, Gemini и Perplexity") - [ИИИскусственный Интеллект на сайте](https://it-deweloper.pl/ru/web/ai) - [JoomlaСистема управления сайтом](https://it-deweloper.pl/ru/web/joomla "Разработка сайтов на Joomla") - [GoogleНастройка сервисов Google](https://it-deweloper.pl/ru/web/google "Настройка сервисов Google для сайта") - [Портфолио](https://it-deweloper.pl/ru/portfolio "Портфолио и примеры работ") - [FAQ](https://it-deweloper.pl/ru/faq "Частые вопросы о разработке сайтов") - [Блог](https://it-deweloper.pl/ru/blog "Статьи о разработке и продвижении сайтов") - [О нас](https://it-deweloper.pl/ru/about "Об основателе студии — Виктор Пархимчик") [ Блог веб-студии IT Deweloper ](https://it-deweloper.pl/index.php?option=com_content&view=category&id=8&lang=ru-RU "Блог веб-студии IT Deweloper") # Как вставить карту Google на сайт без API-ключа Карта на странице «Контакты» помогает клиенту понять, где вы находитесь, и сразу проложить маршрут. Для этого не нужны ни API-ключ, ни платёжная карта в Google Cloud: простую карту можно встроить кодом прямо из Google Карт за пару минут. Показываю, как получить код карты, как сделать её удобной на телефоне, как встроить маршрут — и в каких случаях без ключа Google Maps Platform всё-таки не обойтись. --- ![Метка на карте в окне браузера, чек-лист шагов и знак вопроса — инструкция по встраиванию карты Google на сайт](https://it-deweloper.pl/images/blog/embed-google-map-on-website-cover-2x.webp) ## Шаг 1. Найдите место на Google Картах Откройте [Google Карты](https://www.google.com/maps) на компьютере и найдите свою компанию по названию. Если у компании есть Профиль в Google, встраивайте именно его: тогда на карте будут название, рейтинг и кнопка маршрута, а не просто точка по адресу. Если профиль ещё не подтверждён, пригодится [статья о подтверждении Профиля компании](https://it-deweloper.pl/ru/blog/verify-google-business-profile). ## Шаг 2. Скопируйте код 1. В карточке места нажмите «Поделиться». Если нужен просто фрагмент карты без карточки, откройте меню слева вверху и выберите «Ссылка/код». 2. Перейдите на вкладку «Встраивание карт». 3. При желании выберите размер и подвиньте карту, чтобы место оказалось по центру. 4. Нажмите «Копировать HTML». Вы получите код вида ``. ## Шаг 3. Вставьте код на сайт Вставьте код в нужное место страницы. В большинстве визуальных редакторов для этого есть режим HTML или отдельный блок для кода. Учтите, что некоторые редакторы и фильтры CMS из соображений безопасности вырезают `iframe`. Если после сохранения карты нет, проверьте настройки фильтра текста для своей группы пользователей. ## Шаг 4. Сделайте карту адаптивной В коде из Google Карт стоит фиксированная ширина, например `width="600"`. На телефоне такая карта вылезает за экран. Проще всего заменить ширину на 100%: ``` ``` Атрибут `loading="lazy"` откладывает загрузку карты, пока посетитель не прокрутит до неё, и ускоряет страницу. Атрибут `title` нужен экранным дикторам, чтобы назвать карту. ## Как встроить маршрут Постройте маршрут в Google Картах через «Как добраться», выберите вариант, нажмите «Поделиться» → «Встраивание карт» → «Копировать HTML». Так удобно показать, например, как пройти к офису от вокзала или парковки. ## Когда без API-ключа не обойтись Карта из «Поделиться» подходит для одной точки или маршрута. Ключ Google Maps Platform нужен, если вы хотите: - показать на одной карте несколько филиалов или объектов со своими метками; - подсказывать адрес при вводе в форме заказа или доставки; - рассчитывать расстояние или стоимость доставки; - оформить карту в фирменных цветах. Для встраивания карт через API у Google есть Maps Embed API: по данным Google, все его запросы бесплатны и без ограничения количества. Остальные API платные сверх бесплатного объёма, поэтому ключ ограничивают по домену и следят за расходами. **Конфиденциальность.** Встроенная карта загружается с серверов Google и может устанавливать cookie. На сайтах для посетителей из ЕС это учитывают в cookie-баннере и политике конфиденциальности — например, показывают карту после согласия или по клику. ## Частые ошибки - Встроена точка по адресу, а не Профиль компании — клиент не видит название и отзывы. - Фиксированная ширина ломает вёрстку на телефоне. - Карта стоит на каждой странице сайта — это лишняя загрузка, достаточно страницы «Контакты». - Вместо карты вставлен скриншот — по нему нельзя проложить маршрут. ## Коротко 1. Найдите компанию на Google Картах, лучше — её Профиль. 2. «Поделиться» → «Встраивание карт» → «Копировать HTML». 3. Вставьте код в HTML-режиме редактора. 4. Замените ширину на 100% и оставьте `loading="lazy"`. 5. Для нескольких точек, подсказки адреса и расчёта доставки нужен ключ API. Если нужна карта с несколькими точками, подсказка адреса в формах или маршрут до клиента, мы можем [подключить Google Maps к сайту](https://it-deweloper.pl/ru/web/google/maps-platform) через API: оформим доступ, защитим ключ и ограничим расходы. 17 октября 2026 | [Виктор Пархимчик](https://it-deweloper.pl/index.php?option=com_contact&view=contact&id=1&catid=4) | [Блог веб-студии IT Deweloper](https://it-deweloper.pl/index.php?option=com_content&view=category&id=8) [ ![Значок базы данных в окне браузера, чек-лист шагов и знак вопроса — инструкция по первым запросам к данным GA4 в BigQuery](https://it-deweloper.pl/images/blog/ga4-bigquery-first-query-cover.webp) ### Как сделать первый запрос к данным GA4 в BigQuery После связки Google Analytics 4 с BigQuery в вашем хранилище каждый день появляются сырые события: каждый просмотр страницы, клик и заявка со всеми п… ](https://it-deweloper.pl/index.php?option=com_content&view=article&id=255:ga4-bigquery-first-query&catid=8&lang=ru-RU) [ ![Арка шлюза со стрелкой в окне браузера, чек-лист шагов и знак вопроса — объяснение работы Google tag gateway](https://it-deweloper.pl/images/blog/how-google-tag-gateway-works-cover.webp) ### Как работает Google tag gateway и стоит ли включать Google tag gateway — функция, которая позволяет загружать теги Google с вашего собственного домена, а не с серверов Google. Её часто описывают как сп… ](https://it-deweloper.pl/index.php?option=com_content&view=article&id=254:how-google-tag-gateway-works&catid=8&lang=ru-RU) [ ![Шкала скорости со стрелкой в окне браузера, чек-лист шагов и знак вопроса — инструкция по проверке Core Web Vitals](https://it-deweloper.pl/images/blog/check-core-web-vitals-cover.webp) ### Как проверить Core Web Vitals сайта и понять цифры Core Web Vitals — три показателя, по которым Google оценивает, насколько удобно пользоваться страницей: как быстро появляется главное содержимое, как… ](https://it-deweloper.pl/index.php?option=com_content&view=article&id=253:check-core-web-vitals&catid=8&lang=ru-RU) [ ![Конверт в окне браузера, чек-лист шагов и знак вопроса — инструкция по настройке SPF, DKIM и DMARC для Google Workspace](https://it-deweloper.pl/images/blog/google-workspace-spf-dkim-dmarc-cover.webp) ### Как настроить SPF, DKIM и DMARC для Google Workspace Если письма с вашего домена попадают в спам или вообще не доходят, первым делом проверяют три записи в DNS: SPF, DKIM и DMARC. С 2024 года Gmail треб… ](https://it-deweloper.pl/index.php?option=com_content&view=article&id=252:google-workspace-spf-dkim-dmarc&catid=8&lang=ru-RU) [ ![Щит с замком в окне браузера, чек-лист шагов и знак вопроса — инструкция по выбору reCAPTCHA и получению ключей](https://it-deweloper.pl/images/blog/choose-recaptcha-version-cover.webp) ### Как выбрать reCAPTCHA для формы и получить ключи reCAPTCHA защищает формы сайта от спам-ботов. За 2025 год Google перенёс все ключи reCAPTCHA в Google Cloud, поэтому многие старые инструкции устарел… ](https://it-deweloper.pl/index.php?option=com_content&view=article&id=251:choose-recaptcha-version&catid=8&lang=ru-RU) [ ![Метка на карте в окне браузера, чек-лист шагов и знак вопроса — инструкция по встраиванию карты Google на сайт](https://it-deweloper.pl/images/blog/embed-google-map-on-website-cover.webp) ### Как вставить карту Google на сайт без API-ключа Карта на странице «Контакты» помогает клиенту понять, где вы находитесь, и сразу проложить маршрут. Для этого не нужны ни API-ключ, ни платёжная карт… ](https://it-deweloper.pl/index.php?option=com_content&view=article&id=250:embed-google-map-on-website&catid=8&lang=ru-RU) [ ![Мишень со стрелкой в окне браузера, чек-лист шагов и знак вопроса — инструкция по проверке конверсий Google Ads](https://it-deweloper.pl/images/blog/check-google-ads-conversions-cover.webp) ### Как проверить, что конверсии Google Ads считаются Реклама в Google Ads учится на конверсиях: заявках, звонках, покупках. Если они считаются неправильно, система оптимизирует кампании вслепую — тратит… ](https://it-deweloper.pl/index.php?option=com_content&view=article&id=249:check-google-ads-conversions&catid=8&lang=ru-RU) [ ![Круговая и столбчатая диаграммы в окне браузера, чек-лист шагов и знак вопроса — инструкция по созданию отчёта в Data Studio](https://it-deweloper.pl/images/blog/data-studio-first-report-cover.webp) ### Как сделать отчёт в Data Studio по Analytics и GSC Data Studio — бесплатный сервис Google для отчётов и дашбордов. В апреле 2026 года Google вернул ему это название, до этого он несколько лет называлс… ](https://it-deweloper.pl/index.php?option=com_content&view=article&id=248:data-studio-first-report&catid=8&lang=ru-RU) [ ![Значок cookie в окне браузера, чек-лист шагов и знак вопроса — инструкция по проверке режима согласия Google](https://it-deweloper.pl/images/blog/check-consent-mode-v2-cover.webp) ### Как проверить, работает ли Consent Mode v2 на сайте Режим согласия Google (Consent Mode v2) передаёт в Google Analytics и Google Ads выбор, который посетитель сделал в cookie-баннере. Баннер может выгл… ](https://it-deweloper.pl/index.php?option=com_content&view=article&id=247:check-consent-mode-v2&catid=8&lang=ru-RU) [ ![Значок ярлыка Менеджера тегов в окне браузера, чек-лист шагов и знак вопроса — инструкция по установке Google Tag Manager](https://it-deweloper.pl/images/blog/install-google-tag-manager-cover.webp) ### Как установить Google Tag Manager на сайт Google Менеджер тегов (Google Tag Manager) — это «ящик» для всех кодов отслеживания на сайте: Google Analytics, конверсий Google Ads, пикселей соцсет… ](https://it-deweloper.pl/index.php?option=com_content&view=article&id=246:install-google-tag-manager&catid=8&lang=ru-RU) [](#) [](#) ## Создать свой сайт Узнай, сколько будет стоить разработка твоего веб сайта [ Онлайн калькулятор ](https://it-deweloper.pl/index.php?Itemid=197&lang=ru-RU) ![](https://it-deweloper.pl/media/yootheme/cache/3c/background-square-01-3c44c74f.png?src=images/yootheme/demo/background-square-01.png&thumbnail=900,900,&hash=72c31958) ![](https://it-deweloper.pl/media/yootheme/cache/cb/background-square-03-cbb341a0.png?src=images/yootheme/demo/background-square-03.png&thumbnail=600,600,&hash=6e9dde93) ### [ Контакт ](https://it-deweloper.pl/index.php?Itemid=186&lang=ru-RU) Веб студия IT Deweloper разработка сайтов, Польша. 5423493188 SEOИИРекламаВебCMM ### Адрес Nowogródzka 4A Белосток, 15-490, PL [ ### Телефон +48 731 190 041 ](tel:+48731190041) [ ### Электронная почта Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в браузере должен быть включен Javascript. ](mailto:office@it-deweloper.pl) [ ### WhatsApp ](https://wa.me/48731190041) [ ### Telegram ](https://t.me/+48731190041) Время работы: - Понедельник 0900–1800 - Вторник 0900–1800 - Среда 0900–1800 - Четверг 0900–1800 - Пятница 0900–1800 - Суббота 0900–1600 - Воскресенье выходной ![IT Deweloper](https://it-deweloper.pl/images/Logo.webp) Веб разработка может быть интересной! Наши социальные сети с тематическим контентом о создании сайтов. - [](https://www.facebook.com/ITdeweloper) - [](https://www.linkedin.com/company/it-deweloper) - [](https://t.me/IT_deweloper) - [](https://www.instagram.com/it_deweloper/) - [Наше предложение](https://it-deweloper.pl/index.php?option=com_content&view=article&id=20&catid=14&lang=ru-RU) - [Портфолио](https://it-deweloper.pl/index.php?Itemid=108&lang=ru-RU) - [Контакты](https://it-deweloper.pl/index.php?Itemid=186&lang=ru-RU) - [О нас](https://it-deweloper.pl/index.php?Itemid=213&lang=ru-RU) - [Блог](https://it-deweloper.pl/index.php?Itemid=203&lang=ru-RU) ### [ Веб разработка ](https://it-deweloper.pl/index.php?option=com_content&view=article&id=20&Itemid=121) - [Этапы работыКак мы делаем сайты](https://it-deweloper.pl/ru/web/process "Этапы и сроки разработки сайта") - [SEOПоисковая оптимизация ](https://it-deweloper.pl/ru/web/seo "SEO продвижение сайта: оптимизация, раскрутка, позиции в Google") - [GEOПродвижение сайта в ИИ](https://it-deweloper.pl/ru/web/geo "GEO оптимизация: продвижение сайта в ответах ChatGPT, Gemini и Perplexity") - [ИИИскусственный Интеллект на сайте](https://it-deweloper.pl/ru/web/ai) - [JoomlaСистема управления сайтом](https://it-deweloper.pl/ru/web/joomla "Разработка сайтов на Joomla") - [GoogleНастройка сервисов Google](https://it-deweloper.pl/ru/web/google "Настройка сервисов Google для сайта") **it-deweloper** — студия веб-разработки. Мы проектируем и создаем современные сайты и интернет-магазины. © [it-deweloper](https://it-deweloper.pl/ru). Все права защищены. [Политика конфиденциальности](https://it-deweloper.pl/index.php?Itemid=315&lang=ru)