Locations Map Customization

just to confirm, did you mean using em_maps_locations_hook for the locations map?

Correct, the em_maps_locations_hook doesn’t support marker styling, but the em_maps_location_hook does.

Which version of Events Manager are you using?

Events Manager version 5.6.5

The locations hook doesn’t accept any marker variables, from [i]events-manager.js[/i]:

jQuery(document).triggerHandler('em_maps_locations_hook', [maps[map_id], data, map_id]);
compared to
jQuery(document).triggerHandler('em_maps_location_hook', [maps[map_id], infowindow, maps_markers[map_id], map_id]);

Are you containing that code within a document ready or onload statement?

The code I use is this in the footer:

<script type="text/javascript">
					jQuery(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){
		var templateDir = "<?php echo get_template_directory_uri(); ?>";
							//Set marker image and size
							var myIcon = new google.maps.MarkerImage(templateDir + "/images/googleicon.png", null, new google.maps.Point(0,0), new google.maps.Point(16,32), new google.maps.Size(40,48));
							//Apply marker to map
							marker.setOptions({'icon':  myIcon });
							//Set map styles
							var styles = ["Wall text for styling"];
							//Apply map styles
							map.setOptions({styles: styles});

						});
						jQuery(document).bind('em_maps_locations_hook', function( e, map, infowindow, marker ){
								//Set marker image and size
		var templateDir = "<?php echo get_template_directory_uri(); ?>";
							var myIcon = new google.maps.MarkerImage(templateDir + "/images/googleicon.png", null, new google.maps.Point(0,0), new google.maps.Point(16,32), new google.maps.Size(40,48));
							//Apply marker to map
							marker.setOptions({'icon':  myIcon });
								//Set map styles
								var styles = ["Wall text for styling"];
								//Apply map styles
								map.setOptions({styles: styles});

							});
</script>

And as said, it works on single “location_map” ( https://www.sleipner.org/bollnas/kalender/unghastutstallning-2016/ ) but not on “locations_map” ( https://www.sleipner.org/avel/unghastvisningar )

Your code needs to be contained with a jQuery document ready or onload statement.

@hgj em_maps_locations_hook
I looked at your site and it appears you have not got this working.
I have not either….

I wrapped the code in…

jQuery(document).ready(function(){
---
---
});

No success.. although my .ready may certainly be wrong.

On your site I get no JavaScript errors using Console in Firefox.

But I tested the code on a very clean site (no other plugins).. default theme 2016… and other themes.

I am consistently getting this error.
TypeError: marker.setOptions is not a function

For a single location page the hook –>em_maps_location_hook
I have no problems.

I sure would love to see somebody make this work. Much reading was done in support and around the internet. And I have not seen one success.
Or similar success for Global with shortcode [locations_map] Events Manager.

Well.. on my one site… the error has gone away..
TypeError: marker.setOptions is not a function

It wasn’t there yesterday.. don’t know why it showed up today. Didn’t change anything.

But still no change for the “icon” and the global [locations_map] and the hook…
em_maps_locations_hook

also.. for locations

this works..
map.setOptions({styles: styles});

I also tried without the .ready(function() and the “styles” still works.

SUCCESS !!!!!!!!!!!!!!!

The Global markers (icons) for [locations_map] need to be put in an array…

Anyway you can share your code snippet, Robswaimea, that got this to work? I am attempting something similar and it’d be a big help.

I’m sorry that I missed Robswaimeas replies. When I understood that angelo either didn’t understand or wasn’t interested in solving this puzzle I sort of lost interest myself and went on to other problems.

But like ekko848 I would be very keen to see a snippet of your working code, @robswaimea.

Right now I have changed so much and my mind is mushy from being up 20 hours.
The exact code I am using is too different from what you guys want, to just cut and paste the exact example.

But… where I started getting things done was on this post.
https://www.ads-software.com/support/topic/markers-array-in-em_maps_locations_hook/?replies=11#post-5890420

I can’t remember if this was part of the problem… but I did change the part in includes/js/events-manger.js
That “juanjoeag” talks about…

In the link above….
“juanjoeag” changes some lines of code… his third post…
he shows the code. (it will actually be approx line 894 )

Then further down in the same post…
“brightonmike” (his first post) shows you a snippet about an array that looks like this…
—-> Make this change so it matches what will be in events-manager.js
—->document).bind(’em_maps_locations_hook’, function(e,map,infowindow,markers){

console.log(marker);
	for (var i = 0; i < marker.length; i++) {
		marker[i].setOptions({"icon": "map_logo.png"});
	}
});

==================
That’s where I got started… and right now I can’t remember exactly what I did,
What I have now uses similar to the above…
But is very much more complicated…. and if I posted it, it wouldn’t help you much.

On my other site… where this is all going on… I sorted of flip Events Manager around.
And as opposed to Events… it is Location Based… sort of a Locations Manager.
Using another plugin…. to assign images to Taxonomy –> Terms
https://www.ads-software.com/plugins/wp-term-images/
read the FAQ on the plugin page.
It’s adding images to a Term… just like you might do to a post’s category.

So…. for my Locations, I have custom taxonomies, and I assign an image to the term.
For example Locations Custom Taxonomies
Taxonomy = Restaurant_type.
Terms =
Seafood (now has an image which is an Icon)
Steaks (now has an image which is an Icon)
Vegitarian. (now has an image which is an Icon)

or similar for
Taxonomy = Restaurant_holiday
Terms =
Halloween (now has an image which is an Icon)
Thanksgiving (now has an image which is an Icon)
New Years (now has an image which is an Icon)

Thusly I can have a Locations map with each Location and it’s separate Icon.
Or… have a Halloween Map (that the Location is doing Halloween) where all the Icons are Halloween.

It’s all hard coded into global_map.php
You have to get the Locations Id in a loop, match it to the terms in an array…
Put all the Icons in an array… then pass that down to javascript.
The javascript looks very similar to what we have been talking about.

In the above example with the “array” I can’t remember if I had to make this change for a single Icon. It’s how it looks for many Icons…
But if the array from above doesn’t work try this little snippet.. Note the Variable “k” .

for (var i = 0, k=1; i < markers.length; i++, k++) {                           
                            var myIcon = new google.maps.MarkerImage(THE-ICON-YOU-WANT[k], null, new google.maps.Point(0,0), new google.maps.Point(16,32), new google.maps.Size(40,48));
		markers[i].setOptions({icon:  myIcon});
}
});

====================================
That’s the best I can do for now.
Good Luck.
If I find time in the future and add a “Single” Icon to my other site(s)… I’ll post the info…
I spent so much time on the original project I have to do other things for now.

Ok boys and girls I dug through my notes and found the original script that all my crazy other stuff is based.
It’s stripped down to the basics… I guess you can play around to add other stuff…

I’m pretty sure you have to change the line around 894 events-manager.js for the hook to this….
don’t have time to double check it this morning…
jQuery(document).triggerHandler('em_maps_locations_hook', [maps[map_id], infowindow, maps_markers[map_id], map_id]);

and thusly your “golden goose egg” is below…
(I put it in the header… but should work in the footer as well)
<script type=”text/javascript”>

jQuery(document).bind('em_maps_locations_hook', function(e,map,infowindow,markers){
//Set marker image and size
var myIcon = new google.maps.MarkerImage("https://the-location-of-your-icon/images/yourmap_icon.png", null, new google.maps.Point(0,0), new google.maps.Point(16,32), new google.maps.Size(40,48));
//Apply marker to map
for (var i = 0; i < markers.length; i++) {
		markers[i].setOptions({icon: myIcon});
	}

});

</script>

I learned a lot with this project.
Pop back in here and let me know if you get it working.

• This reply was modified 8 years, 2 months ago by Robswaimea.