Как сделать Google Map внутри MockUp Макбука

151

11 марта 2019, 03:30

Имеется мокап макбука и клиент хочет чтобы карта была непосредственно внутри макбука. Но я понятия не имею как это сделать? Есть какие-то предположения.

Answer 1

Для адаптации карты на сайте под любым разрешением можно использовать медиа-запросы @media. К примеру, если карта:

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

имеет фиксированную высоту или ширину:

#map {
  height: 600px;
  width: 100%;
}

то для экранов шириной 960px или меньше можно подобрать нужный размер карты:

 @media screen and (max-width: 960px) {
   #map {
     height: 280px;
     width: 100%;
   }
 }

Карты по-умолчанию отлично работают с различными разрешениями экранов. Что бы лучше стилизовать ее, стоит так же обратиться в документацию google maps api.

Вот некоторые ресурсы, которые помогут вам с адаптацией под экраны: htmlbook habr mozilla.org w3schools