- By
Adding a Google map to WordPress is one of those tasks you’d think could be a real pain… probably requiring some kind of special plugin or custom code. Actually, nope. In fact, it really is pretty much painless (when you know how), all you need to do is cut and paste a code snippet from Google into any WordPress post or page.
Let’s take a look (step by step):
How to add a Google Map to a WordPress page?
– (note: video credits to Topher DeRosia – creator of HeroPress)
Video Transcript:
Hi! This is Topher with WinningWP. In this video I’m going to show you how to add a Google map to a WordPress Page. There are two steps. The first step is getting your map. I’m here at maps.google.com and in the top left I’m going to search. I’m actually going to search for Pennsylvania Avenue which is the White House. And there it is right there. Now to get the map on the left here we want to click on the share button, then embed map. In the top left here you’ll see medium with a little down arrow and you can choose to do a small map, the medium one you just saw, a large map, or a custom size. And custom size would allow you to have something like a tall narrow map, or a wide short one. I’m going to choose medium. Now just to the right of that drop-down list you’ll see some code and it’s already highlighted so all you need to do is copy. Now the next step is to put this code into our website. Here we are in my WordPress website and I’m going to create a new page called map. And here in the content area in the top right there’s a text tab let’s click that. Then I’ll paste in the code that I got from Google. If I click the visual tab I get to see the map right in my content editor. Next I’m going to click publish and then view the map on the front end of my website. And there it is. Now one last thing I want to show you, you may recall that custom size was one of our options. If we go back to the text tab you’ll note that we have some tags here for width and height . You can change the size of your map simply by editing those numbers it’s pixels wide by tall. If we make it tall and update then it’s a square whereas before it was kind of rectangular. There’s one last thing I want to show you if your theme supports it this map is responsive. I’m going to click customize here. I’m using the theme so here’s our map and at the bottom of the customizer there are three little icons. This one that’s highlighted is for desktop, but then we have tablet, and then we have phone. And you can see that my map got very thin when we went to phone but it stays nice and wide for tablet and desktop. Google maps can be really really useful for your users so feel free to drop them right into your website. If you’d like to learn more about WordPress check out WinningWP.com.
Anything to add?
