Issue with rendering a fluid Google map resulting in the display of dual scrolling bars post integration

I need to make the Google map in one of my sections responsive as it is currently showing two scroll bars on the page. To achieve this, I want it to span the full width of the page using a container fluid with 12 columns.

Check out the code snippet below.

<section class="googleMap">
   <div class="container-fluid">
    <div class="row">
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="map">
      <iframe src="https://www.google.com/maps/embed?anylocation" width="2000" height="450"  allowfullscreen="" loading="lazy"></iframe>
    </div>
   </div>
    </div>
  </div>
  </section>
htmlcssbootstrap-4

Answer №1

To begin with, eliminate the width and height attributes from the iframe tag. Instead, apply a CSS rule to the iframe setting its width to 100% and height to 100%, so it takes up the entire space of its parent container. If you wish for it to cover the entire screen, set the height to 99.5vh. Here is an example code snippet:

body {
  margin:0;
  padding:0;
}
iframe {
  margin:0;
  padding:0;
  border:0;
  width:100%;
  height:100%;
}
<section class="googleMap">
   <div class="container-fluid">
    <div class="row">
    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="map">
      <iframe src="https://www.google.com/maps/embed?anylocation"  allowfullscreen="" loading="lazy"></iframe>
    </div>
   </div>
    </div>
  </div>
  </section>

Answer №2

Kindly eliminate the attributes width="2000" and include style="width: 100%;" to the <iframe> tag.

Snippet :-

<iframe src="https://www.google.com/maps/embed?anylocation" height="450"  allowfullscreen="" loading="lazy" style="width: 100%;"></iframe>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Preserve Image Aspect Ratio within a Div Using the 'Overflow: Hidden' CSS Property

I am in the process of creating a profile page that takes inspiration from Facebook's layout design, particularly focusing on the banner and profile image combination. While my implementation looks good on desktop screens, I am facing challenges when ...

htmlcsssass

The page is not loading correctly until a refresh is done

My website seems to be displaying incorrectly on most browsers until the page is refreshed. Check it out here: I'm puzzled as to why this issue is occurring and why it resolves itself upon refresh (even without clearing the cache). The layout consis ...

htmlcsscss-float

display and conceal a division by clicking a hyperlink

How can I make a hidden div become visible when clicking on a specific link without using jQuery? Javascript function show() { var a = document.getElementsByTagName("a"); if (a.id == "link1") { document.getElementByID("content1").style.v ...

javascripthtmlshow-hide

Ways to execute a function when clicking on a date using HTML 5 datepicker input type

How can I call a function in angular js when a date is selected from an html5 date-time picker using a mouse click? I need help with this. Here is the HTML code: <div class="col-lg-4"> <input class="form-control" type="datetime" date-time auto ...

javascriptangularjshtmlmeteorangularjs-ng-model

Various CSS regulations for various languages/modes in CodeMirror

Can CodeMirror highlight different languages separately in multi-mode? .cm-s-default .cm-string-html {color: blue;} .cm-s-default .cm-string {color: #170;} Usually, CodeMirror applies the same class names for strings, comments, and other objects in all l ...

javascriptcsscodemirror

What is the best way in jQuery to display a particular div with a unique id when a link is clicked?

I have a div with the following structure: <article id="#pippo">blablabla</article> which I have hidden using jQuery $('article').hide(); Now, I want to create a link menu that displays a specific article id when it's clicked ...

javascriptjqueryhtmlhyperlinkcss-selectors

Retrieve the checkbox-success value for each row in the mvc table

I am facing an issue with retrieving the id of each table row when using the bootstrap checkbox-success. However, the normal checkbox allows me to successfully obtain the correct Id for each row. Can anyone assist me in troubleshooting my JavaScript code? ...

javascriptcssasp.net-mvcbootstrap-4

Comparison of jQuery, AngularJS, and Node.js

I'm a beginner in web development and I have some basic knowledge: HTML - structure of websites CSS - design aspect JavaScript - for adding interactivity Now, what exactly is jQuery, AngularJS, and Node.js? Upon researching, I discovered that jQue ...

javascriptjqueryhtmlangularjsnode.js

How to Take Out the Active Class from a Dropdown Menu in Angular 2

I am having trouble removing the 'active' class from a dropdown when an option is selected. I have successfully removed it on document click, but need help with removing it on selection. TS : ngAfterViewInit() { const elem = this.ele ...

cssangulartypescriptdrop-down-menuangular2-template

Unable to Switch Navbar State in Angular with Bootstrap 4

Unable to toggle the navbar when resizing to a mobile screen in Angular 4 using Bootstrap 4. It has been included in the angular CLI in script and styles, along with the necessary node modules from Bootstrap. Is there something missing in the code provided ...

twitter-bootstrapangularnavbarbootstrap-4togglebutton

Separating a string based on defined separators and substituting certain segments

With content similar to Go to {#www.google.com##Google#}, I aim to transform it into a clickable link, such as: Go to <a href="www.google.com" title="Google">Google</a>. Here is my attempt: var splCharData = splCharData.split(/[\{#\ ...

javascripthtmlregex

The optimal method for selecting a button from a group of buttons on a calculator using pure JavaScript

I have developed an HTML/CSS code inspired by the Mac/Apple calculator design. It features buttons organized in 5 rows using flexbox. You can view my code on this codepen: <div class="wrapper"> <div class="calheader"> ...

javascripthtmlcss

Is your Material UI Responsive Appbar overlapping the main content? Looking for a solution to address this issue?

Currently, I am in the process of developing a website that incorporates a responsive-based app bar with an attached drawer. The design concept I am following can be located at this link, which I have been modifying to suit my needs. However, I have encoun ...

javascripthtmlreactjsmaterial-ui

Listing items in a table using ng-repeat

I'm currently working on constructing a table using ng-repeat, but I also need to incorporate a toolbar. The table design I have in mind is similar to the one shown in the image below, however, I require additional rows to be inserted under the sectio ...

htmlcssangularjsangularjs-ng-repeattabular

Which DocType is most suitable for my web application?

I'm grappling with the HTML and XHTML specifications, and I can't decide which one to go for. Can you help me understand which is better? For instance, if I have a web application in PHP that searches an image database and displays results dynam ...

phphtmlajaxstandards

Validating variables in a PHP form submission

I am currently facing an issue that has me stumped. I have a basic HTML form that needs verification upon submission. If the values submitted fail validation, I need to redirect back to the form and highlight the errors. While I've done similar valida ...

phphtmlforms

Saving the form data of a user into the Django models database

I have successfully implemented the login, authentication, and logout system. The next step is to incorporate a post functionality that saves data in the Tweet model. views.py from .models import NameForm from django.shortcuts import render, redirect, get ...

pythonhtmldjango

The incorporation of styled components into the child component seems to be malfunctioning

Even after attempting to include the styled component in the child component, I noticed that the values remained unchanged. The child component displays: <a href='' className='displayCarft'>{props.craftcolor}</a> I have in ...

cssreactjslessstyled-components

Adjust the parent's height to match the child element using relative and absolute positioning

I am struggling with a seemingly basic issue and can't seem to figure it out. Basically, I have a parent element with a relative position, and a child element with an absolute position. How can I make the parent element expand to match the height of ...

htmlcss

Numerous animated elements within A-frame

Is there a way to incorporate animation into an A-Frame glTF model, causing it to smoothly move 5 spaces to the left and then 5 spaces forward? Below is my current code: <a-gltf-model color="#FFFFFF" width="1" height="1" de ...

javascripthtmlcssanimationaframe