Style Your Membership Map using Google Maps JSON Styling

The Membership Maps feature of the Member Directory and Profile Pages Add On displays your members’ locations on an interactive map. Customizing the map’s appearance allows you to change colors, hide icons, or adjust labels so it matches your site’s design, creating a more polished experience for your members.

This code recipe post will guide you on how to apply custom Google Maps JSON styling to the Membership Maps feature.

Understanding the `pmpromd_map_styles` Filter

The pmpromd_map_styles filter overrides the default map styling of the Membership Maps. By hooking into this filter, a JSON style array changes how your Google Map is displayed. Specific aspects of your map such as modifying colors, hiding specific map features, or adjusting labels can be changed.

About the Code Recipe

This code recipe replaces the default styling of your Members Directory Map with a fully custom theme. You can generate your own styles with the Google Maps Style Builder. Another option is to choose from a wide variety of ready-made styles available on the Snazzy Maps directory.

The Code Recipe (PHP)

Adding the Recipe to Your Website

You can add this recipe to your site by creating a custom plugin or using the Code Snippets plugin available for free in the WordPress repository. Read this companion article for step-by-step directions on either method.

How to Customize This Code Recipe

This recipe works as is, but you can swap out the JSON array to match your preferred design.

Replace the sample JSON in the code from lines 23 – 208 with your preferred style to match your site’s branding from the Google Maps Style Builder or a ready-made style from Snazzy Maps.