Blog

How to add a responsive Google Map to your website

With 67% of smartphone owners relying on and trusting Google Maps it’s pretty safe to say that having a Google Map on your website displaying the location of your business might be one of the most important elements to help customers easily find your business. Google Maps not only helps customers know where you’re located but it will allow them to quickly contact you and get directions. The way your Google Map renders and displays on your website is crucial to how easily your customers can find your business without getting frustrated. With so many different screen sizes out there it’s important that you are displaying a responsive Google Map so that no matter which device your customers are using they can easily find you. In this tutorial we will teach you how to add a responsive Google Map to your website.

Step 1: Search for your location on Google Maps

The first step should be self-explanatory; you’ll need to search for your location on Google Maps.

https://www.google.com/maps

Step 2: Generate your Google Maps embed code for your location

Now that you’ve found your desired location on Google Maps, the next step is to generate your Google Maps embed code to use on your website.

Step 2-A: Click on the ‘Share’ button from the left side menu.

Step 2-B: Click on the ‘Embed a Map’ tab in the pop-up window.

Step 2-C: It really doesn’t matter which size you choose since we will be resizing the map via CSS in the next steps but select ‘Large’ and then click ‘COPY HTML’.

Step 3: Add your Google Maps embed code to your website

Now that you have your embed code for your Google Map, you are ready to add it to your website. In order to control the visual sizing output of the Google Map you will need to place it inside a container div like below:

HTML

<div id="google-map">YOUR GOOGLE MAP CODE HERE</div>

Items to Note:

  • You can change the html container element to anything you want, we made this as simple as possible by using a div with the id ‘google-map’ which will be used as a reference for the CSS in the next steps. Please note that if you end up changing this structure you will need to update the CSS in the next steps as well.
  • Don’t forget to replace ‘YOUR GOOGLE MAP CODE HERE’ with your actual Google Maps embed code.
  • Please remember that this code is meant to be a basic guideline, you may need to modify it in order to suit your particular needs.

Step 4: Use CSS to resize your Google Map and make it responsive

Now that you have your Google Map displaying on your website you will need to use CSS to resize it and set it to be responsive. Copy the CSS code below and reference the ‘Items to Note’ that follow for setup instructions:

CSS

#google-map{
width: 100%;
max-width: 100%;
display: block;
}
#google-map iframe{ 
width: 100% !important; 
height: 500px !important; 
display: block; 
}

Items to Note:

  • Lines 1-5 is the CSS to control the container div, you can adjust this code to suit your particular needs based on your website structure but for simplicity and the purposes of this tutorial we just made this element fully responsive.
  • Line 7 will override the Google Map embed codes default width and set it to 100% or full width of the container. We used ‘!important’ just to make sure this will always take priority.
  • Line 8 will override the Google Map embed codes default height. We set the height to 500px but you can change this to any height you want. We once again used ‘!important’ just to make sure this will always take priority.
  • Please remember that this code is meant to be a basic guideline, you may need to modify it in order to suit your particular needs.

Step 5 (Bonus Step): Use Media Queries to update the height of your Google Map

After completing Step 6 you should now have a fully responsive Google Map on your website but you may have noticed that the height doesn’t change, only the width. If you want to adjust your Google Maps height throughout the responsive resize process you will need to control it through the use of Media Queries.

What are Media Queries? You can find out here: https://www.w3schools.com/css/css3_mediaqueries.asp

Basic example of using Media Queries:

CSS

@ media only screen and (max-width: 600px){
#google-map iframe{ 
height: 300px !important; 
}
}

Items to Note:

  • Line 1 is how you define the Media Query breakpoint on when you want your resize to take place. We set the resize to take place when the screen hits 600px wide. If you add this code and resize your browser window you will see the resize take place.
  • Line 3 will override the previous height setting of 500px to 300px. You can change this to any height you want.
  • If you need to change the height at more breakpoints then repeat this step.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again. Please do not email us with problems regarding this tutorial unless you want to hire us.

Hire Us

If you are unfamiliar with web development and need help displaying or fixing your Google Map we are available for hire. Please contact us in order to receive a quote for this or any other service.

Request a Free Quote