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

гоогле мапс для сайта

Здравствуйте, дорогие читатели!

Сегодня я хотела бы вам рассказать, как вставить google maps (гоогле мапс) на сайт WordPress. Данная информация будет полезна для всех желающих, кто хочет разместить на воем сайте карту, с указанием местоположения офиса компании или представительства интернет-магазина. Кроме того, при помощи сервиса Google maps можно легко поделиться со своими друзьями и читателями координатами расположения необходимого объекта.

Создание карты гугл

Для того чтобы получить код гоогле мапс необходимо выполнить следующее:

  1. 1.Переходим по ссылке на страницу сервиса Google maps
  2. 2.Что бы нам были доступны все фукции сервиса, нам необходимо авторизоваться.
  3. Главная страница сервиса Google maps
  4. 3.В строке поиска местоположения вводим адрес, и нажимаем на кнопку «Найти»:
  5. Поиск местоположения в Google Maps
  6. 4.После нажатия на кнопку поиска, перед нами открывается карта гоогле мапс с обозначенным маркером местоположением.
  7. местоположение отмеченное маркером
  8. 5.Для того, что бы получить код карты для сайта, необходимо нажать на кнопку поделится:
  9. кнопка "Поделиться"
  10. 6.Перед нами открывается окошко с двумя вкладками:
    1. 1.)Первая вкладка «Ссылка» содержит ссылку на карту гоогле мапс с поставленной меткой. Ее, например, можно использовать для того, чтобы быстро показать нужное местоположение.
    2. Получить ссылку на карту

      Если поставить галочку возле опции «Короткий URL», то ссылка на карту будет преобразована в более компактную и удобную:

      Как сократить ссылку на карту Google Maps
    3. 2.)На вкладке «Код» мы можем настроить и получить код карты для вставки на сайт
    4. Как получить код карты Google Maps
  11. 7.Выбираем подходящий для нас размер карты, нажав на раскрывающийся список доступных размеров. После чего копируем сгенерированный код.
  12. Настройка карты Google Maps для сайта

Вставка карты Google Maps на сайт

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

  1. 1.Заходим в админку WordPress нашего сайта.
  2. 2.Открываем нужную нам страницу и переходим на вкладку «Текст» редактора страницы.
  3. 3.Вставляем код карты и нажимаем на кнопку «Обновить».
  4. Вставка кода карты Google Maps на страницу сайта

Вот что у нас получилось:

Карта Google Maps на странице сайта

В случае если у вас адаптивный сайт, и вы хотите, чтобы карта подстраивалась под размер экрана пользователя вам необходимо задать ширину карты в процентах:

адаптивная карта Google Maps на сайте

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

По созданию и добавлению на сайт карты яндекс у меня была отдельная статья, с которой вы можете ознакомиться, перейдя по ссылке: Как вставить карту яндекс на сайт WordPress

На этом у меня все. Надеюсь, данная статья поможет сделать Google карту для вашего сайта. Если у вас возникнут вопросы, обязательно задавайте их в комментариях. Так же не забывайте заглянуть на мой YouTube-канал, там вы найдете для себя много интересных и полезных видео уроков.

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif