Не работает вторая карта yandex

167

09 июля 2019, 16:00

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

var myMap1; 
var myMap2; 
ymaps.ready(init); 
function init () { 
    myMap1 = new ymaps.Map("map1", { 
		center: [55.81254956891398,37.8328265], 
		zoom: 17, 
		controls: [] 
	}); 
 
    myMap2 = new ymaps.Map("map2", { 
		center: [59.92979687173394,30.37630978241727], 
		zoom: 15, 
		controls: ['zoomControl'] 
	}); 
		var myPlacemark2 = new ymaps.Placemark([59.92979956418111,30.37499549999999], {  
			hintContent: 'Экоковрики', 
			balloonContent: 'Санкт Петербург, пр. Бакунина 5,<br> офис 512.<br>Тел: +7 495 268 07 31' 
		}, 
		{ 
			preset: 'islands#redIcon' 
		}); 
	 
		myMap2.geoObjects.add(myPlacemark2); 
 
     
};

первая страница 
 
<section class="contacts"> 
	<div class="container-fluid"> 
		<div id="map1" style="width: 100%; height: 460px"> 
			<div class="container-fluid"> 
				<div class="row-fluid"> 
					<div class="col-lg-6 col-lg-offset-6 col-md-6 col-md-offset-6 col-sm-6 col-sm-offset-6 col-xs-12 col-xs-offset-0 contacts-xs"> 
						<div class="contacts-block"> 
							<h2>Контакты</h2> 
							<a class="phone" href="tel:84952680731">+7 495 268-07-31</a> 
							<p class="desc">звонок по России бесплатный</p> 
							<a class="mail" href="mailto:info@kovrikeva.ru">E-mail: info@kovrikeva.ru</a> 
							<p class="time">Пн-Сб 9:00-18:30</p> 
							<p class="address">г. Москва, Щелковское шоссе д.100</p> 
						</div> 
					</div> 
				</div> 
			</div>	 
		</div> 
	</div> 
</section> 
 
вторая страница 
 
<section class="contacts-page"> 
    <div class="container"> 
        <div class="contacts-content"> 
            <h2>Контакты</h2> 
            <div class="address-block"> 
                <p class="country">Россия</p> 
                <p class="address"><span>Санкт Петербург,</span>пр. Бакунина 5, офис 512.</p> 
                <a class="phone" href="tel:84952680731">Тел: +7 495 268 07 31</a> 
            </div> 
            <div class="map-block"> 
                <div id="map2" style="width: 700px; height: 354px"></div> 
            </div> 
            <div class="requisites-block"> 
                <h3>Реквизиты компании</h3> 
            </div> 
        </div> 
    </div> 
</section>

Answer 1

Предполагаю, что причина ошибки - неверно заданные размеры блоков для отображения карт.

var myMap1; 
var myMap2; 
ymaps.ready(init); 
 
function init() { 
  if (document.getElementById('map1')) { 
      myMap1 = new ymaps.Map("map1", { 
        center: [55.81254956891398, 37.8328265], 
        zoom: 17, 
        controls: [] 
      }); 
    } 
 
    if (document.getElementById('map2')) { 
        myMap2 = new ymaps.Map("map2", { 
          center: [59.92979687173394, 30.37630978241727], 
          zoom: 15, 
          controls: ['zoomControl'] 
        }); 
        var myPlacemark2 = new ymaps.Placemark([59.92979956418111, 30.37499549999999], { 
          hintContent: 'Экоковрики', 
          balloonContent: 'Санкт Петербург, пр. Бакунина 5,<br> офис 512.<br>Тел: +7 495 268 07 31' 
        }, { 
          preset: 'islands#redIcon' 
        }); 
      } 
 
      myMap2.geoObjects.add(myPlacemark2); 
 
 
    };

body, 
html { 
  padding: 0; 
  margin: 0; 
  width: 100%; 
  height: 100%; 
} 
 
#map1, 
#map2 { 
  width: 200px; 
  height: 200px; 
} 
 
.map-wrapper { 
  display: inline-block; 
  padding: 1rm; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
}

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>" type="text/javascript"></script> 
<div class="map-wrapper"> 
  <div id="map1"></div> 
</div> 
<div class="map-wrapper"> 
  <div id="map2"></div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

В чем рекурсивная ошибка javascript

Пытаюсь добиться, чтобы при нажатии на область psewdophoto нажимался input , который внутри него, но браузер выдает ошибку в консоли(вроде, как я понимаю,...

153

javascript

Проверить наличие трех заглавных букв в строке

Объясните мне, почему этот код не работает и как это исправить:

183

javascript

Вывод json на страницу

Получаю json такого вида:

160

javascript

Маска для динамических полей input

Есть блок, который создает 5 input элементов при нажатии на кнопку, в этих input элементах у меня должна быть маска для вводаИспользую jquery mask Но, у меня...

159