1

Всем привет,я тут первый раз верстаю макет, на двух разных страницах есть карта яндекс. Но вторая карта не загружается, если удалить код из 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:[email protected]">E-mail: [email protected]</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>

5
  • Код надо уставлять текстом
    – Alexey Ten
    27 дек 2018 в 12:02
  • спасибо большое)
    – Anario
    27 дек 2018 в 12:12
  • А вы пробовали для начала в консоль посмотреть на предмет ошибок?
    – Alexey Ten
    27 дек 2018 в 12:36
  • Uncaught TypeError: Cannot read property 'offsetWidth' of null
    – Anario
    27 дек 2018 в 12:45
  • 1
    Вангую, что на второй странице нет div с id=map1
    – Alexey Ten
    27 дек 2018 в 15:16

1 ответ 1

3

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

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>

5
  • когда удаляю переменную myMap1 - то вторая карта работает
    – Anario
    27 дек 2018 в 15:10
  • <div id="map1" style="width: 100%; height: 460px"> <div class="map-block"> <div id="map2" style="width: 700px; height: 354px"></div> </div>
    – Anario
    27 дек 2018 в 15:11
  • Попробуйте добавить проверку существования div для отображения карты, как советует @AlexeyTen. Пример проверки добавил в код примера
    – eustatos
    27 дек 2018 в 16:22
  • с вашей проверкой(копировал только js код без html) - заработали две карты
    – Anario
    28 дек 2018 в 14:57
  • 1
    Отлично ) Не стесняйтесь отмечать правильные ответы, как правильные, а полезные, как полезные
    – eustatos
    28 дек 2018 в 15:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.