00 : 00 : 00

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

Веб дизайн и разработка
Иван Алексеев 4 Сентября, 2014
2,405
3

В связи с недавним обновлением Google API виджет “Google Maps” больше не работает должным образом, поэтому в дальнейшем его придется добавлять на страницу вручную при помощи HTML Widget. Для этого нужно выполнить следующие действия:

 

1) Прежде всего, нужно войти в свою учетную запись Google и создать себе карту вот тут https://www.google.ru/maps/mm, нажав на кнопку “Создать карту”, а затем “Классический интерфейс”.

2)  На открывшейся странице нужно заполнить поля “Название” и “Описание”, а также проследить за тем, чтобы был активен параметр “Не публиковать”. После этого нажать “Сохранить” и “Готово” .

3) После того, как карта сохранится, нужно будет нажать кнопку “Изменить”, чтобы изменить положение маркера.

4) Чтобы добавить маркер на карту, нужно нажать на кнопку “Добавить метку” вверху и разместить ее непосредственно на карте.

5) После заполнения “Названия” и “Описания” для указанного места для внесения изменений нужно будет нажать кнопки “Сохранить” и “Готово”.

6) После того, как изменения будут сохранены, нужно будет нажать на кнопку “Ссылка”. Откроется окно, в которой будет доступна строка “Короткий URL”. Копируем содержимое этого поля и открываем в новой вкладке браузера. Это нужно, чтобы строка “HTML-код для добавления на веб-сайт” стала доступной для работы.

7) Теперь в появившемся окне нужно скопировать содержимое строки “HTML-код для добавления на веб-сайт”.

8) Только в данном интерфейсе можно отцентрировать карту для показа. Для этого нужно нажать правую кнопку мышки на том месте, где будет находится центр.

9) Нажать на кнопку “Настройка и предварительный просмотр встроенной карты”.

10) Должно открыться окно с дополнительными настройками карты. Тут можно задать масштаб по умолчанию регуляторами “+” и “-“

11) Далее необходимо разместить “HTML Widget” на странице в панели управления шаблоном и дважды кликнуть на ней мышкой.

12) Далее нужно выбрать слева в окне вариант “Blank HTML”. В окне ввода кода справа вставить строку “HTML-код для добавления на веб-сайт” из пункта 7. После этого в коде нужно найти параметры “width” и “height” и в качестве значений устанавливаем 100% (это позволит заполнить равномерно весь HTML Widget картой). После этого нажимаем “ОК”.

13) Нажимаем “Предпросмотр” и проверяем наличие карты на странице.

А вот тут можно найти небольшой видеоурок о том, как пользоваться данным сервисом сейчас.

Автор: Иван Алексеев
В компании MotoCMS Иван работает со дня ее основания. Признается, что успел создать не один сайт на MotoCMS ради досконального изучения админки и изложения всех хитростей работы с ней в блоге. Иван невероятно позитивен, предан своему делу, отзывчив. С удовольствием поболтает с вами о новых фичах, тулзах, пингах и других непонятных определениях на страницах блога.
Заказать звонок
Наш оператор свяжется с вами через
Наш оператор свяжется с вами через
Мы можем позвонить вам в течении 30 секунд, просто введите свой номер телефона ниже
Хотели бы вы, чтобы мы связались с вами, когда вернемся в офис?
Укажите, пожалуйста, правильный номер телефона
Мы можем позвонить вам в течении 30 секунд, просто введите свой номер телефона ниже
30
Не было телефонного звонка?
Наш менеджер свяжется с вами в течение следующих 24 часов
Создать заявку
Сообщите нам ваш вопрос, мы обязательно вам поможем!