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

как установить гугл карту на лендинг пейджВсем привет. Несколько дней назад я написал статью о том, как добавить Яндекс карту на свой лендинг пейдж. Но осталось не мало пользователей, которые предпочитают пользоваться Google. В России  это, примерно, 70/30 процентов в пользу Яндекса, а в Украине ситуация – зеркальная.

А так как я стараюсь угодить целевой аудитории, то логично, что должна выйти статья и о том, как подключить Гугл карту на сайт.

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

Итак, переходим на сайт google.ru/maps/ и видим следующие окошко:

как установить гугл карту

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

Теперь вы можете воспользоваться дополнительными инструментами, которые предлагает Гугл для лучшей визуализации и восприятия ваших карт.

как добавить Гугл карту на лендинг пейдж

Например, при помощи инструмента "Линия", вы можете нарисовать маршрут от остановки до вашего офиса или схему проезда для автомобилистов. Не забывайте изменить масштаб.

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

как установить гугл карту на лендинг пейдж

Нажимаем на ссылку и перед нами откроется следующее окошко:

как создать карту гугл

На этом шаге нас интересует HTML - код для добавления на сайт нашей карты. Остается только скопировать и добавить его в нужное место. Предварительно можно задать размеры width и height, для того, чтобы органично вписать её  в дизайн. Теперь вы знаете как установить Гугл карту на лендинг пейдж, и клиенты стали больше доверять вам. А на сегодня - все! Пока.

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Автор: psychology-msk.ru

Комментарии: 7

  1. Сергей

    Добрый день.
    Сейчас очень часто на лендингах используется карта как отдельный блок на всю ширину экрана. В связи с этим появляется необходимость отключить зум колесиком мышки, чтоб прокрутка не «застревала» на блоке с картой.
    Это относительно не сложно, если на карту необходимо нанести один объект.
    У меня ситуация другая — необходимо нанести две точки самовывоза (в одном городе), чтоб карта была в зуме при котором видно обе точки. Также нужно не забывать про адаптивность, чтоб все нормально отображалось и на мобильных устройствах. Соответственно ширину нужно задавать в процентах (100% ширины, если хотим на весь экран).
    Описанным способом это сделать не возможно. Приходится использовать сторонние сервисы или API Google карт, в котором я не смог разобраться.
    Вот здесь и получается заминка. Два классных сервиса которые я нашел: mapbuildr.com и batchgeo.com. И все бы хорошо, но у обеих по проблеме. У первого нет возможности выставить размеры в процентах (смещается на мобильных), а у второго — не нашел возможности отключить зум колесиком.

    Может поможете решить проблему, возможно есть альтернативные варианты.
    Нужно: 2 объекта на карте, отключения зума колесом мыши, нормальное отображение на мобильных устройствах (чтоб в экран тоже помещались оба маркера).
    Буду очень благодарен.

    • dimadv7

      Насколько мне известно API google и яндекс, пока что, не позволяют добиться адаптивности. Но не уверен, скорее всего можно задать ширину не в пикселях, а в процентах. Решение такое могу предложить:

      Сервис на котором есть возможность задать размеры в процентах. Выбираем его. А потом под мобильные устройства при помощи медиазапросов уменьшаем контейнер в котором лежит карта.

      @media screen and (max-width: 600px) { 
      .класс_контейнера { width: нужная ширина }
      }
      

      Что означает, если ширина экрана устройства меньше или равна 600px, задать ширину контейнера такой-то. И таких запросов может быть несколько, под разные разрешения. Попробуйте.

      не забывайте центрировать сам контейнер

    • Сергей

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

    • Сергей

      Вот есть то что мне нужно, но здесь нужно ковырять API, не смог разобраться: codyhouse.co/gem/custom-google-map/

    • dimadv7

      Когда вставляешь код в комментарий, заключи его в [ html ] [ /html ] Только без пробелов. А то обрезается. А я гляну.

  2. Сергей

    Как же его изменить медиазапросами, если код имеет следующий вид и все параметры на сервере сервиса: [ html ] [ /html ]
    А если скопировать код через «проинспектировать элемент» и вставить без iframe, то много искажений.

    • dimadv7

      Я же просил без пробелов 🙂 Ну да ладно. Вы задайте блок, например map, сделайте ему ширину max-width 3000px; а min-width: 480px. думаю этого будет достаточно для всех маниторов, то что внутри — ваша карта — займет 100%, а потом попробуй под разные разрешения менять этот блок. Может получится. Если нет, пробуй в процентах менять. Если опять — нет, тогда будем еще думать. А может и не придется даже медиазапросы использовать. С мин и макс width

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