Есть два блока:
<div class="visible-lg">
<div id="map" style="height: 500px; width: 500px;"></div>
</div>
<div class="visible-xs">
<div id="map2" style="height: 500px; width: 500px;"></div>
</div>
Которые соответственно должны показывать версию страницы для дектопа и для мобильника.
Следующим кодом пытаюсь выводить карту в зависимости от того который блок виден, но работает только для десктопной страницы, версия для visible-xs не генерирует карту (#map2 остается совсем пустой) :
Пробовал по разному, и в рамках одной функции mapInit(), и вот так с разбивкой - все равно максиммум которого удается добится это отображение карты в десктопной версии. В мобильной постоянно пустой контейнер.
Кто нибудь может подсказать, где ошибка?
Которые соответственно должны показывать версию страницы для дектопа и для мобильника.
Следующим кодом пытаюсь выводить карту в зависимости от того который блок виден, но работает только для десктопной страницы, версия для visible-xs не генерирует карту (#map2 остается совсем пустой) :
$( document ).ready(function() {
if ($('.visible-lg').is(':visible')) {
console.log('lg is visible');
var map;
ymaps.ready(mapInit);
function mapInit() {
console.log('map');
var center = [54.70, 20.50];
var map = new ymaps.Map('map', {
center: center,
zoom: 12
});
ymaps.geocode('Россия, Калининградская область, $city, $address', {results: 1}).then(function (res) {
var firstGeoObject = res.geoObjects.get(0),
coords = firstGeoObject.geometry.getCoordinates(),
bounds = firstGeoObject.properties.get('boundedBy');
map.geoObjects.add(firstGeoObject);
map.setBounds(bounds, {
checkZoomRange: true
});
});
}
}
else {
console.log('xs is visible');
var map2;
ymaps.ready(mapInits);
function mapInits() {
console.log('map2');
var center = [54.70, 20.50];
var map2 = new ymaps.Map('map2', {
center: center,
zoom: 12
});
ymaps.geocode('Россия, Калининградская область, $city, $address', {results: 1}).then(function (res) {
var firstGeoObject2 = res.geoObjects.get(0),
coords = firstGeoObject2.geometry.getCoordinates(),
bounds = firstGeoObject2.properties.get('boundedBy');
map2.geoObjects.add(firstGeoObject2);
map2.setBounds(bounds, {
checkZoomRange: true
});
});
}
}
}); Пробовал по разному, и в рамках одной функции mapInit(), и вот так с разбивкой - все равно максиммум которого удается добится это отображение карты в десктопной версии. В мобильной постоянно пустой контейнер.
Кто нибудь может подсказать, где ошибка?