Googleマップコンテナのサイズをmdカードのコンテンツの幅と同じに設定する

Question

Googleマップのdivコンテナのサイズをmdカードのコンテンツの幅と同じに設定するにはどうすればよいですか？

私は以下のコードを持っていますが、動作しません。

<style> #map { width: 100%; height: 100%; } </style> 

<md-card flex> 
    <md-card-content> 
     <div layout="column"> 
      <md-input-container flex="100"> 
      <!-- ... --> 
      <div id="map"></div> 
     </div> 
    </md-card-content> 
</md-card> 

私は（link、link）これらのソリューションを試してみてください、それは私のために動作しません。

Answer 1

私は角を使用していないが、私はそれがあるため、高さを親コンテナに設定されていないのだと言うだろう：私はまた、私は何を取得したいと思うことは、このようなものです を試してみました。 あなたが投稿した画像から、あなたは二乗マップを望んでいるようです。 `表示設定してみてください

.map-container { 
 
    position: relative; 
 
} 
 

 
.map-container:before { 
 
    display: block; 
 
    content: ''; 
 
    padding-top: 100%; 
 
} 
 

 
#map { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    background-color: tomato; /* only for testing */ 
 
}

<link href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" rel="stylesheet"/> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
 

 
<md-card flex> 
 
    <md-card-content> 
 
     <div layout="column"> 
 
      <md-input-container flex="100">input</md-input-container> 
 
      <!-- ... --> 
 
      <div class="map-container"> 
 
       <div id="map"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </md-card-content> 
 
</md-card>