Можно ли как то динамически подстраивать карты в зависимости от формы, где они будут отображаться?
вот пример моей карты она содержит несколько объектов
<!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>
моя загвоздка в том что иногда мне нужно ставить width = 100%, height тоже меняется.
получается что отображается только кусок карты.
как это можно решить?