Клуб API Карт

ymaps и адаптивность bootstarp

portartoor
13 октября 2015, 17:33

Есть два блока:

 

<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 остается совсем пустой) :

$( 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(), и вот так с разбивкой - все равно максиммум которого удается добится это отображение карты в десктопной версии. В мобильной постоянно пустой контейнер.

Кто нибудь может подсказать, где ошибка? 
2 комментария
Подписаться на комментарии к посту

 Привел код к такому виду, при генерации страницы проверяет что конкретно видно, и в зависимости от этого генерит мапу. К сожалению видна только в презентации visible-lg

в остальных несмотря на внешнюю работоспособность - все равно не генерирует вообще ничего, ошибок тоже нет.

 

... 

$( document ).ready(function() {if ($('.visible-lg').is(':visible')) {console.log('lg is visible');var map;ymaps.ready(mapInit);function mapInit() {console.log('map lg generate');var center = [54.70, 20.50];var map = new ymaps.Map('map-lg', {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 if ($('.visible-md').is(':visible')) {console.log('md is visible');var map;ymaps.ready(mapInitmd);function mapInitmd() {console.log('map md generate');var center = [54.70, 20.50];var map = new ymaps.Map('map-md', {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 if ($('.visible-sm').is(':visible')) {console.log('sm is visible');var map;ymaps.ready(mapInitsm);function mapInitsm() {console.log('map sm generate');var center = [54.70, 20.50];var map = new ymaps.Map('map-sm', {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 if ($('.visible-xs').is(':visible')) {console.log('xs is visible');var map;ymaps.ready(mapInitxs);function mapInitxs() {console.log('map xs generate');var center = [54.70, 20.50];var map = new ymaps.Map('map-xs', {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 });});}}});

 

проблему решил так:

$( document ).ready(function() {
if ($('.visible-lg').is(':visible')) {console.log('lg is visible');$('.visible-md').html('');$('.visible-sm').html('');$('.visible-xs').html('');ymaps.ready(mapInit);function mapInit() {console.log('map lg generate');var center = [54.70, 20.50];var map = new ymaps.Map('map-lg', {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 if ($('.visible-md').is(':visible')) {console.log('md is visible');$('.visible-lg').html('');$('.visible-sm').html('');$('.visible-xs').html('');ymaps.ready(mapInitmd);function mapInitmd() {console.log('map md generate');var center = [54.70, 20.50];var map = new ymaps.Map('map-md', {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 if ($('.visible-sm').is(':visible')) {console.log('sm is visible');$('.visible-lg').html('');$('.visible-md').html('');$('.visible-xs').html('');ymaps.ready(mapInitsm);function mapInitsm() {console.log('map sm generate');var center = [54.70, 20.50];var map = new ymaps.Map('map-sm', {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 if ($('.visible-xs').is(':visible')) {console.log('xs is visible');$('.visible-lg').html('');$('.visible-md').html('');$('.visible-sm').html('');ymaps.ready(mapInitxs);function mapInitxs() {console.log('map xs generate');var center = [54.70, 20.50];var map = new ymaps.Map('map-xs', {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 });});}}});

 можно и изящней, будет время переделаю