Introducing: Map block

Introducing: Map block

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.

10 thoughts on “Introducing: Map block

  1. This looks great – I’ve been waiting for an addition like this! One question – is it possible to add multiple locations to the same map? Thanks!

    1. Hi Catherine! Currently, you can only mark one location using Stackable’s Map block (although you can use multiple Map blocks). However, I can forward this suggestion to the dev team!

      1. This seems like a crucial functionality with this map feature. Particularly the ability to dynamically display multiple locations.

        1. Hi Nick! Yes, this is an additional we’d definitely like to add to the Map block. However, for now, our Map block can only display one location. Rest assured, we’ll keep note of this suggestion. Thanks!

  2. Hi Alexandra,
    A Maps block is definitely needed for local businesses, but any chance of having the option to use Open Maps instead of Google Maps in a future version? More and more businesses are getting wary of giving Google their information for them to sell, and Open Maps is a viable alternative now.
    Cheers,
    Terry

    1. Hi Terry! We’re happy to hear that you find this new block helpful. Thanks for recommending this alternative; I’ll send your suggestion to our dev team. For now, please join our community to watch out for any news and updates.

    1. We’re glad you’re enjoying building with Stackable, Jan! We’ve got a lot more features in store for you. Stay tuned!

  3. Looks great, however I do agree with others that the ability to add multiple markers would be awesome, usually when a client only has 1 map marker to show we suggest just an image that links to googlemaps for directions, because with only 1 point you don’t really need a dynamic map loading JS on your site. As it’s a bit overkill. some added premium features to this block in the future will be exciting.

    1. Hi Nick! Don’t worry, we’ve taken note of this suggestion and it’s an additional feature we’d definitely like to add to the Map block. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.