Как добавить Google карту на сайт?

Добавим интерактивную Google карту на сайт

  1. Переходим на Google карты https://www.google.ru/maps и вводим наш адрес. Жмём "Поделиться"Гугл карты
  2. Выбираем вкладку "Встраивание карт" и копируем HTML
  3. Добавляем HTML виджет, нажимаем "Редактировать" и вставляем туда скопированный код из шага 2 и нажимаем "Галочку".
    Гугл карты-2
    Гугл карты-3
  4. HTML виджет станет зеленым, значит код вставился. В редакторе карты не будет видно, но на опубликованной странице всё будет работать
    Снимок экрана 2016-04-22 в 1.27.57
  5. Выглядеть карта будет, например, так:
    Снимок экрана 2016-04-22 в 1.30.06

    Растягиваем карту на 100% по ширине секции и делаем её адаптивной для мобильников

    Заменяем параметр width="600" на width="100%"
    Пример кода, жирным подсвечен параметр:


    <iframe src= "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2245.0412585988643!2d37.614547115930776!3d55.757
    785480554624!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54a
    5ac4a25aad%3A0xcb45867db6289cbb!2z0YPQuy4g0J7RhdC0YLQvdGL0Lkg0K
    DRj9C0LCDQnNC-0YHQutCy0LA!5e0!3m2!1sru!2sru!4v1461276485158"
    width= "600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>


Растягиваем карту на 100% по ширине секции и делаем её без белой рамки

Уберите внешние отступы у красной колонки (капелька), секции (капелька) и поставьте растягивание на 100% ширины у секции (карандашик)

Гугл карты-4

Растягивание

Карта будет выглядеть на опубликованной странице так:
Снимок экрана 2016-04-22 в 1.31.29