<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=1195114&amp;fmt=gif">

How to have layered Google Maps within your Mendix App

7 September 2020, last update 1 February 2024 2 min read
Blog overview Image

This blog is about the 'Building a Layered Google Maps Integration' video, presented by Jan de Vries from Mendix and Ivo Sturm from First Consulting. You can watch the video here.

Google Maps was one of the pioneers of geo-based solutions, has almost 66% of the Maps market globally, and boasts what are essentially the world's most featured and up-to-date maps.

Google Maps QuoteOne reason behind its popularity is that Google offers a wide range of developer-friendly APIs that work with its services and products, making it easy to use. Today we're going to take a high-level look of how we can develop amazing Mendix apps that use Google maps.


Since the map is what gets run on the client-side, most of the technology stack around it is going to be client-side technology, like JavaScript and Google’s Maps JavaScript API.

Google Maps JavaScript API is, as the name implies, based on beloved JavaScript, which is very developer-friendly, and easy to use. 

On the other hand, since we are again developing the client-side solution, we have to use Mendix Widgets [see here]. Widgets are Mendix's solution for implementing functionality on the client-side.

Mendix Widgets 

Widgets in nutshell are a set of JavaScript functions and statements that are managed by a framework. The widgets backbone framework used to be Dojo [see here], but it has been replaced by React for its simplicity and better performance. In the widget, you can simply modify HTML DOM, elements can be added or removed, events can be implemented, and much more. So Widgets are quite a powerful tool for supporting various scenarios in the browser. All we have to do is import a widget into a page, then Mendix manages its life cycle, it's that easy!

How it works

Google Maps APIs need a Div HTML element to draw maps and markers there, so within the widget, we can create a Div element and pass it to the API to initialize a map object inside the widget, something like the following statement. 

map = new google.maps.Map(document.getElementById('map'), {

  center: {lat: -34.397, lng: 150.644},

  zoom: 8


Now we've created a widget that displays a map, but for more functionality you need to learn a bit more about the API and implement what you want in your widget.

And what are layers? Actually, layers are just simple shapes drawn on the map. An approach for simulating layers in a map is that the developer creates multiple arrays to hold information like type, icon, and color, then draws them on the map based on the user’s desire to hide/show them.


Use case

Real time ressource map 

Recently a Mendix consultancy implemented a tool for the Dutch railways provider NS to help them work with incidents and suggest an alternative route, by bus for example, when a route is blocked, or help NS manage their resources in different situations.

Implementing such an interactive map in terms of new input from different users and keeping the map updated for all users can be challenging. Of course they are case dependent, but using various techniques and technologies will help you create a very rich, user-friendly geographically based interface, like using SingalR to transfer data from a given user to be shown for all users, or using caching techniques to decrease data fetches. In this kind of application, numbers of data points and user interaction are quite high and simple design would not work, but Mendix is a powerful tool that can support those kinds of scenarios. 

interactive map




Ready to accelerate your digital transition?

Get in touch
CLEVR CLEVR, a globally recognized provider of low code, Product Lifecycle Management (PLM), and Manufacturing Operations Management/Manufacturing Execution Systems (MOM/MES) software solutions, specializes in enabling organizations to unlock their full potential through digital transformation. By combining cutting-edge technology with industry expertise and a customer-centric approach, CLEVR delivers comprehensive software solutions that drive innovation, accelerate growth, and provide organizations with a competitive edge in the rapidly evolving digital landscape.

Related articles

Read the latest CLEVR news, articles and updates on LinkedIn
Receive personal news and updates in your inbox
contact-icon--white Get in touch

Get in touch

Do you want to know more about our CLEVR solutions and services? Please leave your contact details in the form below, write an email or visit us in one of our CLEVR experience centers.