Add map options to map view?

Hi Thomas,

Map styling can be added in JSON format under Events > Settings > Formatting > Maps.

This should help:
https://wp-events-plugin.com/documentation/google-maps/

Hi,

Tha ks for helping out!

Yes I found that. However it doesnt allow for this background setting I am after.

I need to create a transparent google events map.

Here is a pen:
https://codepen.io/verticalgrain/pen/LVRezx

There is also a snazzy map called “transparent” and even this requires the above background setting.

So if I can somehow implement this I am good to go.

Kind regards,
Thomas

I found your topic interesting so I played around with it for a while.

The major problem I am having is that the “markers” for the event do not display,
because you/we are turning them off with..

{ //hide all fills
			elementType: 'geometry.fill',
			stylers: [
				{ visibility: 'off' }
			]
		},{
			featureType: 'landscape.natural.landcover',
			elementType: 'geometry.fill',
			stylers: [
				{ visibility: 'on' },
			]
		}

Could be my inexperience, to not be able to make the marker (for the event) appear.
So… all you are going to get is a map.. with your image behind it like in the CodePen you gave us.

BUT what needs to be done.. to at least produce the CodePen… is “hook” into the google maps and Events Manager.
In the file plugins/events-manager/includes/js/events-manager.js
You will find these “hooks” approx line number 1001 for a single map.
And line 915 for global maps.

With that said… using the CSS in the CodePen.. put something like this in the footer of your website… for a SINGLE location event map

<script type="text/javascript">
jQuery(document).bind('em_maps_location_hook', function( e, map, infowindow, marker,options ){
(function(){

  // Create an array of styles.
	var mapStyles = [
		{ //hide all fills
			elementType: 'geometry.fill',
			stylers: [
				{ visibility: 'off' }
			]
		},{
			featureType: 'landscape.natural.landcover',
			elementType: 'geometry.fill',
			stylers: [
				{ visibility: 'on' },
			]
		}
	];

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 11,
    center: em_LatLng,
    styles: mapStyles,
    // The following line is essential for making the map background transparent:
    backgroundColor: 'hsla(0, 0%, 0%, 0)',
  };
 

 
  //create map object
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);

})();

});
</script>

In conclusion, when I try to apply the marker.. the “transparency” disappears.
I get a map with a marker, on top of the “kitten” image.

If you figure it out please post back here.