How to insert and display Google Maps on a website?

Who I am
Catherine Le Nevez
@catherinelenevez
Author and references

It is very common that when we post information that includes an address, we skip to manually search for it on Google Maps, which sometimes leads to confusion or errors.

Who hasn't found out that you looked for the wrong address and ended up in the wrong place. Well, that won't be a problem anymore. With this step by step you can enter and view Google Maps with the address you want on your website.

It's as simple as labeling place addresses in Google Maps or creating, adding and organizing captions in Google Maps.



From now on, it will no longer be a problem to show your site visitors where that new park you have visited and loved is located. Or maybe you own a business and want your address listed so that everyone can visit you.

The use is up to you. We take care of showing you the best way to generate, insert and display the map you need on your website.

 

Generate the map from Google Maps

In order to insert Google Maps on a website, for example on platforms such as WordPress, we must search within Maps for the address that we want to be displayed in the first instance on our page. Of course, you need to log into Google first when you open Chrome.

After identifying the address, we select the «Share» option in which we will see two tabs. We will choose the one that suits our wish "Embed a map".

Being in this tab, we will have a preview of the map with the address we are looking for highlighted.

You will realize that the map is editable, that is, you can move the focal point to the side you want it to be perceived. This way it will be displayed after you enter it on our website.



Plus, you'll have the opportunity to decide between different map sizes, so you can select the one that works best for you. You can also choose the custom size, where you have to enter the values.

Having the map as we want, we will copy the information which we will find at the bottom of the window. This is the individual code for the map.

How to insert the map from Google Maps

Having the map code we will start putting Google Maps on a website. In this case, we'll show you step by step how to do it in WordPress, though is very similar in other content managers (CMS).

We will go to the post where we want to have the map, in the editing part. Above we go to the «HTML» mode.

 

In this option, we will paste the address we extracted from the map. Just where we want the map to appear.

After that, if we go back to the «Visual» mode, we will notice where we have inserted the map. Don't forget to save the post.

And voila, the map is correctly included in our publication. The best thing is that this is an interactive map, which includes all the options of Maps itself.


Generate a map without CMS

In case you want to generate a map that won't be used on websites with content managers, the process is a little less simple.

We need to create a folder, in which we will find a "Text document" (.txt) with the desired name.

Next, we will open the .txt with the »Code Editor» of preference. An HTML5 must be generated, followed by an HTLM2.5.


Accordingly, we will insert the map code in the «Body». And let's say "Save".

By opening this document in a browser, we will see the fully interactive map and in a single tab.

We can insert it or share it wherever we want and every time it is run in a browser, it will show us the map with the address and the characteristics that we have already configured.

TagsTutorial
add a comment of How to insert and display Google Maps on a website?
Comment sent successfully! We will review it in the next few hours.