How to Use Stackable Map Block

The Stackable Map Block allows you to place a map on any post, page or template. It uses the Google Maps Platform to display a map of the location you specified, without having to play around with code snippets.

There are various design options for this block such as the Map Style, Block Background, Block Borders, and more. That way, you can style your block any way you want to like you would a normal Stackable block.

You can also control the way your website visitors navigate the map with advanced toggle options such as Dragging, Zoom, Full Screen, Map Type, and Street View.

The Google Maps block works without the need for you to input a Google API Key. However, some features are only available if you have a Google Map API Key entered. 

What is an API Key and How Do I Add It?

The Google API key is a general purpose key that allows access to Google services. There is a Google Developer console where you can list your API keys, and which features or services are enabled.

You will need your Google API key to have the following APIs & Services enabled for the Map block to work properly:

  • Maps JavaScript API - This is required to display the map
  • Geocoding API - This is required to center the map on the inputted address
  • Places API - This is used to suggest matching places when entering an address

You can check this link to learn more about how you can create a Google API Key.

Once you’ve created one, you can add it by navigating to the Stackable Settings where you will see the Editor Settings. Just enter your API Key in the Google Maps API Key field, and it will be saved automatically.

How to Use the Map Block

Once you’ve added the Map block, you will see a bunch of settings in the inspector.

In the Style and Advanced tabs, you will see the same settings that you can find with our other blocks such as the Block Background, Border & Shadow settings, Motion Effects, Responsive and more.

In the Style tab, depending on whether you have an API Key, there are also available options that give you more control over the map itself with options like the Map Style and Map Marker.

Note that if you do not have an API Key, you won’t have access to some settings in the Style tab such as the Map Styles, Map Marker, and more.

How to Enter a Location

To add the location you want the block to fetch, you just need to navigate to the Style tab under the General panel. You will see the Location field that you can just fill up and it will be taken from Google Maps. The block will automatically fetch the data and reflect it on the map.

If you have an API Key, suggestions will automatically appear in a dropdown as you type in the location/address.

If you don’t have an API Key, you can enter the location in 2 ways:

  • By typing the exact address or location
  • By typing the coordinates

Note: The following settings (Map Controls, Map Styles, and Map Maker) are only available if you have an API Key.

Map Controls

You will find the different Map Controls under the Style tab:

These options control the visibility of the Google Map controls. You can just simply toggle on or off the controls you want to use on your Map block. 

Selecting a Map Style

If you go to the Style tab > Map Styles, you will see the different styles you can choose from. Map styles are based off embedded JSON style declarations.

Customizing your own Map Style

If you wish to customize your own map, you can do so in various websites. Here is a list of websites you can choose from in order to customize your own map style:

Once you are done customizing your map, you can copy the JSON code and paste it in the empty field inside the Map Styles panel in the Style tab. The map you customized will then be reflected on the Map block. 

Using the Map Marker

You have the option to change your Map block’s icon by using the Map Marker. 

If you navigate to the Style tab in the inspector and toggle on the Map Marker, you can upload an icon that will be used by your map to pin the location you entered.

GDPR Regulatory Compliance

You will have to implement GDPR compliance yourself in your website (things like Privacy, Terms of Service, and Cookie policies).

Note that if you are using a Google API Key, the Map Block will load the map from maps.googleapis.com which doesn't rely on the exchange of cookies.