/ / / How to add a full-width Google map without a plugin
How to

How to add a full-width Google map without a plugin

So I am a bit “obsessed” about not using too many plugins and theme blocks. The reason for this that somewhere down the WordPress road, you will (maybe) change the website theme or external block plugin, or you are in the need for WordPress speed.

This is a Norwegian consult agency and the footer on the contact us page look like this.

Vedum Consulting - Contact us with Google Map in the bottom.

So how did I do this with just the default HTML – block?

Well, first of all. I use the Kadence theme. In this theme, I can decide in the page settings whether I will have padding or not below the content. So on this page here I have disabled the Vertical Content Padding. This can be done sitewide, but I prefer to do this on a page-to-page basis. This is one of those things I really love about the Kadence theme.

So, first I add the <iframe> code from Google to the bottom of the Contact page with the HTML block. Then all I do then is to remove the width and height and add a little div with a class like below. Here I have set the class to be “googlemap”.

<div class="googlemap"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d8000.9762135614965!2d10.754421!3d59.9114969!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd43c061f11410b85!2sVedum%20Consulting!5e0!3m2!1sno!2sno!4v1610911385463!5m2!1sno!2sno" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0" frameborder="0"></iframe></div>

In the CSS file in the child theme I just add this CSS:

/* Google Map fullwidth */
.googlemap {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% – 50vw);
margin-bottom:-7px;
margin-top:30px;
}

.googlemap iframe {
width:100%;
height:450px;
}

And then it’s good to go.