Last Updated on July 19, 2022
Our latest release includes the newest addition to our block library: the Map block! Display locations on your website and customize it however you like! The Map block is available to use for all Stackable users, whether Free or Premium. All you have to do is update to Stackable 3.4.0.
Adding Maps are perfect for business, corporate, event, or non-profit websites! Especially if you want to increase foot traffic to your physical location, and with the Map block, it’s no sweat!
How to Display Locations Using the Map Block
Once you’ve updated to the latest version of Stackable, all you have to do is add the Map block to the post or page you want the location to be displayed in and navigate to the Style tab under the General panel. You will see the Location field that you can just fill up with coordinates or the exact address of the location you want to show. The block will then automatically fetch the data from Google Maps and reflect it on your page.
What Features Does the Map Block Include?
The Map block by itself is limited to the custom height and zoom controls. You will see these in the General panel of the Style tab.
You can adjust these using the slider or simply inputting the size or zoom you want in the input text field.
If you want additional features for the Map block, you may use a Google API key. It’s a general purpose key that allows access to Google services. You can head over to our documentation to learn more about this.
Here are features that come with the Map block if you add your own API key:
Location Auto-Suggest
As we’ve mentioned you will have to know the exact coordinates or address of the area of the spot you want to show on your map. However, if you have an API key, the block will give suggestions on possible locations when you type the name or address of a place in the location field.
Google Maps buttons display toggles
You have the power to control what buttons from Google Maps will be displayed on the map you’re adding to your page. You will see these in the General panel of the Style tab.
Just toggle which buttons you want to be visible on your map. Here’s an example of the Map block with only the zoom buttons displayed:
Map Style
You may also customize the style of your map. The Map Style panel features the basic map styles from Google, but you can take it to the next level with your own design and customizations using your own custom map code (JSON). You may learn more about creating your own custom map style here.
Custom Map Marker
Lastly, Stackable users can add their custom markers! Just toggle on the Map Marker panel and select which icon you want to use. This also includes FontAwesome icons if you added your own FontAwesome kit code. All icon settings will be available to you to have complete control over your map marker’s design!
Thanks for your continuous support of Stackable! We hope that you enjoy the latest addition to our block library. Head over to our documentation to learn more about the Map block or subscribe to our newsletter for the latest updates on Stackable.
Leave a Reply