One of the great features of the web is our ability to pull in content from different sources and display them on one page. You can pull in images or video or audio or interactive content like maps which is what we're going to do right now. I've created this page called Guest Infothat will be displayed only to invited guests that has all the information about the wedding and the reception including times and locations.To make this page more useful, I want to add in Google Maps that point specifically at where we're going to go.
Here we have 3 pm: Ceremony at Carmel Point so I want to add a map for Carmel Point and then further down we have 5 pm: Reception at Casanova Restaurant so I also want to add a map for Casanova Restaurant. I can do that by pulling that content in from Google. Let me show you how to do just that, find a map on Google and pull it in to your WordPress pages or WordPress posts. First, I go to maps.google.com and from here I can make searches for either locations or addresses.
I'm going to search for Carmel Point. Here we have Carmel Point and now I want this map to go on my site. To start off, I need the code so I'll go down to the bottom right-hand corner of Google Maps and find this cogwheel and click on it. Then I'll click Share or embed map.
Here, I can get a Share link to share the link with my friends or I can get the Embed map which allows me to embed the map on my page. Now if I want to, I could use the customization features here but I'm not going to touch that because I'm going to do all this manually.
Instead, I'll just grab the IFrame code that you see here on this field. Just copy it out and I go edit my page. From here, I need to go to the Text editor so click on the Text tab up here in the top right-hand corner and find where I want to place the map. If I scroll down, you can see here we have < h3 > 3 pm: Ceremony at Carmel Point and next sentence, I want the map to display directly underneath that. Now, if I had just paste in the map exactly as I copied it out of Google right now and update my page and then go and view the page, you'll see it worksbut it doesn't work perfectly.
If I go and resize this window now, you'll see that as I resize it, the map doesn't stay centered and it gets, kind of, squished and weird and depending on the theme you're using, it might actually start spilling out on the right-hand side of your content. It's also way too big for me right now, I want to make it vertically smaller and then also make it properly responsive to my page. To do that, I'm going to go back and edit the page and find the code I just pasted in, it's right here, and at the very end of that code you'll see it says "width 600" which is 600 pixelsand "height 450" which would be 450 pixels.
What I'm going to do here is change the width to 100% instead. That would be 100% of the available space within the container the map is placed in or in this case, within the context of that page. I'll also change the height to 300 pixels because I think that's a good size for this particular map and click Update. Now, I can go back and view the page again, scroll down, the map is now much shorter and when I resize it, you'll notice that the map area stays centered as I scroll up and down.
If you have a theme that doesn't properly control IFrames the map wouldn't start spilling out over the sides. So the hundred percent trick always works better. Now that I've added the map for Carmel Point, I also want to add a map for the other location so I'll scroll down and find the address, so it says "5th Avenue between Mission and San Carlos "Carmel-by-the-Sea". I'll just go and paste that in and see if that gives me anything. And lo and behold it does.
I can go and click on the cogwheel again, Share or embed map, copy out the map location, go back and edit my page, scroll down until I find where I want to place this map, maybe I'll place this after the address. Again I'm going to change the width to 100% and the height to 300, update the page again, view the page and now when I scroll down, I have the map to Carmel Point and I have the map to the Casanova Restaurant.
You see, even though I just entered this general address, Google figured out what I was looking for and has added the information for the restaurant itself. This makes it easy for my visitors to get directions and know where to go and if they have a Google phone or use Google Maps on their devices, they'll be able to navigate directly to the different locations. I don't know about you but I think this is pretty awesome!
