How to Embed a Google Map

There are a lot of tutorials on how to use Google Maps in WordPress, so here is a very simple and detailed way of doing it.

Embed a Map

It’s quite simple actually. Begin by going to Google Maps. From there you can type in the exact address you’re looking for or a general location and click enter on your keyboard (or click the little blue search button).

This is a picture of Google maps and how to use the search button.

If you want to show a map that has directions from Point A to Point B, the other option you have is to click on the button that says “Get Directions”. That will drop down two search bars; one will have an “A” in front of it and the other will have a “B”. Now you can type in the destination you are starting from on the first search bar (The one with the “A” in front of it) and, on the second, type in the destination you want to get to.

This is a picture of showing where it says point A to point B.

Now, if for some reason you typed in the destinations in reverse ( I, myself, do this all the time), all you have to do is click on the little button at the end of both of the search bars that has an up arrow and down arrow. That will reverse your starting point with your ending point and vice versa.

This is a picture of how to reverse your point A and point B destinations.

You now have your directions on the left side of the map and an image of the path of how to get there on the right. How do you share this on WordPress? Simple. Click on the button that looks like a little chain.

This is a picture of how to start the process of embedding a Google Map into your WordPress.

Doing that will bring up a side pop-up that looks like this:

This is a picture of what you copy and paste in your WordPress to get a Google Map.

Highlight the code that appears under the title “Paste HTML to embed in website”. Right click on your mouse, (for Mac users press the control button on your keyboard, then click) and select the copy option from the menu.

This is a picture of the highlighted word "copy" to show you copy the link into WordPress.

If, however, you want to change how big the map appears on WordPress, then instead of copying the code, click the blue link below it that says “Customize and preview embedded map”. Clicking this will open a new mini window.

This is a picture of a screenshot of clicking on the link customize and preview map. You may change the size of the map to small, medium, large, or the size of your choice.

You may change the size of the map from small, medium, large, or the size of your choice. After you’ve decided on the size of your map, just copy and paste the HTML code at the bottom to your WordPress site!

Congratuations!! You have just embedded a map using Google Maps into your WordPress!!

Questions and Additional Information

“What if I don’t have a specific location?” Great question! If you want to just tell your readers where, lets say, all the different types of food places are in your area, all you have to do is type in the word food in the search box. The resulting map will show a bunch of little red dots, each with a letter on it ranging from A-J. These will indicate locations of food places and a list will also appear as a key giving you more information on each map point.

“Why does the map only show so many lettered food places? ” Well, it would be a little confusing if Google Maps wanted to show you all the locations using letters all at once. On top of that, there might be more than 26 food places in your area.

“Help! My Google Maps looks like this and I don’t know where the embedding button is!”

This is a picture of a screenshot of how the new Google Maps looks like.

Take a deep breathe, and release. It’s okay. You have two options to pick from.

First, you can click on the little question mark right next to the gear on the bottom right corner which will bring up a little pop-up. The last option given in the pop-up is “Return to classic Google Maps”. Click that and voila you have returned to classic maps and can follow the directions above.

This is a picture of a screenshot of Google Maps and how to get back to classic maps.

Your second option is to type in your address just as you did at the beginning of this tutorial and, when you want to get the HTML code, all you have to do is press the little gear button on the bottom right corner.

This is a picture of a screenshot of how to share the map you have.

That will bring up a pop up and your first option is to “Share and embed map.” There is another pop up, and you will see two tabs. One will say “Share link” and will have a blue line under it. The next will say “Embed map”.

This is a screenshot of how to get to html code in the new Google Maps.

You want to click on “Embed map” and now the blue line should be under it. Just like before you can pick the size of your map (this time from a little drop down menu).

This is a screenshot of how to change the size of your google map you are going to embed to your WordPress.

Then copy the HTML code given and paste into your WordPress post/page.

Advertisements

One thought on “How to Embed a Google Map”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s