Responsive google maps with css
This is the simple CSS code to create responsive google map.
Add this css to your stylesheet
.google-maps { position: relative; padding-bottom: 75%; // This is the aspect ratio height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
Add this htm and replace iframe code with your google map code
<div class="google-maps"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15548.63190904842!2d77.580926!3d13.02561!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x35b471884c0e023e!2sCentum+Technologies+Private+Limited!5e0!3m2!1sen!2sin!4v1463031349976" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div>