Would you like to embed a map on your site to display a specific location? Then the Map Block is the right block for you that allows you to embed an OpenStreetMap, or Google Map (coming soon) as well as allowing you to customize it by setting unlimited markers, scale control, and more!
How to add a Map to your WordPress pages
To add a Map to your site, you will need to have the Map block enabled under FireBlocks.
You can manage your blocks by reading more here.
Once you have the Map block enabled, it’s as simple as following the steps listed below:
Within the Gutenberg editor, click on the plus sign, search for “Map” under the FireBlocks category and select it.
Once you have placed the Map block on your page, you can start by entering either an address or coordinates to get started.
Once you have added an address or coordinates, you can select a location to add the map to your page.
Then, the map will be visible on your page.
Below we will explain each section and its settings that are provided by the Map block.
Select the map provider, select an address, set coordinates, zoom, width, and height of the map.
Select whether to display a zoom control and set the scale units of the map (metric or imperial, as well as disable it).
Add unlimited markers to your map! You can either enter an address for the marker's location or enter the latitude/longitude manually. Each marker can have a label and description which will be visible when clicking on the marker itself by revealing a tooltip.
Set the block margin and padding.
Set the background color of the map block.
Set the border and border radius of the map block.
Set the box shadow of the map block.
Below you can find a few Map demos:
Without Zoom Control
Scale - Metrics
Scale - Imperial
You can find more demos on the dedicated page of the Map block.
Will the map block slow down my site?
FireBlocks is built with performance in mind which means no matter how many maps exist on a page, it will only load a map if the map is visible to the user. This essentially means that if a map is not visible to the user, it won't load at all.
Can I add multiple markers on a map?
Your map can have as many markers as you desire. Each map marker can also have a label and description and once the marker is clicked, a tooltip will appear with the title and description for your users to read more about each marker location.
Can I have multiple maps on my page?
You can have as many maps as you desire on your page.