The Divi Theme comes complete with a handy map module for easily creating embedded Google Maps. It has the option to add a pin, but no option to change the pin icon from the default. It is possible to change the icon in one of several ways:
Change Icon File Directly
In Divi pre version 2.4, the pin icon used by Divi is located at:
From Divi 2.4 onwards it is located at:
It is possible just to replace this file. The replacement should be 46x43px in size – if it is bigger only the top right hand corner of the image is shown.
The problem with this simple method is that an upgrade to the Divi theme could overwrite the image, causing a revert back to the original icon.
Rewrite the Icon URL
Rather than change the icon in the Divi files, we can just intercept the request for the image and redirect the browser to another one instead. That way there is no need to edit the theme files. We can do so by adding a rewrite rule to the main WordPress .htaccess file, similar to the following:
<IfModule mod_rewrite.c> RewriteEngine On RewriteRule ^wp-content/themes/Divi/images/marker.png$ http://www.mysite.com/my-custom-pin.png [L] RewriteRule ^wp-content/themes/Divi/includes/builder/images/marker.png$ http://www.mysite.com/my-custom-pin.png [L] </IfModule>
This works, but of course you need to be careful when editing the .htaccess file (make a copy first).
Again the image should be 46 x 43px.
The first RewriteRule is there for pre-Divi 2.4 sites, and the latter is there for sites using Divi 2.4+. You can remove the rule that you don't need, but there's no harm in having them both there and it means the code will work unaltered with any version of Divi.
Dealing with Caching Issues
The only way I’ve been able to get this working at the moment is to wait until the browser tries to load the icon from the server and then give it our updated icon instead. Unfortunately if the browser has already stored a copy of the icon it won’t try to reload the icon from the server until the current one has “expired” (after a time determined by your site’s configuration). You can get round this by clearing your browser’s cache (ctrl-shift-del in most browsers). Please note that new visitors to your map will see the new icon right away, while returning visitors will see the old icon until either they clear their own browser cache or their cached version of the icon expires.