Today I bring you good news: last week we published a new plugin on WordPress.org!
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:
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:
Unfortunately, if you add a map right now, all you’d see would be the following error:
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:
Save the changes, return to your post or page, and voilà! your map is there with flying colors:
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 Popups
Fantastic plugin! It’s really easy to create popups as you’re already used to the editor, and all the options it has are really well crafted.
Juan Hernando
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 :
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:
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 :
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).
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:
But if we enable all the checkboxes, now there are multiple buttons in the UI:
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 :
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:
You can align the box to either the left side or the right side of your map:
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:
Well, in the block settings there’s a section called Style with several predefined map styles:
If you choose one of these styles, you will see that the map changes dramatically:
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 :
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