Как вставить Google карты (Google maps) на сайт

Всем привет!
Я думаю, вы не только замечали на сайтах различных компаний и интернет магазинов карту проезда, но и пользовались подобной картой, чтобы установить маршрут и найти, где находится фирма и как туда проехать.
В этой статье  я расскажу, как вставить Google карты (Google maps) на сайт. Данный способ вставки карты подойдет как на обычные сайты, так и на WordPress, Joomla и т.д.
К слову также скажу, что в базе BlogGood.ru есть еще статья по теме «Как добавить Яндекс карту».

Чтобы вставить Google карты (Google maps) на сайт, зайдите на официальную страничку сервиса Google maps:

http://www.google.com/maps/

Теперь в форму поиска «Искать на Google Картах» введите нужный адрес вашей компании, гостиницы, студии и т.д., например, Житомирская область, город Коростень ул. Грушевского 35:

После того, как вы нажмете на лупу «ПОИСК», перед вами откроется карта уже с помеченным указанным местом, со всеми прилегающими улицами, дорогами и соседними адресами:

Если вам нужно проложить маршрут, нажмите слева на ссылку «Проложить маршрут»:

На скриншоте я показал, где нужно ввести второй адрес (куда будет идти маршрут), например, улица Юрия Гагарина, Коростень, Житомирска область:

Теперь нам нужно получить код и установить его на сайт. Для этого перейдите по меню (три горизонтальные полоски):

И в меню выберите «Ссылка/код»:

Перед вами откроется два способа добавления Google maps на сайт, это «Ссылка» либо «Код»:

Ссылка – при переходе по ссылке, пользователю откроется сайт Google maps с уже настроенной картой и с маршрутом (если вы его указали). Копируйте адрес ссылки и вставляйте на сайт:

Вид ссылки в HTM-коде на сайте будет вот таким:

<a href="http://goo.gl/maps/FFE2Fm84tc12"> КАРТА ПРОЕЗДА </a>

Код – при вставке кода на вашем сайте будет отображаться Google maps со всеми ее опциями (масштаб, маршрут и т.д.). В настройках можно выбрать размер карты «Маленькая», «Средняя», «Большая», «Другой размер». Копируйте код и вставляйте на сайт в то место, где хотите, чтобы отображалась Google карта:

Обратите внимание, что в коде есть такие параметры как «width» – это ширина. Если у вас адаптивный сайт, то рекомендую поменять на значение в  процентах (%), например, было так:

width="600"

станет так:

width="100%"

Если вы используете WordPress, то этот код можно вставить в саму статью, например, назвать «Карта проезда» или «Контакты» и в текстовом редакторе в режиме «Текст» вставляйте код от Google maps:

Также можно вставить код в сам файл. Этот способ подойдет, если вы, хоть чуточку, разбираетесь в HTML.  Итак, зайдите в админке вордпресс на «Внешний вид» => «Редактор» и в нужном файле вставьте ваш код, например, в подвале сайта (самый низ сайта) «footer.php».

Можно вставить код через виджет.  Перетащите виджет «ТЕКСТ» в нужное место и вставьте в него код:

Ничего сложно для тех, кто хоть чуточку знает WordPress.

Вроде все. Вот такая вот карта вышла у меня на блоге.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

4 Ответов на комментарий - Как вставить Google карты (Google maps) на сайт

1. Тамара Полякова

   15.07.2016 в 00:57

   Пост очень понравился,т.к. мне часто требуется указать место расположения объектов недвижимости, а я не знала как вставить карту в статью. Теперь проблем не будет! Спасибо большое Степан за полезную и подробную статью! Удачи!
2. Степан => автор блога

   16.07.2016 в 22:40

   Пожалуйста, Тамара!
3. roman

   04.07.2017 в 22:02

   Самое главное не указали: сначала нужно авторизоваться в google.
   Люди начинают делать все по вашей инструкции – и посредине всех действий вдруг – бац – облом: авторизуйтесь! И все по-новой.
4. Степан => автор блога

   10.07.2017 в 15:49

   А вы пробовали без авторизации в google?
   У меня и без авторизации все отлично работает

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: wordpress, без плагинов, Вебмастеру, для сайта