Я пытаюсь реализовать представление карт Google на вкладке. Я использую платформу Google Material Design Lite для вкладок. У меня было несколько проблем, для которых я проконсультировался со следующими вопросами SO. Ни один из них не предлагал идеальных решений, но они частично исправили мои проблемы.
Информационное окно Google Map отображается неправильно
Проблемы с Google Maps API v3 + вкладки пользовательского интерфейса jQuery
Тем не менее, некоторые неприятные ошибки сохраняются.
Первый касается рендеринга самой карты. У меня была обычная карта, появляющаяся только в верхнем левом углу. Я изменил свой код javascript следующим образом:
$(function() {
$('.map-tab').click(function() {
initialize();
})
});
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}body {
font-family: sans-serif;
background: #eee;
}
a,
h1,
h2 {
color: #377ba8;
text-decoration: none;
}
h1,
h2 {
font-family: 'Georgia', serif;
margin: 0;
}
h1 {
border-bottom: 2px solid #eee;
}
h2 {
font-size: 1.2em;
}
fieldset {
/*float: left;*/
clear: both;
width: 100%;
margin: 0 0 -1em 0;
padding: 0 0 1em 0;
border-style: none;
border-top: 1px solid #BFBAB0;
/*background-color: #F2EFE9;*/
}
legend {
margin-left: 1em;
color: #000000;
font-weight: bold;
}
legend span {
/*position: absolute;*/
/*margin-top: 0.5em;*/
/*font-size: 135%;*/
}
fieldset ol {
padding: 0 0 0 2em;
list-style: none;
}
ul {
padding: 0 1em 0 1em;
list-style: none;
}
fieldset li div {
float: left;
clear: left;
width: 100%;
padding-bottom: 1em;
}
fieldset.submit {
float: none;
width: auto;
border: 0 none #FFF;
padding-left: 12em;
}
label {
float: left;
width: 10em;
margin-right: 1em;
text-align: right;
}
img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto\9;
/* ie8 */
}
td {
border: 1px;
}
.page {
margin: 2em auto;
width: 65em;
/*border: 5px solid #ccc;*/
/*padding: 0.8em;*/
background: white;
}
.mdl-layout__content {
background: white;
}
.entries {
list-style: none;
margin: 0;
padding: 0;
}
.entries li {
margin: 0.8em 1.2em;
}
.entries li h2 {
margin-left: -1em;
}
.add-entry {
font-size: 0.9em;
border-bottom: 1px solid #ccc;
}
.add-entry dl {
font-weight: bold;
}
.metanav {
/*text-align: right; font-size: 0.8em;*/
padding: 0.3em;
margin-bottom: 1em;
background: #fafafa;
}
.flash {
background: #cee5F5;
padding: 0.5em;
border: 1px solid #aacbe2;
}
.error {
background: #f0d6d6;
padding: 0.5em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-blue.min.css" rel="stylesheet" />
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://maps.googleapis.com/maps/api/js?v=3.20"></script>
<style type="text/css">
#map {
width: auto;
/*500px;*/
height: 400px;
overflow: hidden;
max-width: none;
/*background-color: #CCC;*/
}
#map img {
max-width: none;
}
</style>
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
<a href="#listings-panel" class="mdl-tabs__tab is-active">Listings</a>
<a href="#map-panel" class="mdl-tabs__tab map-tab">Map View</a>
<a href="#compare-panel" class="mdl-tabs__tab">Compare Selections</a>
</div>
<div class="mdl-tabs__panel is-active" id="listings-panel">
</div>
<div class="mdl-tabs__panel" id="map-panel">
<div id="map"></div>
</div>
<div class="mdl-tabs__panel" id="compare-panel">
</div>
</div>Это хорошо визуализирует часть карты при первоначальном просмотре. Но как только вы начинаете переключаться между вкладками, он возвращается к рендерингу только в верхнем углу холста. (Однако, если вы щелкнете вкладку карты второй раз подряд, она снова отобразится идеально.)
Вторая проблема заключается в том, что элементы управления картой выглядят сплющенными по вертикали. Единственное исправление, которое я смог найти, это установить для max-width img значение none. Я пробовал это, но безрезультатно.
Фрагмент кода выше хорошо иллюстрирует проблему, с которой я столкнулся. Любые идеи о том, как это исправить, будут очень признательны!
