-2
私はCSSを使って特定の場所に強制的にGoogleマップを取得するのに問題がありました。 3 column layout。私はこのようにしたい。私は中央の列の内側にGoogleマップのAPIリンクを挿入すると、オフセットされ、すべてが破棄されます。私はそれを列に強制する方法を見つけ出そうとしていますが、それでもなお動いていません。センターの列の境界内でGoogleマップを強制的にロックする方法を教えてください。
センターコラムを中心とした3列レイアウトにしたいと思います。ヘッダーとフッターは幅全体に渡ります。
地図は今は小さいですが、私はそれを中央の列の全体のサイズにしたいと思います。このよう
html,
body {
height: 100%;
\t padding: 0;
\t margin: 0;
}
body {
\t font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
}
header {
\t position: absolute;
\t width: 500px;
\t height: 250px;
\t top: 50%;
\t left: 50%;
\t margin-top: -125px;
\t margin-left: -250px;
\t text-align: center;
}
header h1 {
\t font-size: 60px;
\t font-weight: 100;
\t margin: 0;
\t padding: 0;
}
div#div_map {
width: 100%;
height: 100%;
position: fixed;
text-align: center;
display: inline-block;
}
#map {
width: 25%;
height: 25%;
margin: 0 auto 0 auto;
display: inline-block;
}
.container {
position: relative;
text-align: center;
}
.container div {
\t height: 100%;
}
div.container, section.main {
height: 100%;
}
.column-left {
\t width: 25%;
\t left: 0;
\t background: #00F;
\t position: absolute;
}
.column-center {
\t width: 50%;
\t background: #933;
\t margin-left: 25%;
\t position: absolute;
}
.column-right {
\t width: 25%;
\t right: 0;
\t position: absolute;
\t background: #999;
}<!doctype html>
<html>
<head>
\t <meta charset="utf-8">
\t <title></title>
\t <link rel="stylesheet" href="index.css" />
\t <script>
\t \t function initMap() {
\t \t \t var latlng = {
\t \t \t \t lat: 40.816714399999995,
\t \t \t \t lng: -120.90523610000001
\t \t \t };
\t \t \t var map = new google.maps.Map(document.getElementById('map'), {
\t \t \t \t zoom: 15,
\t \t \t \t center: latlng
\t \t \t });
\t \t \t map.setOptions({
\t \t \t \t streetViewControl: false
\t \t \t });
\t \t \t addMarker(latlng);
\t \t \t // icon: 32x32
\t \t \t function addMarker(latlng) {
\t \t \t \t var marker = new google.maps.Marker({
\t \t \t \t \t position: latlng,
\t \t \t \t \t icon: 'http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/32/rss-feed-icon.png',
\t \t \t \t \t map: map
\t \t \t \t });
\t \t \t }
\t \t }
\t </script>
\t <script async src="https://maps.googleapis.com/maps/api/js?callback=initMap">
\t </script>
</head>
<body>
\t <div class="container">
\t \t <header></header>
\t \t <section class="main">
<div class="column-left" >Column left</div>
<div class="column-center" >
<div id="map" style="display:inline-block;"/>
</div>
<div class="column-right" >Column right</div>
\t \t \t <!-- <h3 style="text-align: center;"></h3> -->
<!-- <div id="map" /> -->
\t \t </section>
\t \t <footer></footer>
\t </div>
</body>
</html>
。右。ええと、私はCSSを一般的に使うのはむしろ新しいものです。私はそれを修正し、地図の高さ/幅の両方を100％にする。地図に添付されたdivも高さ100％です。下まで伸びる。どうすればGoogleマップのdivに影響しないようにすることができますか？ 'div＃div_map { 幅：100％; 高さ：100％; 位置：固定; text-align：center; display：インラインブロック; } #map { 幅：100％; 高さ：100％; マージン：0自動0自動; display：インラインブロック; } ' – DKJ
[上記の結果]（https://gyazo.com/edddeb3b91b44c68a60af5d2f7be6820） – DKJ
@Dez divタグは自己閉鎖ではありません。 @DKJでは、列の100％の幅とその高さの50％のマップが必要でしたか？マップの高さを変更したいのであれば、 'height：100％'を '#map {..} 'の中に入れてください。 – Pat