Hello everyone, I'm here for the first time I am making a layout, there is a Yandex map on two different pages. But the second card does not load, if you delete the code from js of the first card, then the second one loads what’s wrong?

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>

  • The code must be tied with the text - Alexey Ten
  • thanks a lot) - Anario
  • Have you tried to start looking at the console for errors? - Alexey Ten
  • Uncaught TypeError: Cannot read property 'offsetWidth' of null - Anario
  • one
    Vanguey, that on the second page there is no div with id = map1 - Alexey Ten

1 answer 1

I suppose that the reason for the error is incorrectly set block sizes for displaying maps.

 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>

  • when I delete the myMap1 variable, then the second map works - Anario
  • <div id = "map1" style = "width: 100%; height: 460px"> <div class = "map-block"> <div id = "map2" style = "width: 700px; height: 354px"> < / div> </ div> - Anario
  • Try adding a div existence check to display a map, as @AlexeyTen advises. Sample verification added to the example code - eustatos
  • with your check (copied only js code without html) - two cards earned - Anario
  • one
    Excellent) Feel free to mark the correct answers as correct and useful as useful - eustatos