Add a Google Map to a Bootstrap 3 Contact Page

In this tutorial we’ll add a Google Map to a Bootstrap 3 contact page. We’ll start by inserting a basic Map into a simple contact page; then you’ll learn how to customize the map and finally we’ll create modals for the contact page that will display different Google Maps.

Basic Google Map

To create a basic Google Map we need to do several things:

  1. Insert a container for the map inside the body section
  2. Set height and width for the map container
  3. Add a script that will load the symbols and definitions for the Google Maps API
  4. Write a script defining a function with the location variable etc. and invoke that function after the window has finished loading

Below you see the markup for a basic Google Map which I will then explain step by step:

Adding a container for the map

Inside the body section we see a div that will act as the container for the map (line 21).

The ID for this div (‘map-container’ in this tutorial) will later on be used in the script instructing the browser where to display the map.

Because we work with Bootstrap styling I also set the width for the map/container with one of the Bootstrap grid classes.

Setting a height for the map

In the style section we must set a height for the map. Without it the div containing the map will simply collapse.As you can see I used a fixed height for the map.If you prefer using a height set in percentages you also need to insert a 100% height for the html and body like this:

Loading the Google Maps API

Loading the Google Maps API requires the script tag below (see also line 27 above):

With this script we load all of the symbols and definitions necessary for using the Google Maps API.

There are 3 things I want to point out regarding this script tag:

    1. Sensor parameter

The sensor parameter must be included.

I have set this parameter to false. If your application uses a sensor (such as a GPS locator) to determine the user’s location you must set this parameter to true.

    1. HTTP or HTTPS

If your application uses HTTPS because it includes sensitive data requests then you must change the HTTP in the URL to HTTPS.

    1. API Key

The URL in the script I provided above doesn’t contain a so-called API key. The advantage of the script tag above is that it will work on any domain. Although Google states that “All Maps API applications* should load the Maps API using an API key.” this key is not mandatory.

However if you do want to monitor your application’s Maps API usage, and ensure that Google can contact you about your application if necessary you should obtain an API key and insert it into the URL of the script tag. More information can be found in this tutorial about Obtaining an API key.

Script for a basic map

For those of you who are unfamiliar with JavaScript (and interested in having a basic understanding of what the script does) this is a brief explanation.

For conveniences sake I repeat the script here:

The script consists of 2 parts:

  1. The first part (lines 3 – 21) creates a function (with the name ‘init-map’ in this tutorial)
  2. The second part (line 23) then invokes that function after the browser window has finished loading
Location

The first variable in the function holds the location on the map (latitude and longitude).To insert your ‘own’ location open Google Maps and go to ‘your’ location. Right-click on that location and select ‘What’s here?’. The latitude and longitude for ‘your’ location will then be displayed in either the search box (classic Google Maps) or in the infobox (new Google Maps).

Map Options

The script then sets the Map Options. In this tutorial we only use the 2 required maps options (‘center‘ and ‘zoom‘).The center of the map is set to the latitude and longitude we inserted earlier. To do this we use the name of the variable ‘var_location’ which holds those location values.The map will be displayed more globally (with a low zoom value) or more specifically (with a higher zoom value).In the next tutorial we’ll look at other Maps Options (e.g. which elements to – not – display on the map).

The Marker

Most of the time we’ll want to use a marker that will show a precise location on the map. To do this we need 2 things:

  1. Create a variable that holds the values for the marker
  2. Set the marker after having created the new map

Firstly the marker is positioned by using the variable name ‘var_location’ which holds our latitude and longitude values. Then we give the marker a title which will be displayed when a user hovers over the marker.

Create a new map

We then create a variable that will hold our new map. This new map is created inside the DOM element with the ID ‘map-container’. If you decided to use another ID for your containing div you need to use that ID here as well. And we invoke the Map Options we set earlier.

Loading the map

Finally we load the map. To make sure that the map is loaded after the browser window is open we let the browser listen for this event.

To summarize: when you use this basic script you need to replace the latitude and longitude values (line 4), decide on the zoom factor (line 8), change the title for the marker (line 14) and check if the ID for the container that will hold the map is still correct (line 16).

Contact Page with Google Map

We can now insert a Google Map into a Bootstrap Contact Page.
Demo - Contact Page with Google Map

We use the same markup as before but replace the div inside the body section with:

And the style section becomes:

Warning! Bootstrap versions 3.1 and later!
The input fields in the form will align correctly with Bootstrap version up till 3.0.3. With the release of Bootstrap version 3.1 however the alignment of input-group (used for the e-mail input field) has been changed. To get this input field aligned correctly with version 3.1 you need to add this CSS rule to your style section:

 

Script to receive input from the contact form

The contact form above is derived from an earlier post Tutorial about a Contact Modal. That tutorial also contains a PHP script to make the contact form work. If you use that PHP script for this Contact Page with a Goole Map make sure to insert method="post" action="send_form_email.php" into the opening form tag (line 20 in the html markup above).

In the next tutorial you’ll learn how to customize a Google Map.

31 comments

Ender Bonnet - November 2, 2016 Reply

Thanks a lot! Muchas gracias!

Ayesha - March 4, 2016 Reply

Thank you so much. Worked for me.

Anna - November 24, 2015 Reply

Thank you so much – this works like a dream!

Theo - November 24, 2015 Reply

Thanks Anna!!

LT - February 5, 2016 Reply

This is a great tutorial, but im abit lost. Im using Bootstrap 3.3.6 and it may not make a difference..Im lost as to where
do I change the location for New York City?

Theo - February 6, 2016 Reply

Hello LT,

you need to replace the latitude and longitude (e.g. for New York City) between the round brackets (see line that starts with “var var_location = “). In the section “Location” I explained how to get the latitude and longitude for a certain location.

Raquib - October 5, 2015 Reply

That’s really awesome. Very easy to understand!

Fakhruddin Tahery - September 6, 2015 Reply

Thanks a ton! You helped me a lot. Awesome info.

Theo - September 6, 2015 Reply

Hi Fakhruddin,

glad to hear it!

Barry Kafka - June 22, 2015 Reply

Thanks for the tutorial!
I would like to force the map to re-center after resizing the viewport. Any thoughts on doing this?

Theo - June 23, 2015 Reply

Hi Barry,

the issue of re-centering a Google map after resizing the browser was addressed here:

http://statvoo.com/blog/keep-google-map-v3-centered-when-browser-is-resized/

Cheers, Theo

Eddy Karanja - June 5, 2015 Reply

Hi,
Thanks a lot for this. Worked perfectly on my site.

Andrew - April 4, 2015 Reply

Thanks for the tutorial it is working brilliantly except for one small problem. The email section seems to go outside of the container by about 15px. I have tried everything I can think of to fix this and cannot figure out what is wrong. When I shrink the screen I can see that the email section is not aligned correctly. Any ideas?

Theo - April 4, 2015 Reply

Hi Andrew,

this issue is caused by the input-group used in the demo in combination with later versions of Bootstrap. So you’re probably using a more recent version of Bootstrap than in the demo (the tutorial for the Google Map was written when Bootstrap v3.0.2 was in use).
To solve this you need to delete the line with the span tags and the input-group-addon class (line 29 in the tutorial). You also need to delete the class input-group in the line directly above the line with the span tags (see line 28 in the tutorial).

Cheers, Theo

Andrew - April 4, 2015 Reply

I thought that was the issue and was trying my hardest to keep the @ symbol in because I thought it looked cool. 🙂

I have removed the input-group and all working perfectly. Now I am just trying to get the form to work with the php. Brilliant tutorials, only just starting to use Bootstrap, it’s fantastic.

Andrew - April 4, 2015 Reply

Just realised Theo you had a css fix for this. I simply added this code to my css page and it works just like your demo now and I can keep the @.

.input-group[class*=”col-“] {
padding-right: 15px;
padding-left: 15px;
}

Craig R Morton - December 10, 2014 Reply

Great tutorial, thanks for posting.

Rizal - November 27, 2014 Reply

Thank you so much! This is very helpful 🙂 Good tutorial .

Hugo - November 9, 2014 Reply

Simply and amazing!
Just one question.
When i resize the screen for tablets, the map goes under the input areas.
Do you have any advice?

Thank you for your time to up this tutorial!

Theo - November 18, 2014 Reply

Hi Hugu,

thanks for making me aware of this. To solve this I have changed the max-width in the style section to 991px.

Cheers, Theo

Michael - August 21, 2014 Reply

Thank you for the tutorial! I have a question. How do I customize the form so that messages get sent to my company email?

Theo - August 22, 2014 Reply

Hi Michael,

you need to add method=”post” and action=”send-form-email.php” to the opening form tag. The “send-form-email.php” file is the script to send the form data to your (company) mail address. You can find the php script etc. in this tutorial: http://tutsme-webdesign.info/bootstrap-3-contact-modal/ .

Success

Theo

mars-o - August 21, 2014 Reply

thanks..never thought adding googlemaps on a site is this easy. 😀

Jojo - August 1, 2014 Reply

Regarding http/https: you can actually put the URL as “//maps.google.com/all/the/other/stuff” and it will automatically use whichever protocol the current URL is using. This is a feature in every modern browser and works for any type of asset or even ajax calls.

Stefan - July 20, 2014 Reply

Great tutorial, thanks !

juan alberto - July 16, 2014 Reply

Thank you man, you helped me alot, speccially with the google maps!! i love it!!

I am from Guatemala! Sorry for my bad english!!

Rodrigo - June 23, 2014 Reply

Great! You helped me alot!! Thanks!!

Zoumpoulakis - June 22, 2014 Reply

Thank you so much, this solved my problem with getting the google maps api to be responsive, on smaller screens!

Veljko - June 4, 2014 Reply

Thank you for the post! Fantastic info!
I was wondering how would you add multiple markers (each with a containers) on a single map?

Thanks!

Theo - June 4, 2014 Reply

Thanks Veljko,

to add multiple markers on a single map this example should help you do just that:
http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/

Cheers, Theo

Veljko - June 5, 2014 Reply

Thanks! I look forward to new tutorials! 🙂

Add your comment

Related Posts