How to Add a Google Map to WordPress (2024 Guide)

Priyadarshini

by Priyadarshini on November 22, 2024

Jetix

/

Blog

/

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.

  • 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.
Google Maps Location preview
  • After finding your location, click the Share button.
Google Maps Share icon
  • In the pop-up, go to the Embed a Map tab.
Google Maps Embed a map
  • Choose your preferred map size (small, medium, large, or custom size).
Google map embed size selection
  • 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.
Google maps embed size selection
  • Once you decide on the size, copy the HTML code provided.
Google Maps embed html code

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.
WordPress dashboard Contact Us page
  • Once opened, select the block where you want your map to be. Search for ‘/HTML’ and select ‘Custom HTML‘.
Wordpress editor custom HTML Block
  • Paste the code copied in the HTML Block.
Custom HTML Block editor html code
  • Click on > Save/Update and preview the changes on your page.
Gutenberg Editor save changes
  • 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.
Preview embedded map
  • Go to edit mode > select html block > search for width in the HTML code. Your custom width will appear in the code.
Adjust width in html code
  • In place of ‘800’ in this case, type > “100%” for the map to fill the screen size and click on> save.
adjust width changes in html code
  • Once saved, your map will look like this and fill the screen.
Preview google maps location in website
  • 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.

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! 🌟

Leave a Reply

Your email address will not be published. Required fields are marked *