Как создать адаптивную Google карту для сайта с автоматическим центрированием

Как создать адаптивную Google карту для сайта с автоматическим центрированием

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

Однако есть существенная проблема: любое изменение размера горизонтального окна отрезает края от карты. А это означает, что необходимо передвинуть карту или изменить ее масштаб на исходные координаты. Но если изменить сам подход, то для решения проблемы нам потребуется совсем немного JavaScript’а.

Первое – вместо предлагаемого Google Maps <iframe> необходимо создать свой собственный контейнер для карты:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

Чтобы сделать карту выше, увеличьте значение padding-top. Контейнер map_container можно стилизовать по вашему вкусу (при условии, что ширина бордера задается в процентах и т.д.). Для того, чтобы загрузить карту в созданный нами div, мы воспользуемся Google Maps API. В самом низу страницы добавьте код:

Под ним добавьте этот скрипт:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Несколько важных моментов:

1. Значения, связанные с google.maps.LatLng, отвечают за широту и долготу точки на карте. Значения те же самые, что и в URL адресе локации на сайте Google Maps (иногда могут немного отличаться). К примеру:

https://www.google.com/maps/place/Times+Square/@40.758895,-73.9873197,17z

Первая цифра в адресе относится к широте; вторая – долгота. Те же самые цифры вы увидите в коде вставки карты с сайта Google Map:

В этом коде сначала идет долгота сразу после «2d», а затем идет широта.

2. Zoom – уровень зума отображения карты по умолчанию. В обоих вариантах данное значение обозначается буквой z.

3. contentString – название места, появляющееся при клике на него.

С Google Maps API можно делать гораздо более потрясающие вещи, но это я оставлю на будущие статьи.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

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

Комментарии (3)

  1. grayCat

    Спасибо за полезную статью!)

  2. Сергей

    Не перестаю восхищаться Кудлаем! Андрей, ведь и эту статью ты написал?

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree