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

Для начала вместо использования <iframe>, рекомендованного при встраивании Google карт, создадим свой собственный содержащий карту блок:

<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;
}

Чтобы карта была длиннее, нужно увеличить значение свойства внутреннего отступа сверху. Блоку с идентификатором #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 = 'Здесь должен быть какой-то адрес',
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);

И получим следующий результат:

Возможно, для большей наглядности лучше рассмотреть получившийся результат по ссылке на сайт CodePen в новом окне.

Обратите внимание на несколько важных моментов:

1. Значения, связанные с google.maps.LatLng — это широта и долгота Вашей цели. Они будут похожи, но могут быть не точно такими же, как значения, которые присутствуют в ссылке для того же места на сайте Google карты. Например:

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

Первое число в этой ссылке — это широта, второе — долгота местоположения. Вы увидите похожие числа, когда попробуете встроить это место в  Google карту:

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

Во встраиваемом коде первой идет долгота, сразу за символами 2d в ссылке, а за ней — широта.

 2. Элемент массива zoom — это уровень приближения карты по умолчанию. Он есть и в обоих ссылках выше.

 3. Значение contentString — это подпись для цели, которая появится при нажатии на нее.

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Адаптивный дизайн для встроенных видео с сайтов Youtube и Vimeo
• Качественные печатные версии веб-страниц на фильтрах CSS
• Использование истинных цветов при печати веб-страниц