Answers for "Make New Google Map Responsive"

Html

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>

Posted by: Guest on October-23-2020

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);
}

Posted by: Guest on November-24-2020

Code answers related to "Make New Google Map Responsive"

Code answers related to "Html"

Browse Popular Code Answers by Language

Python

Javascript

Whatever

Shell/Bash

CSS

Html

PHP

SQL

Java

Answers for "Make New Google Map Responsive"

Code answers related to "Make New Google Map Responsive"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us