Freshly embedded Google map becomes grey when sized down

I have a CSS code that I use to make iframes responsive by wrapping them with it.

.responsive-iframe-container {
        position: relative;
        padding-bottom: 56.25%; // Maintains aspect ratio
        height: 0;
        overflow: hidden;
}

.responsive-iframe-container iframe,   
.responsive-iframe-container object,  
.responsive-iframe-container embed {
 position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;

}

Although this method works perfectly for new Google Maps, an issue arises where the map disappears and is replaced with a gray box when it reaches a certain size. Upon inspection, it appears that Google sets 'display:none' at that specific size for unknown reasons. Is there a solution to resolve this problem?

You can see this situation in action through this test scenario:http://jsfiddle.net/kuLT6/

cssgoogle-mapsiframeembed

Answer №1

As someone who is just starting out, my advice may be simple but please consider it. I encountered a similar problem and found that adjusting the padding-bottom to 80% solved it. This issue probably has to do with the minimum space needed for controls.

I personally only tested it with 80% and it worked for me. It's possible that using a smaller percentage could also be effective.

Answer №2

According to @dr-mobile's observation, it seems like a feature.

I encountered the same issue with Firefox 26 on my Mac (Mavericks).

To avoid the grey background, I found that using a taller aspect ratio (such as 16:9) was effective.

It appears that the increased height allows Google's code to display all UI components properly.

Below is my SCSS code:

.mm {

    height: 0;
    padding-bottom: 56.25%; // 16:9 = (9 / 16 = .5625) x 100
    position: relative;
    overflow: hidden;
    margin: 10px 0;

    iframe,
    object,
    embed,
    video {
        border: 0;
        width: 100% !important;
        height: 100% !important;
        position: absolute;
        top: 0;
        left: 0;
    }

    &.tv { padding-bottom: 75%; } // 4:3 = (3 / 4 = .75) x 100

    &.slide { padding-bottom: 66.666%; } // 3:2 = (2 / 3 = .66666666666667) x 100

}

And here is the HTML code (using the updated Google Maps embed code):

<div class="mm tv"><iframe width="300" height="260" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d17819.243465772353!2d-122.4777661!3d37.8179015!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808586deffffffc3%3A0xcded139783705509!2sGolden+Gate+Bridge!5e1!3m2!1sen!2sus!4v1391366234135" frameborder="0" style="border:0"></iframe></div>

Keep in mind that I have used a 4:3 aspect ratio.

I have tested this on Chrome and Firefox on my Mac, and it seems that the additional height allows the map to be viewed at smaller sizes.

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

Utilizing Angular and the Kendo UI framework to customize the dimensions of a Kendo window

Is there a way to dynamically set the height and width of the kendo window based on the content of the kendo grid? Below is the code snippet for my kendo-window: <div kendo-window="Operation.OperCustWind" k-width="800" k-height="700" ...

javascripthtmlcssangularjskendo-ui

Google Maps API marker list conversion completes with the following error message: "Error: type '_Map<String, dynamic>' is not a subtype of type 'String'."

I am currently utilizing the Google New Nearby Search API in order to generate a list of markers for places nearby. However, I encountered the following error: type '\\\_Map\\\<String, dynamic\\\>&apo ...

jsonfluttergoogle-mapsgoogle-places-apiflutter-getx

I am having trouble with Owl Carousel in my code. Can anyone help me figure out what is causing the issue

I'm having trouble getting my owl carousel to display when I try to run it. I've made sure to link the correct stylesheets and scripts, but nothing is showing up on the page. Even after trying to link the stylesheets from both a local source and ...

javascripthtmljquerycss

Guide on incorporating CSS to a designated button within a div using bootstrap4

I am trying to apply a specific CSS style to a division that includes a bootstrap button. To achieve this, I have added the CSS code directly inline within the button tag to avoid affecting other bootstrap buttons on the page. The following inline code sn ...

htmlcssbootstrap-4

Utilizing CSS for creating dynamic columns within a Bootstrap row

Is there a way to dynamically change the background color of each section in a bootstrap row based on percentages passed through? For example, if I pass in percentages of 30, 40, 20, and 10, the divs should appear in green, red, yellow, and purple respecti ...

cssangulartwitter-bootstrap-3less

Using CSS to Put Text in the Back of Other Text

After being inspired by the structure of view-source:, I attempted to layer one instance of text behind another using z-index. However, my initial attempt failed as it became clear that utilizing z-index required the position attribute to work effectively. ...

csspositionz-index

"Utilize openlayers' map.updateSize function to automatically adjust the map size in response to

When trying to display a side panel, I want to ensure that the map's proportions stay within the new div width or height. Currently, the map is simply resized, causing the countries to appear distorted. I attempted to use map.updateSize without succes ...

javascriptjquerycssopenlayers

I'm searching for a universal guidebook on creating web page layouts

After 5 years of creating webpages, I have realized that my sites tend to have a nostalgic 1995 internet vibe. Despite being a C# programmer with knowledge in HTML, JavaScript, and CSS, my design skills could use some improvement. Is there a quick referenc ...

c#javascripthtmlcss

Can you provide instructions on accessing the profile of a user by clicking on their name?

I created this blog and I want to be able to redirect the website to a specific user's profile when clicking on their profile from any post. Currently, I can only retrieve the profile picture of the currently logged-in user. What steps should I take t ...

pythonhtmlcssdjango

Receiving a 502 Bad Gateway error when attempting to request a CSS file via HTTPS

After recently adding SSL to some pages on my website, I encountered an issue when trying to call a secured web page <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="https:/ ...

asp.netcssssliis-7https

Conceal anchor links using jQuery by targeting their title attribute

Looking at the html below <li class="static"> <a title="blog" class="static menu-item" href="http://google.com">Blog</a> </li> <li class="static"> <a title="profile" class="static menu-item" href="http://profile.com"> ...

jqueryhtmlcsshref

Customize the design of a React Material-UI select dropdown by overriding

I am currently utilizing the React MUI Select Component for my forms, specifically for language selection. My issue arises when I need a different style for the dropdown menu of the language Select component. Overriding the relevant class would apply this ...

cssreactjsmaterial-uidropdown

What techniques can I use to ensure that my website's layout adjusts correctly when resized?

body { padding: 0; margin: 0; font-family: 'Roboto', sans-serif; font-size: 16px; box-sizing: border-box !important; } a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-decorat ...

htmlcssflexboxmedia-queries

My website's logo is not appearing on the navigation bar in the HTML code

Hi there! I recently tried adding a logo to my navigation bar in an HTML file, but for some reason, the logo doesn't appear when I run the file. I'm currently learning web development through a course on Coursera, and I am quite new to programmin ...

htmlcssbootstrap-5

Avoiding Overlapping DIVs: Tips to Keep Your Elements in Place

Instead of using table-based layout, I have decided to go with a DIV-based layout in order to streamline the markup and improve page load speed. However, as I am not an expert in CSS, I find it quite challenging. Below are the CSS classes I am currently us ...

css

Tips for arranging links in a vertical layout on a navigation bar that is compatible with every device

I'm having trouble aligning the links vertically in the center of the navigation bar, with the logo overlapping the content. Check out the HTML code below: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

htmlcssfrontendbootstrap-5

The image will only display upon receiving a link, not a path

Having some trouble displaying an image on my website, despite having successfully done so in the past for other projects. The image is located in the same folder as my HTML file. Here's what I've tried: <img src="reddit.png"/> <img s ...

javascripthtmlcssreactjsbootstrap-4

Is it possible to remove strings within HTML elements?

{% for term in terms %} <div class="term term-count-{{loop.index}}"> <b>{{ term }}</b>: &nbsp;&nbsp; {{ terms[term] }} &nbsp;&nbsp; </div> {% endfor %} 'terms' is a dictionary w ...

pythonhtmlcssflaskjinja2

Adjust the Weight of a Single Word in H1 CSS

I've been trying to figure out how to achieve the following for a while now. I know I can solve this issue by using different h1 tags and positioning them separately, but I'm curious to find out if there's a way to do it without dividing the ...

htmlcsstextpositioning

Two div elements refusing to be positioned side by side

I'm struggling to position two div elements next to each other, with a third one to be added later. I've experimented with floating, display, and positioning options, but nothing seems to work. I've even copied code from other websites, but ...

htmlcsspositioncss-float