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

156
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>

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

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

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

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

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

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

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

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

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

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

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

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

 147