How to Add a Google Map of My Business in WordPress

Adding a Google Map displaying the location of your business to your website is a great way to ensure customers are able to find your business’s store front or office.

Google’s embed tool for sharing maps is a quick and easy way for anyone to include a map on their website.

Generating the Google Maps Embed Code

  1. Visit https://www.google.com.au/maps/.
  2. Search for your Business or the specific street address of your business.
  3. From the side panel click the “Share” link.
  4. On the pop-up window switch to the “Embed map” tab.
  5. Select and copy the provided code. It should appear similar to:
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.807630211391!2d144.9668689160748!3d-37.81797464205889!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x38e74745ead60eab!2sFederation+Square!5e0!3m2!1sen!2sau!4v1470103698164" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Adding the Map

  1. In your WordPress dashboard open the page or post you wish to add the map to.
  2. Ensure you’re in “Text” mode and not “Visual” mode of the editor.
  3. Paste the Google Map embed code into the content editor.
  4. Save or publish your changes.

Making the Map Responsive

The default Google Map embed code isn’t responsive, however with the use of some additional markup and CSS we can adjust the size and responsiveness of the map.

HTML

Locate your Google Maps embed code and wrap it in a <div class="google-map"> tag as indicated below:

<div class="google-map"><iframe ...></iframe></div>
CSS

Add the following CSS to your theme’s style sheet:

.google-map {
	max-width: 100%;
	overflow: hidden; 
	padding-bottom: 56.25%;
	position: relative; 
}
.google-map iframe {
	height: 100%; 
	position: absolute;
	top: 0;
	left: 0; 
	width: 100%;
}

Prevent Accidental Map Interactions

To prevent accidental map scrolling or zooming of the map, as often occurs when using a mouse wheel we will use a combination of jQuery (javascript) and CSS. Where the user must first click or tap on the map before interaction is allowed.

jQuery

Add the follow to your theme’s referenced javascript file:

$(document).ready(function () {
	// Adds the scroll-off class to google-map iframe on page load
	$('.google-map iframe').addClass('scroll-off'); 

	// Removes the scroll-off class when the map is clicked
	$('.google-map').on('click', function () {
		$('.google-map iframe').removeClass('scroll-off');
	});

	// Reinstates the scroll-off class when the cursor leaves the map area.
	$('.google-map iframe').mouseleave(function () {
		$('.google-map iframe').addClass('scroll-off');
	});
});
CSS

Add the following short snippet of CSS to your theme’s style sheet:

.google-map .scroll-off {
	pointer-events: none;
}

Example: Embedded Google Map

Scroll to Top