Map is one of the most used elements in websites & google map is definitely the most popular map solution. Today, I’ll show you how to embed google map in wordpress website.

To do so, I’ll use a plugin called “WP Google Maps”. Actually there are many plugins to show google map in wordpress but I prefer WP Google Maps because of some features and it is user friendly.

Now lets start the tutorial.

Embed Google Map in WordPress

Step 1: Download and install the plugin from WordPress.

embed google map in wordpress website

Download Link

Step 2: Creating your first map and understanding the basic settings

Once the plugin has been installed and activated, you should notice the link called “Maps” in the left navigation menu of your wp-admin section

12

Clicking on the “Maps” link will take you to the following page (below). This is the page that allows you to edit or create new maps. For this example, we will be editing the existing map. Click on “Edit” link to edit the map of your choice.

12

Once loaded, you should see something similar to this.

12

Map name: Allows you to give a descriptive name for your map (does not show up on the front end)

**If you want your map to be responsive, set the width to 100% and the height to 400px

Zoom level: To change the zoom level of your map, you can either use your mouse scroll wheel or the zoom controls on the map. Once you’re happy with the zoom level, press “Save Map” to save the settings

Create Marker: By scrolling further down the page, you should notice the following section that allows you to insert markers into your map.

12

Address/GPS (mandatory):

Insert the address or GPS co-ordinates of where you want the marker to be placed. The plugin will automatically place the marker for you on the map based on what you insert here. If it’s not in the exact position you want, don’t worry, you can can edit your marker and drag it to the correct location once inserted. This is the only mandatory field.

Animation:

There are three options for this setting:

None: marker appears normally on the map
Bounce: marker jumps up and down continually
Drop: marker drops in from above when the map has loaded

InfoWindow open by default:

Yes: The info window for this marker will be open by default
No: The info window for this marker will need to be clicked on first before it is opened

When you have added all the relevant information for your marker, click on the “Save Marker” button. The marker should now appear on the map as well as in the marker list.

Step 3: Display map on your website.

In order for the map to appear on your website, you need to copy and paste the short code to either a post or a page. The short code for your map can be found at the top of the page. This is an example of the short code:

12

Copy and paste this short code into a post or page. It should look like this:

12

Once done, click on the “Publish” button on your post/page and view the page. Your map should show automatically on the post/page your published it on.

We hope now you can set up your own map and publish it in WordPress Site/blog.

Comments

Share.