[Resolved] full screen google map merged with header

[Jem]

Hi

I’m trying to create a full screen Google map on my home page, merged with the page header, but it’s not happening. I can’t get it to display full-width as intended.

I’m using the Maps Builder Plugin from WordImpress to create the map, set to 100% width and height. I’ve had to override the map builder height (set in admin) with CSS for 100vh.

I’ve added the shortcode for the map into the content area of the page header, and set the header to be Fullscreen with zero padding and removed left and right padding via CSS. The Page Header Container type is set to Full width.

Under Advanced I’ve applied Merge with site header, Place content behind header and Transparent navigation. Layout is set to Content (no sidebars) and the Page Builder Container is set to Full Width.

Thing is the map width is limited to the Layout/Container max-width (body .grid-container takes the width from the customizer)). I have to set that to maximum (or at least, larger than my monitor) for it to appear fullscreen. This then applies to the rest of the site, which I actually want to be relatively narrow (860px). I realise I could just adjust padding on the other pages for a narrower width, but I’ve not had this problem with fullscreen on other GP sites. Have I missed something?

The site is currently on localhost so I can’t post a URL.

[Tom]

Hi there,

I’m afraid I can’t offer much help without seeing the site in this case.

I do remember doing this for a client site once, and it required using the maps API to initiate the map using javascript.

This article should help: https://www.labnol.org/internet/embed-google-maps-background/28457/

[Jem]

Thanks Tom. I’ve not been thinking clearly, obviously the content is restricted by the container width and only a background will go full width. CSS with !important for the container max-width lets me override the container width to 100% only on the home page (where this map is). Sorry to have troubled you. I’ll look into the JS option too.

[Tom]

Glad you got it working! 🙂

[Author]

Posts