0
Ich versuche, ein Layout mit einer linken Scroll-Spalte (mit Bildern als Links) und einem festen Vollbild rechts Spalte mit Google Maps zu erstellen. Ich kann nicht herausfinden, warum die Karte so verzerrt angezeigt wird. Here's a screnshot of my problem.Google Maps Tiles Skewed mit Flexbox
$(window)
.resize(function() {
var h = $(window).height(),
offsetTop = 40; // Calculate the top offset
$("#map-canvas").css("height", h - offsetTop);
})
.resize();html {
height: 100%;
font-family: sans-serif;
padding: 0px;
margin: 0px;
}
body {
height: 100%;
overflow: hidden;
margin: 0px;
display: flex;
padding-left: 0px;
}
.column {
height: 100%;
display: flex;
flex-direction: column;
padding-left: 0px;
margin: 0px;
}
#left {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40%;
background-color: white;
padding: 0px;
margin: 0px;
}
#right {
background-color: #f3f3f3;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 60%;
flex: 1;
}
.top-left {
flex-shrink: 0;
background-color: #333;
color: white;
padding: 20px;
}
.top-right {
display: inline-flex;
flex-shrink: 0;
background-color: #333;
color: white;
padding: 20px;
}
.bottom {
flex-grow: 1;
overflow-y: auto;
padding: 0px;
margin: 0px;
}
ul {
display: inline-flex;
list-style: none;
padding: 0px;
margin: 0px;
}
li {
display: flex;
padding: 0px;
margin: 0px;
}
img {
min-width: 450px;
width: 100%;
padding: 0px;
margin: 0px;
}
#map_canvas {
flex: 2;
}<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="left" class="column">
<div class="bottom">
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
</div>
</div>
<div id="right" class="column">
<div class="bottom">
<div id="map-canvas">
</div>
</div>
</div>
<script>
function initMap() {
// Styles a map in night mode.
var map = new google.maps.Map(document.getElementById("map-canvas"), {
center: {
lat: 40.674,
lng: -73.945
},
zoom: 12
});
}
</script>
<!-- script references -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAK1QRzq4tKEN63PxIA6jKfyypkoRn326M&callback=initMap" async defer></script>
</body>Here's my codepen link, ob das hilfreich ist.
Ich möchte es so etwas wie this aussehen, aber ich konnte nicht herausfinden, was genau ich falsch mache.
Irgendwelche Ideen? Vielen Dank im Voraus für die Unterstützung eines Anfängers!
Vielen Dank! –