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

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

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

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

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

<div id="map_container">
    <div id="map"></div>
</div>

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

#map_container {
	position: relative;
	padding-top: 50%;
}
#map {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}

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

, мы воспользуемся Google Maps API. В самом низу страницы добавьте код:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

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

function initialize() {
    var myLatlng = new google.maps.LatLng(53.3333,-3.08333),
    mapOptions = {
        zoom: 11,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        }
var map = new google.maps.Map(document.getElementById('map'), mapOptions),
contentString = 'Some address here..',
infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 500
});

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map
});

google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
});

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

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

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

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

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

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1
d3022.1422937950165!2d-73.98731968484512!3d40.75889497932676 width="600" 
height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

В этом коде сначала идет долгота сразу после «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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree