Как сделать блок с картой?

Question

[olya_097]

Как сделать блок с картой?
Примерно так? а как сделать чтобы она была не картинкой, а интерактивно была добавлена? тэг какой добавить ? и куда именно в данный код?

<section class="map">
        <picture>
          	<source media="(min-width:1200px)" srcset="img/bg-map-desktop.jpg">
         	 <source media="(min-width:768px)" srcset="img/bg-map-tablet.jpg">
          	
          <img class="map__picture" width="320" height="350" src="img/bg-map-desktop.jpg" alt="Map 0f Sedona">
        </picture>

	</section>

Answer 1

[Eugene Chefranov]

Я делаю так:

HTML (тут передаем долготу и широту)

<section class="map" id="map" data-long="3445" data-lat="4355"></section>

В JS такое:

var gmap = document.getElementById('map');
 var latitude = parseFloat(gmap.dataset.lat);
 var longitude = parseFloat(gmap.dataset.long);

 function initMap() {

     var place = {
         lat: latitude, // широта
         lng: longitude // долгота
     };
     var map = new google.maps.Map(
         document.getElementById('map'), {
             zoom: 18,
             center: place
         });
     var marker = new google.maps.Marker({
         position: place,
         map: map
     });
 }

Ну и само собой подключаем Google Maps API

Comments

[olya_097]

а как сделать, если на разных экранах разные размеры карты? вообщем чтоб было адаптивной

[Eugene Chefranov]

olya_097, через CSS с помощью медиа-запросов меняйте высоту и ширину карты. В данном случае достаточно менять только высоту, ширина будет 100%.

[olya_097]

тоесть писать section или .map и им задавать размеры?

[Eugene Chefranov]

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

[olya_097]

Eugene Chefranov, спасибо
а гугл карты уже платные?

[Eugene Chefranov]

olya_097, да если вы превысите лимит, а так бесплатно.

[olya_097]

Eugene Chefranov, в каком смысле превысите лимит?

[Eugene Chefranov]

olya_097,

Текущий лимит бесплатного использования 750 тыс. запросов ежемесячно снижается до 28 тыс.

https://habr.com/post/417715/

[olya_097]

Eugene Chefranov, запросы
имеется ввиду, если посетителей в месяц будет больше 28 000, то гугл карта отключится?

[Eugene Chefranov]

olya_097, не посетителей, а загрузок страницы. Не отключится, а поверх карты появится много надписей, что исчерпали лимит.

[olya_097]

Eugene Chefranov, под загрузками страницы имеется ввиду клик по карте?
извините, если глупый вопрос)

[Eugene Chefranov]

olya_097, нет, загрузка самой страницы, одно открытие/перезагрузка страницы с картой - один запрос

[olya_097]

Eugene Chefranov, а если карта на главной?

[Eugene Chefranov]

olya_097, сколько раз откроют/перезагрузят главную страницу столько и запросов

Answer 2

[Михаил Лялин]

https://yandex.ru/map-constructor/
https://support.google.com/maps/answer/144361?co=G...