How to set google map location in bootstrap theme / 10 July 2017 - 04:57:21

How to Set Google Map Location in Bootstrap Themes

Nowadays, the most favoured map is google map, and in my opinion there is no alternative to this. It is used for different cases, however, one of the most popular use is to show the location of the company on the website.

We are using this service in our templates. You can find google maps in all of our template’s contact us section. We are receiving a lot of emails about: how to set google map location on contact page?

Therefore, we decided to make a blog post about how to do it. For example, let take this bootstrap template: and lets go to contact page here:

As you can see, we gave google map on contact page. Lets try to change the location together. First of all, we should specify what size we want our map to be. In case of this website its 870x360.

Contact Page

To change the location go to this website:, which is Google Map builder.

Map Building

Press on Start Building and you will be redirected to following page:

Map building preferencies

Left side fields should be filled. The first one is not needed. Second one asks for ID number that you can come up with. Dimensions Pixels decides the size of the google map on your website, which is 870x360 in our case. The next step is why we are writing this article. If you want to input your location, press button Add Location


and input your address and save it by clicking on button SAVE.

The next step is choosing the zoom, which you can do by clicking on the zoom buttons(showing + and – on the left side of the map).

Saved Map

Press on it and choose the zoom that you like. I like number 16. You can also choose how it looks and where its placed.

In order to receive Google map’s code, you will need to save it. To do that you should press green button, which says SAVE MAP and you should see a popup window with following information:

Map Code

One of the good functionalities of this builder is that you can choose different layout/design/theme for the map. For this, you should choose your favorite one from the field Snazzy Mao Theme. Personally for me, I chose Cobalt and now its time to press the button Get Code to receive the code, which we will put in our contact us page. If you press on the button, you should receive the following information:

Contact address

Copy this code and replace it on your website. The code looked like this before:

How to set google map location

However, after changing it, it should look like this:

html code

Save the page and after refreshing your contact page in the browser, it should look like this:

Contact page address

If you misunderstood anything, you can watch video tutorial and see everything better in the video.

All our Bootstrap themes can be seen here: Bootstrap themes, in case if you have not experience in bootstrap, we recommend you to download one of our free bootstrap template or theme and try your experience first, If you have any questions, please write in comments and we will help you immediately.

Google Map Location



google map location



No comments yet.

Leave A Reply

Subscribe to our newsletters! Be the first who receive all our news, ideas and offers!