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

Здравствуйте, сегодня займемся добавлением Google карт сайт (данный метод подойдет как для вставки карты на обычный сайт, так и на WordPress). Так же вас может заинтересовать установка Яндекс карт.

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

Google карта

Добавить Гугл карты на WordPress сайт можно несколькими способами: с помощью плагинов и просто вставкой кода на сайт. При чем,  любой из вариантов установки карты будет достаточно прост для новичка.

Рассмотрим для начала установку Google карт на свой сайт без использования плагинов.

Как разместить Google карту на сайт без плагина

С помощью данного метода можно добавить Google карту как на WordPress, так и на сайт, созданный с помощью любого другого движка, либо вовсе без его использования.

Первым делом, что необходимо сделать - это зайти на страничку сервиса Google maps:

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

И задать интересующий адрес в поиске:

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

Далее необходимо зайти в раздел настройки (шестеренка) и нажать «поделиться».

поделиться

В открывшемся окне нужно перейти во вкладку «Код»:

Карта Славутич

Предварительно задайте необходимое масштабирование.

Осталось скопировать выделенный на скриншоте выше код карты и вставить его в соответствующее место на сайте.

Слева от выделенного фрагмента есть вкладка, где можно выбрать размер карты. Есть 4 варианта: маленькая, средняя и большая. Так же можно задать любой другой размер в пикселях, в зависимости от верстки сайта, что позволит подстроить размеры карты под любой сайт. В дальнейшем его можно будет поменять, поэтому если сразу не задали длину и ширину – не беда.

При вставке кода в WordPress запись или на страницу, обязательно переключитесь в режим «Текст», так как в визуальном редакторе вставить карту не получится.

Так же можно добавить Google карту в виджет WordPress, достаточно просто вставить нужный код с помощью «произвольного текста».

карта гугл в виджет

Обратите внимание на подчеркнутые строчки.

Width – это ширина

Height – это высота.

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

В итоге получилось следующее:

Вот такая Google карта будет у вас на сайте, если следовать инструкции.

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

Есть еще очень много настроек, которых можно задать для карты:

Сделать карту-спутник:

спутниковая карта

Можно указать маршрут от одного места до другого.

как добраться

Для этого необходимо указать место отправления и место прибытия.

маршрут на карте

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

Так же можно настроить отображение пробок, нажав на кнопку выделенную на скрине ниже.

пробки на карте

Можно выбрать определенную точку на карте – маркер. Это может быть полезно, если необходимо указать адрес компании или организации.

Карта гугл

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

Способ вставить Google карту на сайт № 2

Не знаю по какой причине, но Гугл карты доступны по двум разным адресам (URL) и имеют несколько отличающийся интерфейс.

Как бы там ни было, рассмотрим добавление Гугл карт альтернативным способом.

Переходим по ссылке:

https://maps.google.com.ua

Ищем в поиске интересующий дом или объект.

Слева есть блок с кнопками:

добавить код карты на сайт

Нажимаем кнопку, выделенную красным (скриншот выше), а далее все просто: появится блок, в котором будет размещен html-код, который нужно скопировать и добавить на сайт. Процесс добавления аналогичен тому, что я описал в начале статьи.

код карты

Само собой можно задать маршрут:

проложить маршрут

В итоге получился такой результат:


Просмотреть увеличенную карту

Код несколько отличается от предыдущего, но так же позволяет сделать некоторые схожие настройки:

width="425" – изменяет значение в кавычках, для указания нужное ширины.

height="350" – высота.

Если вдруг встанет необходимость разместить блок с картой посредине (выравнивание по центру), то для этого достаточно заключить код с картой в теги <center>код карты…</center>

Способ добавить Google карту на сайт № 3

Не поверите, есть еще и 3-й способ размещения Google карты на Вордпресс сайте без плагина.

Правда эта карта будет несколько отличатся от предыдущих. Чем? Тем, что ее можно редактировать. Можно изменять, задавать своим метки (маркеры) со своими названиями и описаниями.

Доступна она по адресу: https://mapsengine.google.com/map/.

Зайдя на страничку по ссылке, необходимо создать Гугл карту:

создать новую карту для сайта

Вбиваем интересующий город или адрес.

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

редактировать карту

Первая кнопка (из выделенных) – маркер, позволяет создать точку на карте с возможностью задать название и описание:

марке на Google maps

Это более чем существенное преимущество по сравнению с предыдущими вариантами.

Вторая кнопка – выделение области:

маркировання область

3 – я кнопка – добавление маршрута.

маршрут от точки до точки

Прежде чем добавлять карту на сайт, необходимо нажать кнопку «поделиться», расположенную в правой верхней части экрана. И задать название для ново созданной карты:

название карты

Измените уровень доступа на «общедоступный в интернете»:

общедоступная карта

Осталось дело за малым: необходимо получить код Google карты, сделать это можно нажав на значок папки:

добавить на сайт Google map

После чего, копируем из всплывшего окошка код карты и вставляем на свой сайт, в результате получаем следующее:

Фух…пожалуй на этом все, добавление Яндекс карты я распишу ближе к вечеру, а статья про плагины Яндекс и Google карт будет завтра.

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

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

    1. Разработчики объединили первый и второй способы, ввиду того, что они были абсолютно идентичны. А в вашем случае, следует использовать 3-й. С помощью набора инструментов можно сделать достаточно много настроек, в том числе и организовать несколько маркеров.

  2. Как зафиксировать карту Google, чтобы при скролинге она не меняла масштаб.

    1. Эти карты через iframe вставляются. Надо читать документацию для разработчиков.
      Могу предложить воспользоваться онлайн-сервисом: http://mapbuildr.com/buildr
      Там, поставив параметр none в Mouse wheel to zoom можно отключить прокрутку мыши.

  3. Юрий, здравствуйте. Нужна ваша помощь. Выполнила все по третьему способу до «копируем из всплывшего окошка код карты». мне нужно вставить в сообщение на сайте. как это сделать. если я просто вставляю скопированное, то карта не отображается. Пожалуйста, подскажите, что нужно сделать

    1. Надежда, здравствуйте. Все должно работать. Возможно у вас где-то в стилях прописаны свойства для iframe. Например, нулевая высота, ширина или display:block. Скиньте ссылку на страницу, посмотрю.

  4. Добрый день, Юрий.
    Спасибо, полезная информация.
    Карта легко вставляется в страницу или в запись, однако в плагине Business Directory Plugin в поле записи карта не отображается.
    Хочу сделать каталог компаний с выводом карты и адреса на карте, однако в карточке компании карту не отображает.
    Подскажите каким образом можно решить проблему.

    1. Роман, здравствуйте. С плагином Business Directory Plugin пока не сталкивался, но если скинете адрес странички, то я попробую помочь.

      1. К примеру есть страница, которая передает параметр GET область и город, как мне сделать чтобы карта автоматически показывала выбранный город или область, так как составлять на каждый город довольно изощренное занятие. ??? Спасибо!

      2. Юрий, добрый день! А Вы нашли ответ на вопрос по плагину Business Directory Plugin — в карточке компании не отображает карту гугл. Хотя идентично делаю в обычных страницах — и всё работает.

  5. Добрый день, Юрий.
    У меня блок «резиновый», то есть меняет свою ширину «Width» при изменении.
    Возможно ли карту вставить таким образом, что-бы менялся параметр «Width» при изменении , то есть, что-бы ширина карты менялась (уменьшалась)?

    1. Здравствуйте. Задайте width в процентном соотношении.
      Пример:
      width:90%;
      Можно дополнительно использовать max-width и min-width для установки крайних значений.

  6. Добрый день, Юрий.
    Очень полезный пост. Но хотелось бы увидеть как реализовать такой пример как http://veka.ua/windows/kiev.html
    Может подскажите или сошлетесь информацию. Спасибо за статью

  7. Игорь, здравствуйте. Вот пример по реализации изменения стиля маркера:
    https://developers.google.com/maps/documentation/javascript/examples/icon-simple?hl=ru
    А ссылки компаний, я так понимаю, выводятся с помощью обычного виджета:
    https://developers.google.com/maps/documentation/javascript/examples/save-widget?hl=ru
    Придется его под себя доработать.

  8. День добрый, Юрий! Есть шаблон с картой Google на скрипте gmaps.js . Как мне поменять в скрипте карту на свою? Сенкью!

    1. Здравствуйте. Если вам не нужны все эти навороты из API, то просто используйте frame, как описано в этой статье. А по поводу gmaps.js тут посмотрите:
      http://habrahabr.ru/post/145152/

  9. Добрый день, Юрий! Подскажите пожалуйста, если на карте уже ест точка с названием фирмы — как создать на карте другую точку с другой фирмой по тому же адресу? Заранее спасибо!

  10. Никак, маркеры будут друг друга перекрывать. Сделайте один маркер для двух фирм. Или 2 отдельные карты для каждой из них.

  11. Доброй ночи, Юрий! Подскажите пожалуйста , почему при измененении в коде координат местоположения, на сайте местоположение остается прежним??

  12. Добрый день, Юрий!
    Помогите решить такую задачу. Сделал карту, вставил на сайт. Но хочется, что бы она не была доступна для копирования. Т.Е. не должно быть кнопки поделиться. На многих сайтах эта задача реализована.
    С уважением, Виктор.

  13. Спасибо, попробую.
    Не сталкивались? Вот пример на моем сайте

    http://www.kraysolnca.com/rynok-sudaka.html

    а вот на тонкости.ру

    http://tonkosti.ru/Карта_Айя-Напы

    , посмотрите, может я что-то упустил и где-то есть возможность скопировать код вставки на свой сайт?

  14. PS Не то что бы я хотел бы воспользоваться их картой, не хочется что бы кто то пользовался моими.

  15. Виктор, прошу рекомендации (пример) для использования карты для мониторинга транспорта на сайте предприятия с помощью трекеров в автомобиле, желательно с маршрутом, скоростью и т.д. С уважением.

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

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