How To Add A Map To Your Website

May 9, 2015

If you are interested in adding a map to your website, then you have come to the right place. You may just want a basic map that shows where your business is located. Or, perhaps you have multiple locations and want that on your site. Whatever the case, we will show you how to get a Google map code and add it to a website, using Weebly, a popular website builder, as an example.

Why Add a Map?

Adding a map to your site is helpful for a variety of reasons. One good example, is to have a map with your business location on it on your website’s contact page. This gives your customer a visual example of where your business is. If they know the area, it can save them the added step of having to get directions.

Having a map is especially helpful if your business has multiple locations. Potential customers/website visitors can look at the map, see all your locations, and figure out which location is closest to them. If you use a google map, they can even click on the map/location and be sent directly to google maps to get directions, which is super handy.

Using Google Maps

Most people on the web have used GoogleMaps at one time or another. If you have not, it is pretty simple. You can either search Google Maps on Google itself and click on the link, or go there directly, at

Here are the steps to adding a map with a specific location to your site.

  • Put in your business address/the address you want to search for in the bar on the top-left of the screen and click the search (magnifying glass) on the right of the search bar

FireShot Capture - How to Add a Map to Your Website - Goog_ -

  • Once you have done that, go to the bottom right of the screen where the settings button is (looks like a gear) and click on it.

FireShot Capture2 - How to Add a Map to Your Website - Goog_ -

  • Click on the “Share or Embed Map” tab

FireShot Capture 3 - How to Add a Map to Your Website - Goog_ -

  • Once the window pops up, click the “Embed Map” tab

FireShot Capture 4 - How to Add a Map to Your Website - Goog_ -

  • Pick the size you want for your map, and then copy the HTML code that is provided in the box

FireShot Capture 5  - How to Add a Map to Your Website - Goog_ -

  • Go to your website and embed the code on your contact page (see below)

Embedding a Map on a Weebly Page

Weebly is one of the new and easier to use drag-and-drop website builders. It is Fit Small Business’s recommend website builder and one of the best and easiest to use. We’ll walk you through the steps to add a map to one of your Weebly website pages.

There are two ways to add maps to your Weebly page. First, Weebly just has a map widget on its builder that you can drag-and-drop on any page, and then just edit the address to match the location you want, which is super simple.

However, not all website builders have map widgets, which is why we will walk you through adding a map using internet coding, which is an option most drag-and-drop builders (Wix, SquareSpace, etc) will accomodate.

  1. The first step, is to get the google map location code for the location you want to add, as explained in the steps above.
  2. Next, you go to the Weebly(or other builder) page where you want to add the map.
  3. Drag-and-drop the “embed code” widget option from the builder on the left-hand side of the page to where you want the map.
  4. Paste the location code you copied earlier from google maps into the code box and you should be good to go.


As you can see, a map adds a nice element of visual interest and gives your visitors/customers a quick snapshot of where you are located. Although the above process for adding a map might sound tricky, it is really pretty simple. It can be done in about 5-10 minutes. So, if you are looking to add something interesting to your site/contact page, add a map!

Digital & Social Articles on Business 2 Community


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.