The Google Maps marker module provided in the Divi Builder by Elegant Themes is really great when it comes to embedding maps within a WordPress website. It doesn’t require you to obtain an embed code from Google, or limits your choice of locations and includes great customization abilities. It does, however, lack some options that we’d all love to see made available.
One such options is that of changing the default marker provided by Google (the little icon that marks a certain location). While it is not pre-built into the Divi module, it is quite easy to achieve by performing two simple steps.
Here’s an example of what I mean:
Let’s begin.
Create or download a new marker
First things first, obtain a png (transparent background) file of the marker/icon you wish to replace the default Google Maps pin, and save it to your desktop.
You can create one yourself, or download icons from websites such as FreePik or Icons8 (make sure you have the proper licensing and for these images, as some of these websites require that you get usage rights before deploying anything online)
Next, open the png file using any editing software, such as Photoshop (or even Preview on Mac), and resize the image to be exactly 46 (width) by 43 (height), and save it as “marker.png”.
Upload the icon to your Divi theme folder
Open your favorite FTP software and connect to your server (or your browser-based File Manager if you’re using cPanel or something similar to manage your hosting account).
I do certainly hope you are using a child theme for your website, if not, you really should (follow this awesome tutorial on how to create a child theme for your Divi website).
In your child theme folder (located under /wp-content/themes/[ChildThemeName], locate a folder named Images, and if you can’t find it, create one by that name.
Upload the png file that you saved (the one that is 46W x 43H in size) to that folder.
Add a code to your .htaccess file
Web servers running Apache Web Server software often have htaccess files within certain directories. These files are used as to alter the configuration of the software to enable or disable certain functionailites and features that the Apache Web Server software is able to provide.
In order to instruct your server to use the new file you’ve just uploaded to your Divi child theme rather than the default one provided by Divi, you will have to define a new rule in your site’s .htaccess file.
Still in your FTP software, navigate to your site’s home directory and locate the file named .htaccess. Download a copy of the file to have as a backup.
If you are unable to find the file, create a new one yourself and paste the original code as directed by the official WordPress Codex.
Add the following code to your .htaccess file:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^wp-content/themes/Divi/includes/builder/images/marker.png$ http://www.yourdomain.com/path-to-wordpress/wp-content/themes/theme-name/images/marker.png [L]
</IfModule>Make sure that in the second half of the RewriteRule line, you change yourdomain.com to your domain name, the path-to-wordpress to your installation directyory, and the theme-name to yours.
All done!