How to Add a Google Map to WordPress (2024 Guide)
by Priyadarshini on November 22, 2024
Adding a Google Maps location to your WordPress site can help visitors easily find your physical location and improve your website’s user experience. Having a map provides a sense of legitimacy, especially for businesses. It also provides SEO benefits. It can help with local SEO, making it easier for local customers to find you.
In this guide we are going to see two easy steps on how to add Google Map without a plugin which is very easy for beginners. Here’s a step-by-step guide to help you add Google Maps to your site seamlessly.
Embedding Google Maps (Without a Plugin)
Step 1: Getting the link for Google Maps Location
- Go to Google Maps and enter your address or desired location into the search bar. For example, if we search for “McDonald’s,” the location appears marked with a red pin on the right side. If you want to add a location that isn’t readily available, you can simply navigate to the area on the map and place a pin at the desired spot.
- After finding your location, click the Share button.
- In the pop-up, go to the Embed a Map tab.
- Choose your preferred map size (small, medium, large, or custom size).
- As an example we are choosing a custom size i.e 800 x 600. You can edit and change this based on your site preference. You can also click on > Preview actual size to have an oveview on how it will look.
- Once you decide on the size, copy the HTML code provided.
Step 2: Adding Google Maps location to WordPress
- Go to the WordPress dashboard > Pages > All Pages for the page where you want the map. You can also choose a post. As an example we are selecting the ‘Contact Us‘ page, where we want to add our map.
- Once opened, select the block where you want your map to be. Search for ‘/HTML’ and select ‘Custom HTML‘.
- Paste the code copied in the HTML Block.
- Click on > Save/Update and preview the changes on your page.
- Your map will look like this on your page with your custom size. However if you want the map to fill the screen size, you need to make a some small change in the HTML code.
- Go to edit mode > select html block > search for width in the HTML code. Your custom width will appear in the code.
- In place of ‘800’ in this case, type > “100%” for the map to fill the screen size and click on> save.
- Once saved, your map will look like this and fill the screen.
Best Practices for Adding Google Maps to Your Site
- Avoid adding multiple maps on a single page to prevent slowing down your site.
- Mak sure to use accurate location Data. Double-check your address to make sure visitors land at the right location.
- Ensure that the map is responsive and displays well on mobile devices. Adjust the map dimensions, font size, and interactive elements for easier viewing on smaller screens.
Conclusion
Adding a Google Maps location to your WordPress site enhances user experience and can improve SEO. This guide will help you set up Google Maps on your site in no time. Let us know in the comments if this guide helped you! Or feel free to ask questions if you encounter any issues while adding Google Maps.
Also, Explore our JetixWP blog for more awesome and insightful articles like this one! 🌟
Happy Website Building! 🌟
Trending Posts
How to Backup and Restore your WordPress Site?
Having a backup can save you from potential data loss and site downtime. Learn how to backup and restore your WordPress site with these simple steps.
How to Duplicate page in Elementor?
Duplicating a page saves a lot of time. It helps to maintain consistent formatting across our site. Learn how to duplicate Pages in two easy steps. Read More here..
How to add a Contact Form in WordPress
Learn how to create a free contact form on your WordPress website that matches our needs, has a good design, is easy to setup.
How to add Featured Videos to WooCommerce Products?
Adding Featured Videos to WooCommerce Products can display product features in a better way and enhance buying experience. Read More here.
Leave a Reply