Customize the Style of your Google Maps

on March 2, 2016

Share:

The Google Maps widgets have been downloaded over 7.000 times from the Mendix App Store. This is an impressive number and makes it one of the most popular widgets available. This post highlights a handy new feature to make your maps look good and match their styling to the application you’re developing.

Download the Google Maps widget

Customize your Google Maps

The Google Maps widget has a new Customization tab. This brand new feature lets you add colour schemes to your maps that fit the style of the rest of your application. Simply add your styling to the Style Array in the “Customisation” tab. See figure 1:

Figure1

Fig. 1: Google Maps Style Array properties

The only thing needed now is some inspiration on how to find a good map style that fits the application. Lukcily there’s a nifty website that has your back, called Snazzy Maps.

Snazzy Maps

Snazzy Maps is a community built around creating great looking styles for Google Maps. As of version 3 of the Google Maps API you can apply custom styles to maps. This allows developers and designers to pick a style that matches the theme of their website.

Snazzy Maps provides resources that make web development easier. Like any great resource it depends on great content. All styles on the site are created by community users and shared free of charge. The styles are licensed under creative commons and are completely free to use.

(source: snazzymaps.com)

When you have found your preferred style on Snazzy Maps, copy the JavaScript Style Array to the Style Array section in the Google Maps widget, as shown in figure 2:

Figure2

Fig. 2: Copy style array from Snazzy maps

Simply hit the “Copy” button and the style array will be copied to the clipboard. Go back to the Google Maps widget in the modeler and paste the style array into the right section. Here is an example of the result where you can see the difference between a default Google Maps style and a custom styled map. Figure 3 has the default Google Maps styling and figure 4 has the Unsaturated Browns custom styling, created by Simon Goellner:

Figure3 Figure4
Fig. 3: Google default styling Fig. 4: Custom styled maps by Simon Goellner

 

For more detailed instructions follow the related how-to: How-To Style Google Maps

@Simon Black,
Thanks a lot for implementing this simple solution to make a big impact on the styling of maps.

Subscribe to Our Blog

Receive Mendix platform tips, tricks, and other resources straight to your inbox every two weeks.

RSS Feed of the Mendix Blog
Sebastiaan van der Plaat

About Sebastiaan van der Plaat

Sebastiaan van der Plaat is a senior consultant in the UK expert services team. He implements the Mendix platform at clients in multiple industries. Next to that he brings new partners up to speed and provides training courses to new Mendixites. His ultimate goal is to make Mendix successful and satisfy the customers.