Select Page

Styling Google Maps

by June 30, 2015Company

As you might have already figured out, Unified Sense runs on WordPress 4.x. Underneath it works with Divi theme from amazing ElegantThemes, which is fairly modified to achieve the result I wanted, even though it is one of the most customisable themes available online.

One of the problems I encountered while building this site was closely connected to Full-Width Maps Module, which only supports adding the Pins, but almost no customisation. Since this module uses Google Maps, I had figured some kind of styling should be possible.

Styling Google Maps is done with additional JavaScript code, which can be generated using a very nice looking user interface provided by SnazzyMaps. We can change the colors of any element on the map, as well as disable certain map elements such as motorway signs or street names. This is an example of JavaScript code that is generated by SnazzyMaps:

But the question remains, where to put this code?

Divi stores map configuration in custom.js file, but I want to keep this file unchanged. That way it the file can be replaced on each update and I do not have to go and tinker with it again.

So, Child Theme you say? A good idea, but seems way too much effort just to add the styling to a map. For certain uses, you should certainly go that way, but this is just not one of them.

I began investigating how Google Maps is integrated into the HTML DOM. And since it is all done in JavaScript, I started working on a script that will seamlessly integrate with Divi, without affecting any other part of the site. So this is the final script:

Code is pretty simple and self explanatory. It will set a timer that will check every half a second if map has been loaded yet (if anyone has an observer solution without extra libraries and dependencies, let me know). When the map is loaded, it calls styleMap function and provides map element as a parameter. This is Google Maps object and you can call any Maps function on it directly.

All you need to do is to integrate this code in the footer of your site. I use TC Custom JavaScript plugin to achieve this and it works perfectly. Another option is to add it to body code using Divi’s ePanel.

Just make sure the code is executed after the code in custom.js, some other plugins might execute the code before.

dal_face  DAL RUPNIK
  Founder of Unified Sense, tweeting at @thelegoless.