Twitter Bootstrap и Google Maps
У меня есть навигационная панель и 100% x 100% карта google в моем приложении. Я хотел бы добавить боковую панель справа с разными фильтрами. Причина добавления его с правой стороны заключается в лучшем опыте работы на более мелких экранах, поскольку подходящий контент помещается ниже.
Карта отображает полный экран с текущими значениями (%), когда я просто добавляю карту после последней панели навигации, например:
Отображается карта:
<div class="navbar">
<nav bar stuff......>
</div>
<div id="map-canvas"></div>
Карта не отображается, если я пытаюсь добавить ее внутри диапазона, чтобы контролировать ее размер и добавить боковую панель.
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div id="map-canvas"></div>
</div>
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
</div>
Я не хочу добавлять фиксированное значение к карте, так как оно побеждает цель жидкости.
Заранее благодарим за любые советы о том, как я могу сделать карту видимой внутри контейнерной жидкости.
Ответы
Ответ 1
Отправленный ответ, который я нашел как комментарий раньше, но чтобы сделать его более заметным, вот ответ: https://github.com/twbs/bootstrap/issues/2475
Вы должны добавить обратный вызов javascript, который будет вручную устанавливать высоту на карте-холсте при изменении размера окна, например.
$(window).resize(function () {
var h = $(window).height(),
offsetTop = 60; // Calculate the top offset
$('#map-canvas').css('height', (h - offsetTop));
}).resize();
Ответ 2
Я уже сделал это.
В первый раз я стараюсь так же, как и ваша проблема. Карта GPS в загрузочном содержимом-вкладке.
И я просто загружаю или начинаю карту с событием щелчка табуляции чем-то вроде этого.
var map = undefined;
var marker = undefined;
var position = [13.821805500000002, 100.84968549999999];
var latlng;
function initialize() {
latlng = new google.maps.LatLng(position[0], position[1]);
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: true,
title: "Your current location!"
});
google.maps.event.addListener(marker, 'drag', function() {
$('#txtlat').val(marker.position.lat());
$('#txtlng').val(marker.position.lng());
}
);
}
$(document).ready(function() {
$("div.tabbable ul.nav a[href=#gps_tab]").bind('click', function() {
initialize();
$("#map_canvas").show();
});
});