responsive google maps iframe code example

Example 1: google maps responsive

<style>
.map-responsive{
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
}
.map-responsive iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}
</style>

<div class="map-responsive">
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3003.65302474174!2d-8.622871484603664!3d41.16392197928525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd2465ac0e521635%3A0x6e4f143809534218!2sRua%20de%20Serpa%20Pinto%2C%20Porto!5e0!3m2!1spt-PT!2spt!4v1603461184237!5m2!1spt-PT!2spt" width="550" height="350" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>

Example 2: google maps static responsive

// map size 400w x 200h

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.container img {
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 200px);
}