Styled Maps Concrete5 CMS add-on

PHP, Javascript, JSON, MySql, Bootstrap, Concrete5 CMS, HTML & CSS

Styled Maps Logo

  • Develop a Google maps add-on for Concrete5
  • Make it easy to use for non-technical people
  • Provide UI access to Google maps API options
  • Leverage the ability to custom theme Google maps with JSON
  • Create simple to use options for novice users
  • Support adding custom JSON for advanced users
  • Launch project as a free add-on
Design & Development:

This add-on was developed 2016 from what was originally a hard coded workaround to a theme I needed on an unrelated project.
After some searching and realising there was no other add-on at the time that would allow me to achieve this functionality, I decided to take what I had already done and work that into a plugin.

This gave me a great opportunity to learn the process of developing plugins for existing systems and experience processes such as code review boards, releasing updates and version control, documentation, support and feedback from the community and peers.

At it's core the Styled Maps plugin original purpose was to change the colour of your Google map to match your website theme, however, by completion it became a direct UI for the majority of available Google map options that anyone could easily use.

  • Predefined custom Google map styling options for novice users
  • Copy/Paste editor for JSON styles and Snazzy Maps integration for medium to advanced users
  • Upload your own map marker or location pins
  • Adjust the size of your map
  • Set default zoom level
  • Toggle on/off satelite & street view options
  • Toggle on/off scroll wheel controls
  • Rich text editor for adding pop-up info window content
  • Info window display options (onLoad or onClick)
  • Custom title options
Project Time Frame :

3 Weeks original development + ongoing features and updates since 2016. Sole developer

Styled Maps form
Styled Maps - Form: Options tab 1

Styled Maps form
Styled Maps - Form: Options tab 2

Styled Maps form
Styled Maps - Form: Options tab 2

Styled Maps form
Styled Maps - Form: Options tab 3

Styled Maps demo
Styled Maps - Example

Styled Maps demo
Styled Maps - Example