Как поставить карту на сайт: Как вставить на сайт Google-карту

alexxlab

Содержание

Размещаем адаптивную Google-карту на своем сайте

Оцените материал

  • 1
  • 2
  • 3
  • 4
  • 5

(28 голосов)

Как известно, размещение карты Google на своем сайте довольно простая задача. Однако, по-умолчанию, карта не адаптируется под размер экрана.

В этой коротенькой заметке, автор поделится способом решения этой проблемы. Для этого нам мы добавим несколько строк CSS-кода. Вы можете воспользоваться этим методом, если ваш сайт работает под управлением различных систем управления содержимым. Например: Joomla, WordPress, Drupal и т. п.

Шаг 1. Получаем код карты на Google Maps.

  • Открываем Google Maps
  • Находим участок карты, который вы хотите разместить на своем сайте
  • Кликаем на ссылку «Поделиться»

  • В появившемся окне выбираем закладку «Код»
  • Выделяем код в текстом поле и копируем его

Шаг 2.

Размещаем полученный код

Разместите полученный код на HTML-коде страницы вашего сайта. Это будет выглядеть приблизительно так:

HTML


<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d143494.86491623629!2d38.8346975935457!3d55.80873818252006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x414b1c7e8e89e903%3A0x2489581359276ac7!2z0J7RgNC10YXQvtCy0L4t0JfRg9C10LLQviwg0JzQvtGB0LrQvtCy0YHQutCw0Y8g0L7QsdC7Lg!5e0!3m2!1sru!2sru!4v1452761646368" frameborder="0" allowfullscreen></iframe>

Шаг 3. Изменяем полученный код

Создайте HTML-элемент <div> с классом map-responsive и разместите внутри него код для показа карты. В результате получим:

HTML


<div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d143494.86491623629!2d38.8346975935457!3d55.80873818252006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x414b1c7e8e89e903%3A0x2489581359276ac7!2z0J7RgNC10YXQvtCy0L4t0JfRg9C10LLQviwg0JzQvtGB0LrQvtCy0YHQutCw0Y8g0L7QsdC7Lg!5e0!3m2!1sru!2sru!4v1452761646368" frameborder="0" allowfullscreen></iframe>
</div>

Шаг 4.

Добавляем CSS

Сейчас нам нужно добавить следующие CSS-правила в файл стилей вашего сайта.

CSS


.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Все. Теперь ваша карта стала адаптивной. Чтобы убедиться в этом попробуйте изменить размер окна браузера: растянуть или уменьшить его.

Оригинал статьи — https://www.ostraining.com/blog/coding/responsive-google-maps/

Другие материалы в этой категории: « reGrid.js — инструмент для показа сетки на веб-странице Реализуем hover-эффект над картинкой с помощью CSS3 »

Наверх

Категории блога

  • Битрикс (40)
  • HTML-верстка (54)
  • Joomla (18)
  • JavaScript, jQuery (26)
  • PHP (10)
  • Базы данных (5)
  • Разное (23)

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

  • Шаблон документа HTML5 (zip, 35.
    41 Кб)
  • Шаблон jQuery-плагина (zip, 426 байт)
  • Шаблон сайта 1С-Битрикс (zip, 3.11 Кб)

Полезное