layout by flywheel responsive google map feature man on phone in front of skyline

How to add a responsive Google Map in WordPress

Abbey Fitzgerald's Layout avatar

No matter where you’re going, Google Maps will show you the way. Being able to instantly get directions has become essential while navigating through cities. And as the most popular map solution, adding Google Maps to your WordPress site could not be easier. This user-friendly mapping technology will provide business information, contact information, and directions to the location of your choice, making navigation super convenient for your users.

Ready to add a map to your WordPress site? There are a couple of different ways to add one, manually and with a plugin. Let’s start with the DIY method.

Remember: You should never make changes on a live site. Our free local development app, Local by Flywheel, will help you simplify your workflow and safely experiment with your site. Try it today!

Manually adding Google Maps

Embedding the map

Adding and embedding a map is how you will get the actual map to display on a page, and it only takes a couple of simple steps. Manually adding the map is the way to go if you only have one (or just a few) to add to your site.

1. Go to Google Maps and enter the location.

2. Click the search button.

responsive-google-map-wordpress-search-location

3. Choose “Share” (it will be the option on the right).

responsive-google-map-wordpress-share-map

4. Copy the Embed code, making sure it is all selected before copying.

responsive-google-map-wordpress-embed-map-snippet

Adding the map in WordPress

In order to add the map, you will need to edit a Post or Page. A great spot to add your map is the contact page or any post that talks about a specific location that your users might need to find.

5. Go to Posts > Add or Pages > Add.

responsive-google-map-wordpress-new-page

6. Open the HTML editor (in Text mode) and paste the Embed code wherever you’d like the map to appear.

responsive-google-map-wordpress-iframe-map

7. Choose Save Draft, Update, or Publish depending on your preference.

If you view the page, you should see your map. If the map isn’t showing up, be sure to double check that the entire embed code was copied and pasted into the editor.

responsive-google-map-wordpress-embed-map

Making the map responsive

This is optional when working with your map, but a great idea to provide the greatest user experience for you viewers. Users are typically on the go when they’re looking for directions, so this responsive map will be helpful when they are using their mobile device.

You may have noticed there was a width and height measurement in the iframe that you pasted into the editor – you’ll need to do some adjusting to make the map responsive. Some simple CSS will do the trick; all it will take is an extra div tag around the embed code. Use the class responsive-map so that your code now looks like this:

<div class="responsive-map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3510.126963167523!2d-81.5660680494897!3d28.385232982430246!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88dd7ee634caa5f7%3A0xa71e391fd01cf1a0!2sWalt+Disney+World+Resort!5e0!3m2!1sen!2sus!4v1463933469006" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Add the CSS

Adding these CSS properties to your stylesheet is the last thing that has to be done. Of course, you may want to slightly adjust things depending on your page design.

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


And that’s it! With those simple code additions, you’ll have a responsive map on your site. Not sure if you want to go the DIY route? Now let’s go over a simple plugin solution.

Check out all the code with this CodePen!

layout by flywheel responsive google map feature man on phone pointing in direction

Adding maps with the MapPress Easy Google Plugin

Manually embedding the map is a good approach when there are just a few maps, but what happens if you have to add a lot? For example, a business site might have multiple locations that need to be displayed. Adding each map individually might get a bit tedious. This is where a plugin comes in handy. There are plenty of great options to choose from, but MapPress Easy Google Maps is an option worth checking out (and what I’ll use in this tutorial).

To start, you will need to install and activate MapPress Easy Google Maps on your WordPress site.

Plugin settings

You’ll notice the plugin settings menu in the admin sidebar, and you’ll also notice that there are lots of  options that come with MapPress, making it a flexible solution for any site.  Things like map type, zoom, border, alignment, controls, etc. can easily be adjusted here.

Adding the map

Again, in order to add the map, you will need to edit a Post or Page.

1. Go to Posts > Add or Pages > Add.

responsive-google-map-wordpress-new-page

2. Scroll down to the MapPress section on the edit screen and choose “New Map”.

responsive-google-map-wordpress-new-map

3. You’ll see the MapPress editor where you can enter an address for your map. Even if you don’t have the exact address, try entering the name of the location and it should find it for you. If you’d like to share your location, the “My Location” link will allow the plugin to automatically detect your location.

responsive-google-map-wordpress-mappress

4. Add a title to your map and choose the map size.

Note: The map width can be specified as a percentage in the map editor or the shortcode, making it mobile friendly. The height typically remains fixed. If you prefer to add the height and width to the shortcode, it would look something like this: [mappress mapid="X" width="100%" height="400"]

5. Click on “Save” and then “Insert into Post.” The map will now be in your post.

responsive-google-map-wordpress-map-shortcode

6. Update or publish your post to see the map.

These tips and tricks should give some direction and insight into Google Maps integration for your website. Whether the maps are added manually or with a plugin, having a map readily available to your users will help them arrive at the correct place.

This article was originally published on February 2nd, 2016. It was last updated February 14th, 2018.

Comments ( 14 )

  1. Adarsh

    October 5, 2016

    Tried Option 1. It doesn't become responsive.

  2. ghozaliq

    November 26, 2016

    great, thanks !!
    i now can embed a responsive google maps after add the code in CSS

    big thanks !!!

  3. Raymond Parker

    February 5, 2017

    The manual option does not result in a responsive map.

  4. Ashutosh

    September 5, 2017

    Hi you have written very well. Can we do some changes in the map if i wish. Please tell guys

  5. Frank

    March 3, 2018

    Great, Thanks !

  6. Frank

    March 5, 2018

    So much help! thanks

  7. dhrumil

    March 6, 2018

    google maps not responsive

  8. Olivia

    March 14, 2018

    I am really feeling delighted to glimpse your post which is full of quality information and very helpful to explore constructive work on Google map for my site. Thanks for your value-added work.

  9. Sarah Suits

    March 27, 2018

    So helpful. Thank you!

  10. Josh

    May 8, 2018

    It's a bummer but any use of Google Maps is no longer 100% free. Google is making some big changes, and now even charges for ANY use of the Google Maps API. They still allow a certain amount of map views without charging, but it applies to everyone now. More details here if anyone is interested: https://mapifypro.com/yep-google-maps-really-is-charging-everyone/

  11. türkçe poker siteleri

    September 28, 2018

    Great post. I am going through some of these issues as well..

  12. Cody Tritter

    December 20, 2018

    Thanks for the post! I can't get it to work, but trying!

  13. Kent Smith

    December 27, 2018

    Darn! I was hoping this would work but unfortunately it's not responsive.

    • Kent Smith

      December 30, 2018

      Not sure what changed but it's working now!

  14. EFETACK

    March 4, 2019

    Hi there, thank you so much. Was testing a few plugins, but I found all of the found too expensive for now. Maybe later will purchase one. The above mentioned code + css works fine. All responsive now. See my latest post if you want to.
    Thanks again for this useful and quick help.

    Have a great time.

    EFE

Join the discussion