Find all products for your country

HomeBlog

How to Insert an Interactive Map in Gutenberg Editor for WP

With WordPress 5.0, the popular CMS is taking a whole new direction with their Gutenberg editor. The use of blocks, instead of basic text makes this excellent for creating pages and posts, that are rich in media content. And with the use of some interactive maps, you can bring the user experience to a whole new level.
Gutenberg Editor is compatible with interactive maps
However, it is worth mentioning that WordPress doesn’t offer interactive maps as a functionality by default. Instead, we will be taking help of some WordPress plugins coming from the developers at Fla-shop.com.

The company offers a collection of high-quality tools that can help you insert HTML5 maps to your website. These plugins utilize state of the art technologies such as HTML, JavaScript, CSS, and SVG to help create interactive maps for your site.

So without further ado, let’s get started:

Are the HTML5 Maps Compatible With Gutenberg?

Before going deeper, let’s first address the elephant in the room.

The new editor has created a sort of division in the WordPress community. A section of the community is praising the innovative direction. Gutenberg is more true to a WYSIWYG experience and makes content creation far simpler for non-coders.

However, on the flip side, many are citing that the editor now functions as a page builder, which is not good for many use cases. Although it will benefit media-heavy websites, blogs and similar sites will not find it suitable. But by far, the most amount of noise is created in the argument for backward compatibility.

Developers are arguing that it will affect client websites that are made using custom fields and meta boxes.

Taking this into context, we would like to point that the users will face no compatibility issues while using these HTML5 maps plugins from Fla-shop.com. It is also super easy to configure, helping you get a functional interactive map up and running in minutes.

How to Insert Interactive Maps in Gutenberg?

After activating the plugin, you will notice an HTML5 Map Settings in your WordPress dashboard. Hover over it and you will notice a Maps option. This will take you to a new page where you can create new interactive maps to add to your website.

Simply create a new name for the map. There is also a drop-down button which contains a list of all the map options. Select the one which you intend to use and press “Add new map.” This will create the new map and specify a shortcode which you need to use while integrating the map into your WordPress website.

Once you have the shortcode, the plugin provides a handful of ways to help you insert the interactive maps in the Gutenberg editor.

1. You can insert the shortcode directly into the Gutenberg editor.

2. You can insert the shortcode inside a paragraph block.

3. There is also an option which allows you to insert the shortcode in the classic editor block.

4. And, finally, you have the option to use basic HTML code to implement the maps into your page or post.

So, How Can You Benefit From Having Interactive Maps?

Now, you might be thinking why you need to use an interactive map on your website when there is Google Maps? Well, the reason basically boils down to this – G-maps contains loads of unnecessary details which can even hurt your conversion rates and showcase your nearby competitors. Furthermore, it is not very easy to customize G-maps to fit your personal needs.

However, both these requirements are easily met by the interactive map plugin from Fla-shop.com. You will be able to provide a visually immersive and engaging medium to guide your visitors to local, relevant content on your website.

Furthermore, interactive maps are a godsend to businesses that have a wide branch network. Using interactive maps, you can display your branch locations in a colorful JavaScript map, highlighting all your the locations across a country, or in a Worldview.

The benefits of using HTML5 maps

Fla-shop.com offers 4 different categories of products. Two of them are for showcasing Locator Maps for WordPress as well as non-WordPress websites. And the remaining two are for Drill-down maps for WordPress and non-WordPress websites.

As you can guess, the locator maps will showcase a region – a country in particular. You will be able to highlight different states on the map with color customization options. This is useful for businesses which have a national foothold.

The drill-down maps are essentially multi-level maps. You will get a global view from which you can “drill-down” to a local map or a specific region following a couple of clicks. As you can imagine, this is perfect if your business is spread across the world in different countries.

In Conclusion:

So as you can see, the maps plugin from Fla-shop.com allows you to easily integrate maps into your WordPress website. No matter if you are on the old classic WordPress editor or the new Gutenberg editor, you will face no compatibility issues or anything in similar.

If you think you will benefit from having an interactive map integrated into your website, then we highly recommend that you give this plugin a try. If you are interested in the plugins then you can check them out by following this link. Also, if you want to get an idea about the different types of interactive maps that can be created using the plugin, then we highly encourage you to the Showcase page as well.

Get try-for-free customizable US map for WordPress

Useful articles

Categories

Recent Posts

Archives

Tags


Privacy policy   |   Terms of Use

Home  |   Products  |   Showcase Gallery  |   Custom Design Service  |   Free Maps  |   Blog  |   Support  |   Contact
© 2006-2018 All Rights Reserved.
Fla-shop.com - Interactive Maps for websites.
Follow us Follow us on Twitter Follow us on Facebook