Chrome is causing issues with the width of the Google Maps iframe set to 100%

I have included a Google map on my website using an iframe.

Here is the code I am using:

HTML
<div class="iframe-maps">
    <iframe src="https://www.google.com/maps/d/embed?mid=1Z_DcQ-f4EdnEwL6sRKfLCYCj5P8&hl=en" width="100%" height="100%"></iframe>
</div>

and: 

CSS
.iframe-maps {
    width: 80%;
}

I followed the suggestion to wrap the iframe in a div, but it did not make any difference.

It seems to be working fine in Firefox and Edge, both on desktop and mobile, but Chrome is giving me trouble. I am not sure about Safari. I thought this would be a simple task. Is there something I overlooked?

The only information I could find related to this problem dates back to 2010 here: . I assume this issue has been resolved by now.

htmlcssangular

Answer №1

width:80% (representing 80% of the parent's width) is only effective when the parent element has a defined width - either as a length or percentage, according to CSS rules.

Be sure to examine the parent element of your .iframe-maps, as I believe it may have a style such as width:auto or no width definition at all.

Answer №2

Here's a suggestion to try:

 .iframe-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }


 .iframe-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
<div class="iframe-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3168.6391103405977!2d-122.0862461843548!3d37.422004140149184!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fba02425dad8f%3A0x6c296c66619367e0!2sGoogleplex!5e0!3m2!1sen!2slk!4v1544010623115" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Answer №3

For an easy solution, just set the item width to 100%

<iframe 
  width="100%" 
  height="400" 
  frameborder="0" 
  scrolling="no" 
  marginheight="0" 
  marginwidth="0" 
  src="https://maps.google.com/maps?q=lat,long&hl=es&z=14&amp;output=embed"
                    >
                </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

Checkbox malfunctioning when trying to add values after being checked

I have successfully completed a calculation system project using JavaScript. Everything works well, the calculations are accurate and taxes are included properly. However, I am facing an issue where the tax is not being included when I click on the checkbo ...

javascripthtmljqueryinnerhtml

Transfer the document to the server using ajax

I've been attempting to upload an image to the server using the following simple code: <form enctype="multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <progress ...

javascriptjqueryajaxhtmlupload

Can CSS3 be utilized to craft this specific shape?

Can CSS3 be used to create the shape I need? I came across this website http://css-tricks.com/examples/ShapesOfCSS/, but I am unsure if any of the shapes on that page can be customized to match the specific shape I have in mind. Thank you! ...

htmlcssshapescss-shapes

Exploring the Various Path Options in Angular 2 Routing

As a newcomer to Angular and Node JS, I am currently working on an application and struggling with how to efficiently navigate between my different components. Users can input the name of a user and add books associated with them When clicking on a book ...

javascriptangularroutesangular-ui-router

The Angular ViewportScroller feature appears to be malfunctioning in the latest release of Angular,

TestComponent.ts export class TestComponent implements OnInit, AfterViewInit { constructor( private scroller: ViewportScroller, ) {} scrollToAnchor() { this.scroller.scrollToAnchor('123456789'); } } HTM ...

javascriptangularangular14

Unusual spacing problem detected on iPad device

When I visit my demo site on my iPad, I'm having a strange issue where the player seems to be shifted to the top. This is how it looks on my iPad Mini running iOS 6.1 and tested on both Chrome and Safari: Here is the link to the demo site (change the ...

htmlioscssipadlayout

Today is a day for coming together, not for waiting long periods of

When grouping by month and dealing with different days, I encountered an issue similar to the one shown in this image. https://i.stack.imgur.com/HwwC5.png This is a snapshot of my demo code available on stackblitz app.component.html <div *ngFor="let ...

angulartypescript

calculation of progress bar advancement

I want to make the progress bar in my game responsive to changes in the winning score. Currently, it moves from 0% to 100%, which is equivalent to 100 points - the default winning score. But I need the progress bar to adjust accordingly based on the user-i ...

javascripthtmlcssprogress

Tips for asynchronously subscribing to an observable from an array in Angular

I am facing a scenario where I have an array containing IDs and I need to subscribe to observables for each ID in a sequential order. I attempted to use a foreach loop but the responses were not in the desired order. Then, I tried to implement a for loop a ...

angulartypescriptasynchronousobservable

Aligning columns to the right in Bootstrap, featuring an unordered list without any text wrapping

I am trying to prevent the lines from overflowing onto the next line. The details should all be on the same line. I have attempted a solution, but it's not working as expected. https://i.sstatic.net/MYgv5.png <div class="container"> <div cla ...

htmltwitter-bootstraptwitter-bootstrap-3bootstrap-4

Retrieve all data points if both latitude and longitude are present in the XML dataset

XML data to retrieve details <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <results> <result> <Country_Code>IN</Country_Code> <Country_Name>India</Country_Name> <Region_Nam ...

javascripthtmlxmlxpath

When a link is clicked, submit a form and send it to several email addresses simultaneously

My form has been styled using the uniform jQuery plugin. Instead of using an input type submit for submitting the form, I have utilized a link and added some effects to it to prevent it from being formatted with uniform. <form> <ul> ...

phpjavascriptjqueryhtmlforms

Angular html components must always be enclosed with closing tags for proper rendering

Angular is giving me an error message about incorrect closing tags, but I have checked and all the tags seem correct with one open tag and one close tag for each. Below is my code: <div class="container-fluid"> <h6 class=" ...

htmlangularbootstrap-4

What is the best way to toggle DOM classes in React using Material-UI components?

Currently utilizing Material UI alongside React, I have a div element: <div className={classes.div}></div> I am attempting to dynamically add a conditional class to it: <div className={classes.div + divActive ? `${classes.div}__active` : &a ...

javascriptcssreactjsmaterial-ui

The journey of communication: uncovering the essence of @input between parent and

I'm diving into Angular and currently working on the @Input phase. Within my main app, there's a child component. Inside app.component.ts, I've declared a test variable that I wish to pass from app.component.ts to child.component.ts. // ap ...

angulartypescriptinputangular7angular8

What could be causing the if statement to evaluate as false even though the div's style.display is set to 'block'?

Building a react application using createreactapp and encountering an issue with an if statement that checks the CSS display property of a div identified as step1: const step1 = document.getElementById("step-1") if (step1.style.display === 'blo ...

javascripthtmlcssreactjs

Is it possible to trigger an AJAX validation only after the jQuery validation plugin has successfully validated the input?

I utilized the jQuery validation plugin for form field validation. The goal now is to send an ajax request only when the fields are deemed valid by the jQuery validation plugin. JavaScript: $(function(){ $("#form").validate({ errorPlacement: ...

javascriptphpjqueryhtml

Apply a dual-color gradient background vertically

I am trying to figure out how to achieve a two-tone background color in an HTML document. I know this question has been asked before, but I specifically want the colors to be split vertically rather than horizontally. ...

cssbackground-color

What is the process for importing a local widget file in Angular?

I have a unique widget named employee-widget stored in the Angular application folder as employee-widget.js. Despite following the calling method below, the widget fails to load. Method 1: <div> <h4>Attempting to load the employee widget& ...

htmlangularwidget

Tips for concealing password input in an HTML form

Is it possible to echo the password variable into an input field in a form without displaying any password characters in the HTML source code? The purpose is for the form to be able to post the password without revealing it. Any ideas on how to accomplis ...

phphtmlformspasswords