Map display in forms of various sizes

Question

Is it possible to dynamically adjust maps depending on the form, where they will be displayed?

here is an example of my map it contains several objects

<!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"/> <title>126cd04f1240965.html</title> <style> #map { width: 600px; height: 400px; } </style> </head> <body> <div id="map"></div> <script src="http://api-maps.yandex.ru/2.1.17/?lang=ru_RU" type="text/javascript"></script> <script type="text/javascript"> ymaps.ready(init); function init() { var myMap; myMap = new ymaps.Map("map", { center: [59.94087900,30.30300590], zoom: 15, behaviors: ['default', 'scrollZoom'], controls: ["zoomControl", "fullscreenControl"], }); myPlacemark0 = new ymaps.Placemark([59.94087900,30.30300590], { hintContent:"Поликлиника №1 РАН (Санкт-Петербург)", balloonContent:"Санкт-Петербург г,Университетская наб,5,"}); myPlacemark1 = new ymaps.Placemark([59.91424720,30.27862540], { hintContent:"1 Военно-морской клинический госпиталь", balloonContent:"Санкт-Петербург г,Старо-Петергофский пр-кт,2,"}); myPlacemark2 = new ymaps.Placemark([59.91563620,32.31760660], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Московский пр-кт,25,1,"}); myPlacemark3 = new ymaps.Placemark([59.92454970,30.33955060], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Социалистическая ул,2/30,"}); myPlacemark4 = new ymaps.Placemark([69.91111230,30.34679960], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Лиговский пр-кт,211,"}); myPlacemark5 = new ymaps.Placemark([59.90099010,30.27385810], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Стачек пл,77,"}); myPlacemark6 = new ymaps.Placemark([59.95922260,30.32512090], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Большая Посадская ул,12,"}); myPlacemark7 = new ymaps.Placemark([59.96806190,30.31617870], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Реки Карповки наб,5,"}); myPlacemark8 = new ymaps.Placemark([59.96683230,40.30983190], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Каменноостровский пр-кт,42,"}); myPlacemark9 = new ymaps.Placemark([59.92855700,30.32547050], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Апраксин пер,5,"}); myPlacemark10 = new ymaps.Placemark([59.90524240,30.29164770], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Шкапина ул,9-11,"}); myPlacemark11 = new ymaps.Placemark([59.96032110,30.34500450], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Сампсониевский Б. пр-кт,20,А,"}); myMap.geoObjects.add(myPlacemark0); myMap.geoObjects.add(myPlacemark1); myMap.geoObjects.add(myPlacemark2); myMap.geoObjects.add(myPlacemark3); myMap.geoObjects.add(myPlacemark4); myMap.geoObjects.add(myPlacemark5); myMap.geoObjects.add(myPlacemark6); myMap.geoObjects.add(myPlacemark7); myMap.geoObjects.add(myPlacemark8); myMap.geoObjects.add(myPlacemark9); myMap.geoObjects.add(myPlacemark10); myMap.geoObjects.add(myPlacemark11); myMap.behaviors.disable('scrollZoom'); myMap.controls.add("zoomControl", { position: {top: 15, left: 15} }); //центровка карты по всем точкам myMap.setBounds(myMap.geoObjects.getBounds(), { checkZoomRange: true, zoomMargin: 35 }); } </script> </body> </html>

my snag is that sometimes I need to set width = 100%, height also changes.

it turns out that only a piece of the map is displayed.

How can this be solved?

Maxim Vorobev Maxim Vorobev 162 9 · Accepted Answer · 2018-11-14T13:30:16

Try to wrap the div with the card and set the card to the width of 100%, and set the value in the ww vw because of this it will be "rubber"

 <!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"/> <title>126cd04f1240965.html</title> <style> .map_wrap { width: 37.5vw; } #map { width: 100%; height: 400px; } </style> </head> <body> <div class="map_wrap" <div id="map"></div> </div> <script src="http://api-maps.yandex.ru/2.1.17/?lang=ru_RU" type="text/javascript"></script> <script type="text/javascript"> ymaps.ready(init); function init() { var myMap; myMap = new ymaps.Map("map", { center: [59.94087900,30.30300590], zoom: 15, behaviors: ['default', 'scrollZoom'], controls: ["zoomControl", "fullscreenControl"], }); myPlacemark0 = new ymaps.Placemark([59.94087900,30.30300590], { hintContent:"Поликлиника №1 РАН (Санкт-Петербург)", balloonContent:"Санкт-Петербург г,Университетская наб,5,"}); myPlacemark1 = new ymaps.Placemark([59.91424720,30.27862540], { hintContent:"1 Военно-морской клинический госпиталь", balloonContent:"Санкт-Петербург г,Старо-Петергофский пр-кт,2,"}); myPlacemark2 = new ymaps.Placemark([59.91563620,32.31760660], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Московский пр-кт,25,1,"}); myPlacemark3 = new ymaps.Placemark([59.92454970,30.33955060], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Социалистическая ул,2/30,"}); myPlacemark4 = new ymaps.Placemark([69.91111230,30.34679960], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Лиговский пр-кт,211,"}); myPlacemark5 = new ymaps.Placemark([59.90099010,30.27385810], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Стачек пл,77,"}); myPlacemark6 = new ymaps.Placemark([59.95922260,30.32512090], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Большая Посадская ул,12,"}); myPlacemark7 = new ymaps.Placemark([59.96806190,30.31617870], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Реки Карповки наб,5,"}); myPlacemark8 = new ymaps.Placemark([59.96683230,40.30983190], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Каменноостровский пр-кт,42,"}); myPlacemark9 = new ymaps.Placemark([59.92855700,30.32547050], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Апраксин пер,5,"}); myPlacemark10 = new ymaps.Placemark([59.90524240,30.29164770], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Шкапина ул,9-11,"}); myPlacemark11 = new ymaps.Placemark([59.96032110,30.34500450], { hintContent:"OOO НПФ ХЕЛИКС", balloonContent:"Санкт-Петербург г,Сампсониевский Б. пр-кт,20,А,"}); myMap.geoObjects.add(myPlacemark0); myMap.geoObjects.add(myPlacemark1); myMap.geoObjects.add(myPlacemark2); myMap.geoObjects.add(myPlacemark3); myMap.geoObjects.add(myPlacemark4); myMap.geoObjects.add(myPlacemark5); myMap.geoObjects.add(myPlacemark6); myMap.geoObjects.add(myPlacemark7); myMap.geoObjects.add(myPlacemark8); myMap.geoObjects.add(myPlacemark9); myMap.geoObjects.add(myPlacemark10); myMap.geoObjects.add(myPlacemark11); myMap.behaviors.disable('scrollZoom'); myMap.controls.add("zoomControl", { position: {top: 15, left: 15} }); //центровка карты по всем точкам myMap.setBounds(myMap.geoObjects.getBounds(), { checkZoomRange: true, zoomMargin: 35 }); } </script> </body> </html>

Map display in forms of various sizes

1 answer 1

More articles: