Set Google Maps container size equal to md-card-content width

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:

You can set margin: 0 -20px -20px -20px; for #map set px as per your parent element padding. — Krupal Patel, May 09 '17 at 11:47

score 1 · Accepted Answer · answered May 09 '17 at 12:02

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>

Set Google Maps container size equal to md-card-content width

1 Answers1