You should have a Google map on your website, usually on the Contact page, but you may also want to have a smaller map in the footer of your website that would come out on every page.
NOTE: This is an updated version of the instructions in the video. The video is still helpful in following some of the steps.
Reasons for Embedding a Map into the Footer
There are a couple of reasons why you might want an embedded map in your footer. You want to show your potential clients and visitors exactly where you are on a map and also for SEO purposes. This is a good indicator for your maps location, maps ranking, and your Google My Business (now called Google Business Profile).
How to Embed the Map
Let’s go ahead and look how to do this. It’s very simple to do.
There are three ways to achieve the same results.
- In the backend of your WordPress site, go to Appearance > Widgets. In the latest version a WordPress (5.8.1) at the time of this writing the traditional widgets have been replaced by Gutenberg blocks. There have been some problems with the widgets in Gutenberg block. But I will explain this method first.
Scroll down until you see the widget area and find an unused footer widget. In this case I am going to use Footer Builder Widget 4. Click Add Block.
Search for HTML and click on Write HTML. This is where you will insert the code for your map.
Next, head over to a website called 1 Map. The first thing you need to do is fill in the address you want to show on your map. This address will then show up on the map inside the program. For the footer map the size shown is going to be too big for the footer area. I would recommend changing it to around 300 pixels wide by 200 pixels high. You can then preview the size and make adjustments as needed.
If you get an error in creating a map based on your address there may be a problem with your Google API. Inside the error dialog box click “do you own this website?” for solutions.
If you have a Google My Business (now Google Business Profile) there is an alternate method.
Search for your business address in Google Maps and click on the Share button.
In the box that appears click Embed a map. Then click COPY HTML.
Paste the code in Notepad (Windows) or TextEdit for Mac users. This is because you will alter this code slightly.
Your code will look something like this:
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3392.6953198535366!2d-106.33265228499799!3d31.751516381293786!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86e74581efa352cf%3A0x22e7f909400e7e85!2sBlue%20Lacy%20SEO!5e0!3m2!1sen!2sus!4v1636527496479!5m2!1sen!2sus” width=”600″ height=”450″ style=”border:0;” allowfullscreen=”” loading=”lazy”></iframe>
It is loaded in what is called an iframe. The part you are going to change is the size of the map. The width and height in the code may me 600 x 450, which is too big for a footer. You can change these numbers to 300 x 200 or any size you want. Only change the numbers inside the quotes and nothing else.
If you want to try some advanced SEO follow this:
Find the area in the code that has your business name, such as: Blue%20Lacy%20SEO.
You can add keywords after your business name by adding a %20 after each word. This code just tells the browser to add a space after each word. For example, you could add %20web%20design or %20roofing%20repair. Don’t get too caried away with adding keywords, just a few will suffice.
When you are done modifying the code, copy it.
Go back the widget area of WordPress and paste the code and preview the result. Then click the Update button.
Open your website and see the result in the footer. If the map is too big or small go back to the footer widget and change the size dimensions. This is the only drawback to this method – the trial and error of getting the map size correct.
2. The second method is as follows:
If you had trouble using the Gutenberg block editor for the footer widget, you can revert back to the classic widgets settings screens in Appearance – Widgets.
Search for a plugin called Classic Widgets in WordPress. Install and activate the plugin. That’s all there is to it. You will now see the classic footer widgets.
Choose an empty footer widget area.
Under Available Widgets find the Text area and drag it over to the footer widget you will be using. You will populate that area with some code that will show your Google map.
Insert your modified code and click on the Text part. You can also add a title to your map if you wish. Then click Save.
3. The third way you could do this is to go to Appearance > Customize, click on Footer and expand Footer Widgets.
On the right panel, scroll down to the footer and click the round pencil in the widget area you’re using for the map. In the left panel you will see the same widget area you saw earlier. Click on Text and paste the code. You can also enter a title, such as “Our Location.” Make sure to click Publish at the top when you are finished.
Go to your browser, refresh it and you will see the map in your footer. If you have any questions please email me, Ron Collins at Blue Lacy SEO.
