将Google Maps容器的大小设置为等于md-card-content的宽度

Question

How can set a Google Maps div container size equal to md-card-content width?

I have the following code but it doesn't work.

<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>

I try these solutions ( link , link ) but it doesn't work for me. I also tried What I'd want get is like this:

Answer 1

I don't use angular but I'd say it's because of height is not set on a parent container. From the image you've posted it seems that you want squared map. You can use the padding trick to maintain aspect ratio:

 .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>