Woman looking at a map of Amsterdam

Today I bring you good news: last week we published a new plugin on WordPress.org!

Pokemons celebrating something

Nelio Maps allows you to add a Google map as a block in the WordPress editor. It’s the first plugin we’ve specifically designed and implemented for Gutenberg, and we hope users will fall in love with its simplicity and efficiency.

In this post I’ll showcase you the plugin and teach you how to use Nelio Maps to insert totally customized Google maps on your website. And if you are a developer, get ready, because in a couple of weeks I will share in detail how we’ve implemented this plugin in Nelio.

Installation of Nelio Maps

The first thing you must do to be able to use the new Nelio plugin is to install it on your WordPress. Luckily, this plugin is 100% free, so all you need to do is search for it in your Dashboard and install and activate it as always:

Installation of Nelio Maps
The installation of Nelio Maps follows the same procedure as that of any other plugin.

Once you have done it, you can go to the WordPress editor and add the new Google Map block that appears in the Extra section:

New block type: Google Map
After installing and activating Nelio Maps, a new type of block appears in your WordPress editor.

Unfortunately, if you add a map right now, all you’d see would be the following error:

Warning message when there is no API key available
Warning message letting you know that a Google Maps API Key is required.

Google Maps requires an API key to work so… let’s get one right away.

How to add a Google API Key to Nelio Maps

To use Google Maps in your WordPress you need an API Key, which will grant you access to the Google Maps API. Luckily, Antonio explained how to get a Google API Key, so simply follow his instructions on how to get your key and paste it in nelio_maps_api_key_option:

Option to enter the API key
How to add the API key from the WordPress settings.

Save the changes, return to your post or page, and voilà! your map is there with flying colors:

Appearance of a Google map by default
When you add a Google map to WordPress with Nelio Maps, its look and feel is sooooo “Google Maps”…

How to tweak a Google Map with Nelio Maps

With Nelio Maps, you are able to customize several aspects of the Google Map that you just added. To help you get familiar with the plugin, let me briefly explain all the settings it includes.

Nelio Unlocker

Switch to WordPress safely while keeping your design and content

Improve your SEO today and boost your site speed by converting your pages into HTML, CSS, and WordPress standards. With zero technical knowledge required, you’ll only pay for what you need.

How to center the map at a specific point

The first thing you should know is that you can center the map at any exact location you might want. To center the map you have two options: either drag the map with the mouse and move it until you see what you want, or set the exact point using the location search box :

Search for locations integrated in WordPress
With the integrated location search, you can search for any business or address without leaving the block editor and center the map at the specific point you want.

How to modify the size of the map and its zoom level

Another option included in the plugin is the ability to change the size of the map. In this sense, you can tweak its height from 20% to 100% of the size of your screen. To do this, select the block and access the block settings that appear in the inspector area:

Basic adjustments of Nelio's map
Basic settings of the map block of Nelio Maps. Choose the size and zoom level with these two selectors.

On the other hand, you can change the block width using the usual alignment controls that already exist in other blocks. Specifically, you have three settings available: Align center, Wide width, and Full width :

Aligning a map
Nelio Maps allows you to use different alignments for your map, so the size it occupies on the screen can be adapted to your needs.

Finally, Nelio Maps also allows you to change the default zoom level used in your map. As you should have guessed from the previous screenshots, there are two ways to do it: either use the Zoom Level control in the sidebar or use the buttons on the map itself.

How to select which controls are available on the map

In the inspector area there’s a section called Map Options. There you will find several options to configure the map’s behavior as well as what controls the map should have. These settings are:

  • Show zoom buttons (to change the map’s current zoom level)
  • Show map type button (to switch between Map and Satellite)
  • Show fullscreen button (to toggle a fullscreen view of the map)
  • Make the map draggable (to drag the map around).
Map buttons
Set which map buttons will be visible in the front-end.

If you modify any of the previous settings, you will see that the map of the block editor doesn’t change. This is because these settings only modify the appearance of the map on the front-end. So, with the default options (that is, all options disabled), the map would look like this:

Default view of the map in the front-end
Default view of the map in the front-end, without any additional controls on it.

But if we enable all the checkboxes, now there are multiple buttons in the UI:

Map with controls
If you enable the different checkboxes, the user can interact with the map.

How to add a marker on the map

When we add a map on our website, we usually want to add a marker in it too. Well, you can do that with Nelio Maps, and it only takes two clicks! Simply expand the Marker section of the sidebar and activate the Marker in map option :

How to add a bookmark to the map
Add a marker to the map easily with Nelio Maps.

Once you have added the marker on the map, you can change its location using the search box that appears in the previous capture.

Moreover, notice that there is an extra option in the Marker section called Address Block. The address block is a small text area that overlaps the map and contains additional information about the marker. For example, you could use it to share the exact address that the marker points to and complement it with contact information:

Additional marker information
When you activate the marker, you have the possibility to write additional information about it in the overlapping text box.

You can align the box to either the left side or the right side of your map:

Aligning the marker text box
You can easily change the alignment of the marker text box.

or get rid of it completely, if you don’t want to use it.

How to change the style of the map

Finally, Nelio Maps includes a fantastic option to fully customize the appearance of your maps. By default, all the maps you add will have Google’s default style:

Screenshot of WordPress’ block editor with a map on it

Well, in the block settings there’s a section called Style with several predefined map styles:

Styles of Google Maps
You can change the appearance of the map using the Styles section in the block configuration.

If you choose one of these styles, you will see that the map changes dramatically:

Nelio Maps screenshot
Screenshot of the map block of Nelio Maps, applying the Light style.

And you know what’s best? With Nelio Maps you don’t have to use any of the predefined styles if you don’t want to! Instead, there’s an option for you to create the style you want :

Custom map style in Nelio Maps
In addition to the 5 default styles included in the block, there is the possibility to add your own style of the map using a JSON.

Give It a Shot!

So, tell me, what do you think of the plugin? Do you like it? Do you have any suggestions? Whether you think it’s the best plugin in the world or if you think it can and should be improved, we’d love to hear.

So please leave a comment down below and we’ll see how we can make Nelio Maps the best and simplest maps plugin for Gutenberg!

Featured image of Anna Pascale in Unsplash.

Leave a Reply

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

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.