BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Wordpress » Как вставить Google карты (Google maps) на сайт

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

2016-07-13 / Вр:10:37 / просмотров: 2692

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

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

https://www.google.com/maps/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

width="600"

станет так:

width="100%"

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

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

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

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

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

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

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

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

  2. roman

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Subscribe without commenting

Метки: , , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 784
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4296