Style Your Membership Map using Google Maps JSON Styling

Styling your membership map is a great way to seamlessly integrate your map with your brand. 

You can generate your own map styling using the Google Maps Map Style Builder. You can also choose from a wide variety of ready-made styles available on the Snazzy Maps directory.

You will need the Membership Maps Add On installed and activated for this code recipe to work. 

The Code Recipe (PHP)

Once you’ve generated your own map styles, simply replace them with those entered in quotes from line 17 to 202. 

Copy

	<?php
	/**
	* Styles your map using the Google Maps JSON Styling option.
	* Generate your own map style from https://mapstyle.withgoogle.com/
	*
	* Snazzy Maps also offers a directory of Google Map styles:
	* https://snazzymaps.com/explore
	*
	* title: Styles for Membership Maps
	* layout: snippet-example
	* collection: pmpro-membership-maps
	* category: styling, JSON, maps
	*
	* 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.
	* https://www.paidmembershipspro.com/create-a-plugin-for-pmpro-customizations/
	*
	*/
	function my_pmpro_membership_map_styles( $styles, $map_id ){
	return '[
	{
	"elementType": "geometry",
	"stylers": [
	{
	"color": "#212121"
	}
	]
	},
	{
	"elementType": "labels.icon",
	"stylers": [
	{
	"visibility": "off"
	}
	]
	},
	{
	"elementType": "labels.text.fill",
	"stylers": [
	{
	"color": "#757575"
	}
	]
	},
	{
	"elementType": "labels.text.stroke",
	"stylers": [
	{
	"color": "#212121"
	}
	]
	},
	{
	"featureType": "administrative",
	"elementType": "geometry",
	"stylers": [
	{
	"color": "#757575"
	}
	]
	},
	{
	"featureType": "administrative.country",
	"elementType": "labels.text.fill",
	"stylers": [
	{
	"color": "#9e9e9e"
	}
	]
	},
	{
	"featureType": "administrative.land_parcel",
	"stylers": [
	{
	"visibility": "off"
	}
	]
	},
	{
	"featureType": "administrative.locality",
	"elementType": "labels.text.fill",
	"stylers": [
	{
	"color": "#bdbdbd"
	}
	]
	},
	{
	"featureType": "poi",
	"elementType": "labels.text.fill",
	"stylers": [
	{
	"color": "#757575"
	}
	]
	},
	{
	"featureType": "poi.park",
	"elementType": "geometry",
	"stylers": [
	{
	"color": "#181818"
	}
	]
	},
	{
	"featureType": "poi.park",
	"elementType": "labels.text.fill",
	"stylers": [
	{
	"color": "#616161"
	}
	]
	},
	{
	"featureType": "poi.park",
	"elementType": "labels.text.stroke",
	"stylers": [
	{
	"color": "#1b1b1b"
	}
	]
	},
	{
	"featureType": "road",
	"elementType": "geometry.fill",
	"stylers": [
	{
	"color": "#2c2c2c"
	}
	]
	},
	{
	"featureType": "road",
	"elementType": "labels.text.fill",
	"stylers": [
	{
	"color": "#8a8a8a"
	}
	]
	},
	{
	"featureType": "road.arterial",
	"elementType": "geometry",
	"stylers": [
	{
	"color": "#373737"
	}
	]
	},
	{
	"featureType": "road.highway",
	"elementType": "geometry",
	"stylers": [
	{
	"color": "#3c3c3c"
	}
	]
	},
	{
	"featureType": "road.highway.controlled_access",
	"elementType": "geometry",
	"stylers": [
	{
	"color": "#4e4e4e"
	}
	]
	},
	{
	"featureType": "road.local",
	"elementType": "labels.text.fill",
	"stylers": [
	{
	"color": "#616161"
	}
	]
	},
	{
	"featureType": "transit",
	"elementType": "labels.text.fill",
	"stylers": [
	{
	"color": "#757575"
	}
	]
	},
	{
	"featureType": "water",
	"elementType": "geometry",
	"stylers": [
	{
	"color": "#000000"
	}
	]
	},
	{
	"featureType": "water",
	"elementType": "labels.text.fill",
	"stylers": [
	{
	"color": "#3d3d3d"
	}
	]
	}
	]';
	}
	add_filter( 'pmpromm_map_styles', 'my_pmpro_membership_map_styles', 10, 2 );

view raw styling-membership-map-using-google-maps.php delivered with ❤ by Paid Memberships Pro

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.