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 Map Module Pin Icon in Divi Booster
Divi Booster adds hundreds of new options to Divi, including the option to change the map module pin icon. You can set the new map icon by uploading it at:
Divi > Divi Booster > Modules > Map > Change map pin icon
Like so:
Here's an example of how it looks:
Note that the image should be 46 x 43px. Larger images will display partially cropped. Also, note that the original marker icon may persist in the browser's cache for a period of time. To see the new icon immediately, clear your browser cache and then refresh the page.
Change Map Module Pin 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.
Change the Map Module Pin Icon using .htaccess
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.
Note that 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.
Change the Map Module Pin using JavaScript
If the .htaccess method above doesn't work, there is a slightly hacky way to get it working using JavaScript.
First, convert your marker icon to PNG format, and name it "marker.png".
Next upload this, e.g. via FTP / SFTP, into the main folder of your WordPress installation (the same folder that the wp-config.php file is located in).
Now, add the following JavaScript / jQuery code to your site:
function dbm_update_builder_images_uri() {
global $wp_scripts;
if ($wp_scripts instanceof WP_Scripts) {
$site_url = 'https://www.mysite.com';
$builder_modules_script_handle = apply_filters('et_builder_modules_script_handle', 'divi-custom-script');
$data = $wp_scripts->get_data($builder_modules_script_handle, 'data');
$extra = 'if (typeof et_pb_custom !== "undefined") { et_pb_custom["builder_images_uri"] = '.json_encode($site_url).'; }';
$wp_scripts->add_data($builder_modules_script_handle, 'data', "{$data}\n{$extra}");
}
}
add_action('wp_enqueue_scripts', 'dbm_update_builder_images_uri', 12);
Related Post: Adding JavaScript / jQuery to Divi.
The icon should now show up in your maps.
Changing the Divi Map Module Pin on WP Engine
WP Engine have disabled the htaccess mechanism on sites hosted with them. This prevents either the Divi Booster or manual .htaccess methods given above from working.
While I haven't had the opportunity to test this myself, I believe it should be possible to manually add the equivalent to the necessary htaccess rules through the WP Engine user portal like so:
- Log in to the User Portal
- Select the environment name
- Click the "Web Rules" option from the left-hand navigation menu.
- Select the "Rewrite Rules" tab
- Click the "Add rewrite rule" button
- For the "Action", select "Internal rewrite"
- For the "Source" field, enter the following: ^wp-content/themes/Divi/includes/builder/images/marker.png$
- For the "Destination" field, enter the URL of you new map marker (png format). If you have already uploaded a marker using Divi Booster, you'll find the marker URL at "Divi > Divi Booster > Modules > Map > Change map pin icon".
- Lastly, click on "Add Rule" to save.
Please note that it may take a few minutes for the redirect rule to take effect.
Adding Multiple Custom Pin Icons to the Divi Map Module
The Divi Map Module only supports a single map pin and there doesn't seem to be an easy way to modify this or directly manipulate the resulting map to add additional pins.
If you want to be able to add several different marker pins to your map, then at the moment the best way I know to do is to forgo the use of the Divi Map Module and instead:
- Manually generate the JavaScript embed code for a map (here's an example) and add it into a Divi Code Module, or
- Use the Supreme Maps for Divi plugin which gives you a new map module with support for multiple map pins
Encountering this not properly loading on: https://roughsands.com/contact/ – I've cleared cache, tried using nocache=true just to see if it was something server side.
Hey Kyle, it looks like you're hosted with WP Engine, right? If so, they actually don't use the standard WordPress .htaccess mechanism on which this feature relies, and instead only allow the necessary modifications to be made using their own custom web interface. I've added a section above with details on how to do this (based of what I read in their docs – I haven't been able to test it myself. I hope it helps, but if not the other option would be to try the PHP version given in the post as it doesn't rely on .htaccess. Please let me know if you have any questions about it, etc. Thanks!
This feature no longer seems to work in Divi Booster. The marker seems larger and different proportions than the 46×43 prescribes here and in the plugin.
Any newer work-around?
-Michael
Hey Michael, I've just done some testing and everything looks to me to still be working in the same way as before. Divi's still seems to be using the same 46×43 marker at the same URL, and overriding it as described in the post (and via Divi Booster) is still working… for me, anyway ;) One thing to be aware of is that since the image is switched on the server, and since browsers often cache the images for a period of time, you may need to clear your browser cache to pick up the latest version of the image. Assuming that's not the issue, is there any chance you're able to send through a link to an example page so that I can look into it for you? Cheers!
hey
i am unable to change the pin either with divi booster nor with overcriding the markern.png file….
any ideas? thanks Jonas
nevermind it just worked
Okay, great! Thanks for the update, Jonas :)
I'm struggling with this Dan. You have helped in the past with some scripting and it worked and I also have the .htaccess rewrite rules in place. However, I just update to Divi, 14.9.5 and the marker no longer visible. I believe it quit working some time back and there doesn't seem to be any updates in Divi Booster. Have you abandoned that plug-in?
Hey Matt, sorry to hear this continues to give you trouble. I took a look at the site we were originally working on and the custom pin icons still displaying for me there. Are you able to share a link to the page you're working on so that I can make sure I'm looking in the right place? Also, if you haven't already, try clearing your browser cache. The .htaccess rules in particular work by changing the image served by the site (without changing the URL), so if your browser has already received the original version it may not show the new image until the cache expires / is cleared.
Divi Booster is still very much being actively developed. The last update was v4.0.8, released on New Year's Eve. I had family visiting in January, so I didn't get any updates out then, but I expect there'll be more updates on the way soon :)
Cheers!
Obviously replacing the file in the main theme will not stick through an update.
So I tried to create the same path in my child theme:
/Child-theme/includes/builder/images/marker.png, but without luck. It doesn't overwrite.
How do I secure always to use my own colored marker.png file?
Thank you!
Hey Morten, the only way I've been able to make the change persist is using the .htaccess technique described in the post. If you are just doing this on one site you could just edit the .htaccess file directly. If you're planning to distribute the child theme then perhaps you could have it write to the .htaccess file upon activation. Due to the way Google maps works and is called by Divi, I haven't been able to find an easy way to do it via JavaScript – if I do figure it out, I'll update here. Thanks!
Ir works great with Divi 3.5.1
Thanks man, your efforts goes beyond everything :)
Hi Dan,
Do you know if it's possible to add different markers to different pins on the same map? i.e. I have a map with 3 pins and would like a different pin for each.
Thanks!
Hi David, I'm afraid I don't know of any way to do this. Currently Divi uses the same image for each marker, and my code works by substituting this image for another. There doesn't seem to be any easy way to modify this to allow different marker images for each pin. If I'm ever able to figure out a way to do it I'll be sure to let you know.
Hi Dan!!
Any chance you find out how to place individuals markers for each pin?
Thanks in advance!!
Hey george, I haven't been able to figure out a way to do it yet, unfortunately. The difficulties I mentioned above still stand.
One way you can do it is with the Map Extended Module. As it is a separate module it doesn't need to try and interact with Divi's map implementation and thus avoids these difficulties. One of it's features is the ability to set a custom icon for each pin :)
Hi Dan,
We are having problems displaying our map icon. have cleared cache, have tried on a different PC but the red pin keeps showing.
Any suggestions?
Cheers
Steve
Hi Steve, I'm not sure what caches you cleared, but make sure this includes your browser cache (CTRL-Shift-Delete in Chrome). If you've previously viewed any map on your site on the two PCs, then the pin will have been cached. Once you clear the browser cache reload the map and the pin should be updated. If this is not the case, do you have Divi installed in a folder other than /wp-content/themes/Divi/ – as the above assumes the standard location. Finally, how are you adding the code – are you doing it manually, or using my plugin? If it's manually, are you able to send me a link to your site and a copy of your .htaccess file? I'll send you an email that you can reply to with these details. Thanks!
Hi there, I have the latest divi version 2.4.2 but they probably changed the place where the marker is, because I can't find the marker.png file described in the folder. Can you take a look at the new version to see how this works for the new divi?
Best!
Hi Carlos, I've updated the post to cover Divi 2.4 as well.
Hi Dan,
This website and the Divi Booster plugin is really a life-saver.
Thank you for sharing your Divi-wisdom!
Regards,
Vivian
Just to keep you posted Dan, all working great on both sites, I think it was the cache causing it after all. Both clients really stoked with the results too :)
Thanks again!
Awesome! That's excellent news. Thanks for letting me know, Amy :)
Hi Dan
I just discovered your 'DIVI Booster' and interested until I understood the plugin is always running during operations.
Have you think to add permanent changes into the CSS and adding JS instead of having the plugin changing the behavior on the fly.
You may say this is impossible and I will understand.
Just as an example, I'm using CCSHero plugin to modify the CSS and this works fine. The outcomes of CSSHero are CSS changes that could be inserted in the chid-theme CSS for ever. No more need to have the plugin activated anymore.
Could be awesome if Divi Booster could work that way.
Thanks for your light
Regards
Hi Pat,
Yes, currently Divi Booster needs to be running to work. I'm considering ways to make it possible to export particular configurations for use in child themes and so on. It's not impossible, but it will be difficult so it may not happen soon. The main issue is that unlike CSS Hero, some of Divi Booster's fixes can be complex and require a combination of CSS, JavaScript, PHP and even .htaccess rules inserted into various places. Getting these packaged up neatly for export will require some work.
On a side note, I wouldn't expect there to be significant performance gains in exporting the Divi Booster features, as Divi Booster pre-compiles its fixes into minified CSS and JavaScript files, etc. The only real work done on the fly (in most cases) is to include these files, which is a very inexpensive operation.
Also, a benefit of having Divi Booster running is that as I release improvements to fixes (either to fix bugs, handle edge cases or accommodate Divi Theme updates), the improvements will be automatically applied. With an export system you'd have to manually update them.
That said, I understand there are cases when it would be beneficial not to require Divi Booster to be running (for instance if you are using it to develop and then distribute a child theme), so I will be working towards releasing an appropriate export feature in the future.
Hi Dan,
Thanks for the response. It has started working just fine now, I think at the same time that I published the page, so I'm not sure whether it was because it wasn't a live page. I am going to do the same thing for another website in the next few days so I'll check back in and let you know if that was the cause.
Thanks again, it's an awesome plug in and has solved so many issues already!
Ah, that's good to hear Amy. Thanks for the update and the kind words :)
Hi there,
I'm using Divi Booster and tried to update the pin icon but it's not working, the original red one just stays there, any ideas why?
Thanks!
Amy
Hi Amy.
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.