How to Embed a Google Maps Map in WordPress Manually

The easiest way to insert a Google Maps map in WordPress is probably the one we’re going to look at next.

Actually, it’s very simple, since Google Maps itself is the one that is going to give us the code.

To do this, what we have to do is, on the map we are using, within Google Maps, in the left sidebar, where the data of the selected search appears, we will click on the share button.

Insertar un mapa de google, botón compartir
Share button to embed a google map in WordPress

Next, a modal window will appear with the map we want to insert, but in the tab that allows us to send the map as a message. In that case, we’ll switch to the Insert a Map tab.

Then we’ll see that a code appears, a selector that allows us to select between medium, large or small, and a link that says copy HTML.

Once you’ve chosen the map size, click on the copy HTML link.

Copiar el código HTML para el iframe que permite insertar el mapa de google
Copy HTML button from the iframe to insert the google map

The copied code, in its entirety, will be such as this one that I show you below.

<iframe src="!1m18!1m12!1m3!1d3179.016523905674!2d-3.5903353482002385!3d37.176078279774075!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd71fcb7977fb93b%3A0x808dd1ef1221a27f!2sAlhambra!5e0!3m2!1ses!2ses!4v1626065631650!5m2!1ses!2ses" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Realize that it is an html iframe tag, whose source (src attribute) is the URL provided by the Google Maps view that we have visible at that moment.

In fact, if we simplify, so that you can see the code more clearly, we would have the following:

<iframe src="#" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

If you notice, the first parameter (src) is the url, the second is the width of the window, the third (height) is the height of the window, then we will have another one that allows us to define the style of the window (Style), in this case without border, and two more, which allow us to put the map in full screen (allowfullscreen) and that the map loads when it is actually visible on the screen, and not from the beginning (loading=”lazy”).

Once we know how this code works, we insert it into our post with the HTML block. We simply add the block and paste the code.

Código HTML con el iFrame insertado en el editor de WordPress
HTML code with the iFrame inserted in the WordPress editor

Once this is done, we could change some parameters such as the width, being able to enlarge it to 100% of the width of the screen, for example.

If you click on the preview, you will already be able to see the map above the block. And once published, the final result will be as shown below. You can watch it on

Mapa de google previsualizado en el editor de WordPress
Google map previewed in WordPress editor

Entrada finalizada con el mapa de google insertado
Final result with google map inserted

Anyway, as you can see, it doesn’t have much science, you just have to copy the code that google maps gives you and paste it into the HTML block.

However, you will discover that there is a small drawback, and that is that, in order to display a google maps map on your website, you will have to register the Google Maps API for your website.

However, there is a trick to avoid having to register this API. It is a question of adding, at the end of the URL of the src, the following request:


This will look like this:

<iframe src="!1m18!1m12!1m3!1d3179.025006883144!2d-3.589958633773272!3d37.175876679872985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd71fcb7977fb93b%3A0x808dd1ef1221a27f!2sAlhambra!5e0!3m2!1ses!2ses!4v1626608197369!5m2!1ses!2ses?output=embed" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
<iframe src="!1m18!1m12!1m3!1d3179.025006883144!2d-3.589958633773272!3d37.175876679872985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd71fcb7977fb93b%3A0x808dd1ef1221a27f!2sAlhambra!5e0!3m2!1ses!2ses!4v1626608197369!5m2!1ses!2ses?output=embed" style="border:0;" allowfullscreen="" loading="lazy" width="600" height="450"></iframe>