# Google Maps
When building a website, it can be helpful to include a map to give people a better sense of direction. Thanks to it's popularity and accuracy, Google Maps (opens new window) is the natural choice for this.
In this tutorial, we will show you how to easily add a map in your Bootstrap Studio design and customize it. This is very easy to do, thanks to the built-in Maps component.
First, go to the Component panel and search for the Map component. Then drag and drop it into your page.
There is one complication though - Google requires that all maps use an API key. Don't worry though — they have a generous free tier, and generating a key is straightforward.
# Generating a Key
Click the map to select it. In the sidebar, under the Options tab, you will see a number of settings. Google Maps requires an API key in order to use it, so if you already have one, go ahead and paste it inside the API Key field and skip this section.
If you don't have a key, you will need to create one. We've made this as easy as possible, just click the Create API Key button in the options.
This will take you to the Google API Console. You need to create a new project, or choose an existing one and click Continue to enable the API and any related services.
Next, click the Create Credentials button and select the API Key option.
This will create your API key which you need to copy and paste into the API Key field in Bootstrap Studio.
Now your Google Map is ready to use. You don't need to create a new key every time you add a map, you can reuse it for all maps in your project.
# Customizing Your Map
Bootstrap Studio offers a number of quick settings to customize your Google Maps component. When you have the component selected, you will see a number of settings in the Options Panel.
- Mode - Sets the mode of the map (Place, Directions, Search, View, Streetview).
- Address - Depends on the map mode. It is either the address or coordinates of the point you want to center the map on.
- Zoom - The initial scale at which the map is displayed. The lower the number, the more "zoomed in" the map is.
- Type - Roadmap (displays the default road map view) and Satellite (displays Google Earth satellite images).
- Lazy Loading - Delays loading the map until the user scrolls near it.
- Dimensions - Sets the width and height of the map.
You now have a working Google Map in your site! To save yourself time in the future, you can even add this map to the library as a custom component, so that you don't have to go through the set up again.