The Ultimate Divi Bundle - 5 Divi plugins. 1 great price.

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:

/wp-content/themes/Divi/images/marker.png

From Divi 2.4 onwards it is located at:

/wp-content/themes/Divi/includes/builder/images/marker.png

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.

Using JavaScript

A neater, cleaner solution potentially exists. It should be possible to access the pin via the Google Maps JavaScript API. However, I haven't been able to get this working yet- Divi doesn't seem to be keeping a reference to the pin objects, and Google Maps doesn't offer an obvious way to retrieve the existing pins. I'll keep trying…

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.

In theory it should be possible to have the icon update immediately by hooking into the Google Maps JavaScript and changing the icon there, but I have so far been unsuccessful in doing so. I’ll update when I figure it out.