Changing marker color on Google maps

I am not part of support just some dude..
I’m a little confused by the “fillColor” .

Not to belittle your knowledge… and I am may be confused by what you want..

The “markers” are images.. so to change the color, or the marker itself…
Thusly create (or get) a new maker image that you like… and place it somewhere on your website… and then we will point to it in a script.
Place in your Theme header.php file, preferable the child Theme
and always make backups of your files…

For a single location…

<script type="text/javascript">
jQuery(document).bind('em_maps_location_hook', function( e, map, infowindow, marker ){
var myIcon = new google.maps.MarkerImage("https://yourwebsite/images/the-image.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 });
});
</script>

See if you can get that to work.. I tested it..
For a map with a lot of locations for example with the shortcode `[locations_map]’

It gets a little more complicated… see if the above works first.

Can you repost your code using the code button?

I did.. it looks ok on my end…

Thanks – I’ll try this. But it was actually on the multiple locations map I was needing to change the default red pin to a hex color. I could change it to a png if that’s easier. Will this also work on the em_maps_locations_hook?

Please let us know if you get the above script to work..
then we can move on..
(no that exact code will not work for em_maps_locations_hook).

But it’s similar…

Thank you! That script worked for the single events! Now how do I do the overall event locations map?

Wonderful.. there was much discussion on this in a number of posts..

What has been working for me (from a number of posts here on this topic)…

We need to change the core file events-manager.js
the location is /includes/js

So I also have to say that changing core files is not recommended.. as you will need to re-edit after the plugin ugrades.
Make backup of file(s) you would change.

In events-manager.js (from above)…
About line 894
Change jQuery(document).triggerHandler('em_maps_locations_hook', [maps[map_id], data, map_id]);

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

And now the javascript, which we need to have the “markers” with an array.

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

});
</script>

And we put the javascript in the header.php file

Hope that works for you.

• This reply was modified 7 years, 11 months ago by Robswaimea.

THANK YOU! That worked! You are awesome!

Is there any possibility of being able to add the js changes into functions.php so it doesn’t get overwritten with updates?

When I was investigating this last year I didn’t find any other approach.
That doesn’t mean it can’t be done some way or another.