Troubleshooting Issue: Google Map not resizing correctly when window size changes

Utilizing media queries, I have implemented an adaptive layout on my website.

However, when I adjust the size of the browser window beyond a specific media query, the google map begins to malfunction (refer to the image)

My Solution:

CSS:

#googleMap2{display: none;}

@media screen and (min-width: 919px){
   #googleMap{display: none;}
   #googleMap2{display: block;}
}

HTML:

<div id="googleMap">[google-map-v3 width="920" height="550" .......]</div>
<div id="googleMap2">[google-map-v3 width="768" height="320" .......]</div>

cssgoogle-mapsmedia-queries

Answer №1

To inform the map of its resized dimensions, make sure to trigger the following event:

google.maps.event.trigger( map, 'resize' );

Execute this event when resizing your page or container.

By adopting this method, you can adjust the size of a single map as required, eliminating the need to switch between multiple fixed size maps.

For a practical demonstration, check out this playground. Although I'm unaware of your complete page design, I've simulated a standard layout with a top bar and sidebar, accompanied by the map occupying the remaining space at the bottom right corner. Feel free to resize the page to witness the effect.

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

Searching for text within an HTML document using Selenium in Python can be easily achieved by using the appropriate methods and

Is there a way to find and retrieve specific texts within an HTML file using Selenium in Python, especially if the text is not enclosed within an element? <div class="datagrid row"> ==$0 <h2 class="bottom-border block">Accepted Shipment</h ...

pythonhtmlcssseleniumselenium-webdriver

The issue with the CSS background gradient is that it fails to completely cover the entire

Despite attempting several solutions recommended in similar questions, I am still unable to resolve the issue. Using the CSS background gradient generator at Ultimate CSS, I found that the gradient only extends halfway down the page on www.ncentertain.com ...

cssbackgroundgradient

Spinning text within a circular rotation in CSS

Looking for guidance on how to center the "hallo" text inside a circle? Currently experiencing issues with the circle display in IE8 and Firefox. Any suggestions on how to fix this would be greatly appreciated. And here is the link to my code snippet: CSS ...

javascripthtmlcss

What could be causing the Bootstrap icon to remain the same size without changing?

Take a look at this piece of code: <div class = "banner-image w-100 vh-100 d-flex justify-content-center align-items- center"> <div class = "content text-center"> <i class="bi-chevron-compact-down bi-7x"&g ...

htmlcssbootstrap-5bootstrap-icons

Slanted lines HTML CSS

I am encountering an issue with my HTML and CSS coding. The design requires a zig-zag "border" at the top and bottom of the page, creating a white paper space in between. The paper needs to be positioned underneath the zig-zag borders. Currently, this is ...

htmlcssborderzigzag

Styling the ::selection inline with CSS allows for custom

I have a div element that I would like to customize the text selection style for. Currently, setting the style using CSS works perfectly: <div>Text text here</div> <style> div::selection { background: #FFF; color: #0 ...

htmlcsstextselectioninline-styles

Integrating a YouTube video in the Google Maps info window with the help of Ajax technology

Currently working on a project for Udacity, my goal is to develop a neighborhood map using Google Maps API alongside Knockout and Ajax to integrate with another 3rd party API. A unique aspect of my approach is focusing on bars in the neighborhood and utili ...

javascriptjqueryajaxgoogle-mapsyoutube

The Art of Personalizing a Banner

I am currently experiencing an issue with the width of a specific gadget. My goal is to have the border-bottom line of #customheader span the entire width of any screen size. However, at the moment, the border-bottom is only the width of the blog itself. H ...

htmlcssblogger

Ways to align text within a table cell on a background using CSS

I'm attempting to print jukebox strips with designated corner markings. The code I have written generates the HTML page for displaying the strips, allowing users to then print them. Jukeboxes typically feature selection buttons labeled ABCDEFGHJK and ...

htmlcss

When Hovering, Pseudo-class Cannot be Applied

In my design, I have an image overlaid with a Play icon. The concept is that when the user hovers over the image, the brightness of the image decreases and the Play icon is replaced with a Magnifying Glass icon. However, there seems to be a problem. When ...

htmlcsscss-selectors

push one element to fit in between two adjacent elements

Is there a way to make my responsive webpage ensure that the full-screen element appears between sibling elements when viewed on mobile devices? Check it out on desktop or on mobile here. I have three (div) elements: two in one row and another in a separa ...

htmlcss

Is there a way to create a blurred background effect while the popup is in use?

I prefer my popup to have a dark or blurred background when active. The popup itself should remain the same, with only the background being darkened. I would like a dark layer overlaying the entire page. This script should be compatible with any website wh ...

javascriptcss

Tips for creating a header.php and footer.php integrated with CSS files

I am in the process of constructing my website using HTML files. I want to make sure that my header and footer sections are dynamic so I can easily modify them without having to update numerous files each time. While I've attempted a few methods based ...

phphtmlcssheaderfooter

Struggling with finding the appropriate CSS selector?

I'm struggling to find the correct selector. Let me do my best to explain the situation: I am currently working on a project where I am unable to make changes to the HTML and JavaScript due to dynamic content and other constraints. Within this proj ...

htmlcss

In HTML, a Bootstrap row appears on top of another row when viewing on mobile devices

I have implemented a Bootstrap HTML section that consists of a container and two main rows. Here is the code snippet: <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <style& ...

htmlcssbootstrap-4row

A tutorial on allowing a background element to capture the click event triggered by a foreground element

Within a container div, I have a background and foreground div. I want the click event on the foreground div to be passed through to the background div for handling the event. How can this be achieved in Angular 2+? Here is an example structure of my div ...

htmlcss

Immersive Elevation Modal Framework

In my Bootstrap modal, I have a plethora of content, such as: https://i.sstatic.net/o6lm4.png However, the bottom of the modal is experiencing an overflow of height like so: https://i.sstatic.net/qlKrl.png I've attempted utilizing the max-height p ...

cssreactjstwitter-bootstrapbootstrap-modalbootstrap-5

How can I focus on a particular P element within this Div using CSS?

I am attempting to target a paragraph element within the code snippet below. I want to create a class that applies text-shadow to the text of that specific paragraph. However, I am unsure which class to focus on and what the correct syntax should be. I in ...

htmlcss

Automatically adjusting jQuery script now functions on all hyperlinks for seamless resizing

I am attempting to create a rollover script that will resize my social network links when hovered over. The desired effect is for the 32px square icon to expand and display the trailing address. For example, when hovering over the Facebook link, it should ...

jquerycssjquery-animatewidth

Unable to hide content in Shopify using @media

How can I hide a Facebook like button when the browser window is resized to a certain width? This is the code I am using: @media all and (max-width: 300px) { .fb-like { float: right; display: none; } } While this code works on regular websites, it do ...

cssmobilemedia-queriesdevice