WPINS – Custom Google Maps for WordPress

The plugin is fully functional with the Twenty Twenty WordPress theme with core 5.5. The plugin was tested and is compatible with a lot of other popular themes and visual builders. A license key will get you updates for 1 year.

You can select the position of the pins legend relative to the map, and whether to show it or not. Choose your visual style with one click from 6 pre-defined styles, or create your own.

• create unlimited maps
• 5 templates for the map and legend
• 6 built-in map styles
• 5 pin types
• custom image pins
• pins clusters support
• use groups for your pins
• hide/show the pins legend
• option to draw straight lines between the pins
• location auto-completion from the address
• manual refine of the pin location
• hide/show pins or groups in the map legend
• support for using text formatting and images inside the description boxes
• set the size, spacing, and number of columns for the legend
• use the color picker to choose the pin/groups colors
• support for displaying multiple maps on the same page, each with it’s own style
• auto-center the map when closing the pin bubble
• open the pin bubble directly from the map or from the legend

Here are a few use-case scenarios for custom Google Maps for WordPress:

• real estate – show nearby POI’s, with custom icon support
• personal/business websites – showing your logo on the map
• store locator – show your locations on the map
• tourism – display a list of pins/activities for sightseeing/visiting
• photography – display the exact location for those great photos you took, with the photos as pins
• … and the list could go on!

Publishing a map is easy: add a new map, add pin groups, add pins to your groups, copy/paste the map shortcode where you want the map to be displayed, and you are done!

The first thing you need to do is configure the plugin:
– insert your license key (get your license key here)
– insert your Google Maps API Key. Please note that the maps will not show properly without the Google Maps API key, and also, the pins’ geolocation cannot be computed from addresses. You need to enable the following APIs for your API KEY: Geocoding API, Maps JavaScript API, and Places API. (Get your Google Maps API Key here. Keep in mind that we recommend restricting the API Key to your web domain.)

On the general settings page, you will find 2 additional useful options:

1. Reset the maps cache – the maps are cached so they load fast (if, for any reason, you notice that changes in style/options are not being refreshed, check this box and save settings to re-cache the maps).
2. Remove the maps when deactivating the plugin – our recommendation is to activate this option only when you are sure you want to clean up the records. Otherwise, the data will be lost if you accidentally deactivate the plugin, or if the background process of updating plugins produces any error that results in the temporary deactivation of the plugin.

The 5 templates for the map and legend

There are 3 steps to adding a new map:

• add the map name and settings
• add a group or multiple groups of pins
• add pins inside the groups

When you click on the Add New Map option, you can:

• add the map title
• choose a visual style (there are 6 built-in visual styles: default, modern, red, monochrome, dark, and nature) or paste your own custom style
• pick the template – position of map and pin list – there are 5 templates available
• set styling and options
  • assign a CSS class
  • pick the spacing for the pin list
  • set the map width and height (you can use %, px, vw or vh)
• choose the number of columns for the pins list
• pick a pin type
  • colored circle + counter
  • colored filled pin + counter
  • colored pin with a hole (no counter)
  • red pin (no counter)
  • red pin + counter
• set extra options:
  • the background color of the map and the legend wrapper element
  • enable clusters for close/overlapping pins – this option will group close pins on a low zoom level, and display the number of pins inside the cluster. On click, it will zoom in on the cluster pins.
  • draw straight lines on the map between the pins, in the same order as these appear in the legend.

Groups are a collection of pins. Let’s say you want to group the coffee shops in your area in a group and the restaurants in a separate group. In this way, the information will be grouped in a visual manner so the user can better understand the map pin legend.
Apart from the group title, you can:

• set a group description
• set a default color for the pins (you can change pin colors individually if you want)
• add spacers before the group title
• hide the group title from the legend
• hide the group description from the legend

When entering a Group, you will see the Pins you defined for that specific Group.
You can add new pins, or edit/remove/order (using the drag and drop feature) the existing pins.

Adding a New Pin

Adding a pin is extremely easy, just add the initial information, and then edit the pin to refine the location and benefit of the Google Maps API autocompletion.

Clicking on the “Add New Pin” button will open the New Pin form. Here you can:

• set the pin title
• set the address
• type in your latitude/longitude (don’t worry about this, it will autocomplete when you edit the pin’s address)
• pick a color (if you want a different color for the pin, other than the color inherited from the pin group)
• set a custom icon (you can specify an image URL), to show instead of the pin style you chose earlier

After you add the pin, just edit it, click inside the address field, and the Google Maps API will search for the location. As you select an address, it will autocomplete the latitude/longitude and move the pin on the map.
You can refine the pin location by grabbing it and moving it on the map.
On the edit page you will find additional options:

• move the pin into another group
• hide the pin from the legend
• type in a description (you can use some tags, even images, to insert more content into the description bubble)
• if the Custom Icon URL is set, that means you want to use an image instead of the map-defined pin style. This will bring additional options on top of the map, allowing you to choose the scaled size of the image, but also the anchor point (what part of the image should be used as the exact location, in px; you will see a red dot over the image, indicating the anchor position)

If you want beautiful and interactive Google Maps, with custom style colors and extended functionalities, then WPINS – Custom Google Maps for WordPress – is the perfect choice for your website.