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

В этом уроке рассмотрим как добавить карту Google на сайт.

Если вы на сайте указываете адрес своей компании, любимого бара или место встречи, для удобства восприятия рекомендуется приложить карту, на которой маркером отмечено это место. Карты Google  позволяют автоматически выводить фотографии местности, что значительно упростит человеку поиск заданного места.

Первым делом переходим на сайт Google Maps и находим нужный адрес. В картах гугл есть 2 вида интерфейса отображения, я привык к старому, по этому примеры будут основаны на нем.

Для переключения интерфейса в старый режим

Для этого в правом нижнем углу экрана нажмите на Знак вопроса и появившимся окошке выберите Классический интерфейс.

Найдя нужное строение нажмите на нем правой кнопкой и выберите пункт «Что тут находится».

Это место отметится на карте и теперь можно настроить карту для вашего сайта..

Первым делом нажмите на иконку цепочки Ссылка, в появившемся окошке нажмите Настройка и предварительный просмотр встроенной карты.

Откроется новое окно браузера c настройками карты

В этом окне настраиваем размер карты для размещения на сайте, можно выбрать из предложенных, или настроить на свой вкус.

По завершении выбора размера необходимо скопировать код карты.

Размещение карты Google на сайте

Переходим на страницу вашего сайта где хотим разместить карту.

Выбираем режим редактирования страницы Текст и в нужное место вставляем скопированный код. Сохраняете страницу, все, теперь у вас есть карта на сайте 🙂

Что делать если размер карты был выбран не верно?

Чтобы не делать все операции повторно, размер карты можно изменить в коде для вставки. Для этого измените параметры  width=»000″ и height=»000″ ,  где width — ширина карты, height — высота карты в пикселях на нужные.

У карт Google есть режим просмотра улиц. В этом режиме так же можно разметить карту на сайт.

Перетащите желтого человечка на карту, улицы которые доступны для просмотра подсветятся синим цветом.

Выберите необходимый ракурс просмотра, после этого так же скопируйте код как это делали раньше.

В следующем уроке рассмотрим Как добавить карту Яндекс на сайт.