От автора: в принципе, нет ничего сложного в том, чтобы создать адаптивную Google карту для сайта: необходимо всего лишь удалить атрибуты высоты и ширины, которые Google прописывает в коде, и добавить свои стили и разметку.
Однако есть существенная проблема: любое изменение размера горизонтального окна отрезает края от карты. А это означает, что необходимо передвинуть карту или изменить ее масштаб на исходные координаты. Но если изменить сам подход, то для решения проблемы нам потребуется совсем немного JavaScript’а.
Первое – вместо предлагаемого Google Maps <iframe> необходимо создать свой собственный контейнер для карты:
|
1 2 3 |
<div id="map_container"> <div id="map"></div> </div> |
Чтобы добавить карту в этот контейнер, необходимо спозиционировать и задать размеры его элементов. Для этого мы воспользуемся довольно стандартным CSS шаблоном:
|
1 2 3 4 5 6 7 8 9 10 |
#map_container { position: relative; padding-top: 50%; } #map { position: absolute; width: 100%; height: 100%; top: 0; } |
Чтобы сделать карту выше, увеличьте значение padding-top. Контейнер map_container можно стилизовать по вашему вкусу (при условии, что ширина бордера задается в процентах и т.д.). Для того, чтобы загрузить карту в созданный нами div, мы воспользуемся Google Maps API. В самом низу страницы добавьте код:
|
1 |
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&;sensor=false"></script> |
Под ним добавьте этот скрипт:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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 (иногда могут немного отличаться). К примеру:
//www.google.com/maps/place/Times+Square/@40.758895,-73.9873197,17z
Первая цифра в адресе относится к широте; вторая – долгота. Те же самые цифры вы увидите в коде вставки карты с сайта Google Map:
|
1 2 3 |
<iframe src="//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 можно делать гораздо более потрясающие вещи, но это я оставлю на будущие статьи.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
Комментарии (3)