Styled maps

The Google Maps API allows you to create custom map types with styling to match your website. The Flexible Map plugin supports styled maps through a filter hook which theme and plugin developers can use to register their custom map types: flexmap_custom_map_types

Styled maps is an advanced topic that requires a little PHP coding. To make it easy, you can copy the code in this gist and paste it into your own WordPress plugin, then modify the style definition to suit. It’s currently set up with the Retro style, by Google.

The code in that gist defines a styled map type called “flexible1”, which will only be loaded if there is a map that uses that map type, like this one:

[flexiblemap maptype="flexible1" width="100%" center="-32.8709246,151.7099189" zoom="11" hidemaptype="true"]

Notice that we’ve hidden the map type control so that visitors can’t pick from the default map types. We can go a little further and let visitors pick from specific map types:

[flexiblemap maptype="flexible1" width="100%" center="-32.8709246,151.7099189" zoom="11" maptypes="flexible1,satellite"]

Composing the definition of your styled maps can be a little tricky. Google has a handy styled maps wizard to make it a little easier, and you can copy the JSON definition straight from that wizard into your filter hook. Even easier is to grab a ready-made map style from Snazzy Maps!

If you’d rather get a developer to do this, please ask for an estimate through our enquiry form.