Simple Post Map

Easily show your posts on a map

Last update: 12/02/2019

By: TangoDev

Version: 1.3

Email: support@tangodev.it

What's this plugin for?

The goal of this plugin is to provide an easy way to show your posts on a Google Map.
The plugin is very easy to use, light, highly customizable and mobile-ready. You'll be up and running in a couple of minutes!

Requirements

This plugin requires Wordpress 4.0 or higher. This plugin also uses an embedded version of Advanced Custom Fields plugin. If you installed Advanced Custom Fields plugin on your site as a stand alone plugin please verify that the version is 4.4.8 or higher or Simple Post Map won't work.

This plugin requires PHP 5.3.5 or higher.
Tested up to Wordpress 5.0.3.

How to install it

You can install Simple Post Map just like any other Wordpress plugin:

Download the plugin zip file from the store;

Log in into your Wordpress admin section

Navigate to Plugins => Add new and click the Upload Plugin button.

From the main zip file extract the simple-post-map.zip file that contains the plugin, upload it and click Install Now.

Done! You're ready to use Simple Post Map.

Setup your Google API Key

Once that you have installed the plugin, navigate to the Simple Post Map main page and you'll see a warning on the top of the page.

If you don't have a Google API key yet, just click Get the API key and you'll be redirected to the Google website where you can obtain you API key for free. Once there, login with your Google account, select or create a project and enable your API key.

Create you first Map

By default in the main page of the plugin you'll find a sample map created for you. You can directly use it or create a new map by clicking Add New.
Simple Post Map allows you to create multiple maps and choose on which map you want to show every single post.

Once in the Edit Map page, you'll find all the options available to customize your map appearance, markers style and the content of the info window that will appear when the user clicks on the marker.

Add posts to your Map

To show a post on your map just navigate to the Edit page of that post: on the bottom of the page you'll find a new section called Simple Post Map. In this section you can insert the address where you want your post to appear on the map and select the map that you want your post to appear on. You can also click on the map to select the correct location. Save your post and you're done! You can repeat this process for each post that you want to show on the map.

Show your Map on your site

You have three options to show your map on your site:

Gutenberg Block: in the blocks section you'll find a new block called Simple Post Map. Drop it in your page and choose the map you want to display.

Shortcode: in the main page of the plugin or in the Edit Map page you'll find the shortcode for each map. Just copy it and place it where you want your map to appear.

Widget: in the widget section you'll find a new widget called Simple Post Map. Drop it in a widget area and choose the map you want to display.

Customize your Map style

You can customize the appearance of your map using CSS. In the Edit Map Page you can define a class to attach to the map container.

You can use that class to apply custom styles to your map and make it match perfectly your theme design.
For example you can add this rule to your CSS file to add black rounded borders to your map:

.my-custom-class {
border-radius: 18px;
border: 6px solid black;
}

Here's the result:

Customize marker aggregation icon style

You can customize the icon that is shown when markers are aggregated on the map. Once the plugin is installed, using your FTP client go to /wp-content/plugins/it-tangodev-simplepostmap/images and overwrite markerclusterer.png file. The icon must be 42*42 pixels.

Compatibility with other plugins and visual composers

A lot of plugins and visual composers use Google Maps libraries, and if the libraries are loaded more than once this will cause an error and maps won't show up. Before loading Google Maps library Simple Post Map will check if it's already available to avoid errors. Sometimes this is not enough, especially in the admin section when you have installed a visual composer like Divi. A common workaround to fix loading issues is:

Disable Google Maps library loading in every plugin or visual composer (you must search this option in the settings of each plugin)

In the Simple Post Map settings page find the option Google Maps Library Loading and select On every page (Public site) or On every page (Public site and Admin section).

In this way Simple Post Map will be the only responsible for loading the Google Maps library and it will load it on every page of the website, making it available to every plugin.

Languages and translations

The plugin is currently translated in:

English

Italian

Spanish

If you want to translate the plugin in your language just use Poedit and the .POT file available in the languages folder.