Всем привет. Несколько дней назад я написал статью о том, как добавить Яндекс карту на свой лендинг пейдж. Но осталось не мало пользователей, которые предпочитают пользоваться Google. В России это, примерно, 70/30 процентов в пользу Яндекса, а в Украине ситуация – зеркальная.
А так как я стараюсь угодить целевой аудитории, то логично, что должна выйти статья и о том, как подключить Гугл карту на сайт.
Как добавить Google карту на сайт?
Итак, переходим на сайт google.ru/maps/ и видим следующие окошко:
Теперь необходимо написать физический адрес вашей компании в поле, указанное стрелочкой. Я, обычно, использую классический интерфейс. Так привык. Вы тоже можете воспользоваться этим интерфейсом. На скриншоте показано, где это можно сделать.
Теперь вы можете воспользоваться дополнительными инструментами, которые предлагает Гугл для лучшей визуализации и восприятия ваших карт.
Например, при помощи инструмента "Линия", вы можете нарисовать маршрут от остановки до вашего офиса или схему проезда для автомобилистов. Не забывайте изменить масштаб.
После того, как все дополнительные настройки сделаны можно нажимать на ссылку, для того, чтобы получить код карты:
Нажимаем на ссылку и перед нами откроется следующее окошко:
На этом шаге нас интересует HTML - код для добавления на сайт нашей карты. Остается только скопировать и добавить его в нужное место. Предварительно можно задать размеры width и height, для того, чтобы органично вписать её в дизайн. Теперь вы знаете как установить Гугл карту на лендинг пейдж, и клиенты стали больше доверять вам. А на сегодня - все! Пока.
Оставляйте свои идеи и предложения для новых статей в комментариях. Мне будет очень интересно почитать о том, что вы хотите узнать, и, возможно, следующая статья будет как раз на эту тему. Спасибо что помогаете развивать блог.
7 комментариев
Добрый день.
Сейчас очень часто на лендингах используется карта как отдельный блок на всю ширину экрана. В связи с этим появляется необходимость отключить зум колесиком мышки, чтоб прокрутка не "застревала" на блоке с картой.
Это относительно не сложно, если на карту необходимо нанести один объект.
У меня ситуация другая - необходимо нанести две точки самовывоза (в одном городе), чтоб карта была в зуме при котором видно обе точки. Также нужно не забывать про адаптивность, чтоб все нормально отображалось и на мобильных устройствах. Соответственно ширину нужно задавать в процентах (100% ширины, если хотим на весь экран).
Описанным способом это сделать не возможно. Приходится использовать сторонние сервисы или API Google карт, в котором я не смог разобраться.
Вот здесь и получается заминка. Два классных сервиса которые я нашел: mapbuildr.com и batchgeo.com. И все бы хорошо, но у обеих по проблеме. У первого нет возможности выставить размеры в процентах (смещается на мобильных), а у второго - не нашел возможности отключить зум колесиком.
Может поможете решить проблему, возможно есть альтернативные варианты.
Нужно: 2 объекта на карте, отключения зума колесом мыши, нормальное отображение на мобильных устройствах (чтоб в экран тоже помещались оба маркера).
Буду очень благодарен.
Насколько мне известно API google и яндекс, пока что, не позволяют добиться адаптивности. Но не уверен, скорее всего можно задать ширину не в пикселях, а в процентах. Решение такое могу предложить:
Сервис на котором есть возможность задать размеры в процентах. Выбираем его. А потом под мобильные устройства при помощи медиазапросов уменьшаем контейнер в котором лежит карта.
@media screen and (max-width: 600px) { .класс_контейнера { width: нужная ширина } }Что означает, если ширина экрана устройства меньше или равна 600px, задать ширину контейнера такой-то. И таких запросов может быть несколько, под разные разрешения. Попробуйте.
не забывайте центрировать сам контейнер
Как же его изменить медиазапросами, если код имеет следующий вид и все параметры на сервере сервиса:
Вот есть то что мне нужно, но здесь нужно ковырять API, не смог разобраться: codyhouse.co/gem/custom-google-map/
Когда вставляешь код в комментарий, заключи его в
[ html ] [ /html ]Только без пробелов. А то обрезается. А я гляну.Как же его изменить медиазапросами, если код имеет следующий вид и все параметры на сервере сервиса: [ html ] [ /html ]
А если скопировать код через "проинспектировать элемент" и вставить без iframe, то много искажений.
Я же просил без пробелов :) Ну да ладно. Вы задайте блок, например map, сделайте ему ширину max-width 3000px; а min-width: 480px. думаю этого будет достаточно для всех маниторов, то что внутри - ваша карта - займет 100%, а потом попробуй под разные разрешения менять этот блок. Может получится. Если нет, пробуй в процентах менять. Если опять - нет, тогда будем еще думать. А может и не придется даже медиазапросы использовать. С мин и макс width