Skip to Content

Simple Implementation of Google Maps in UI5 Page

There are several providers for maps in UI5. However the most simplest that can be used is google maps.

Google Maps is not just a map, it has an entire array of features that can be used. Not only is its feature base wide but it is fairly simple to use and its implementation is forward.

The concept is to just add a “DIV” tag element in the DOM and the Google maps API will handle the rest.

In ui5 one of the simplest ways to introduce an empty “DIV” tag would be to use “HBox”.

An empty “HBox” set with an “id” is  enough. But what needs to be done is that the ID provided will always be prepended with an additional id. Find out the id of the element from the console of the browser.


Ensure that the Google maps API library is included in index.html just above the UI5 initialisation scripts.

The next step is to call the map initialisation function inside the onAfterRendering event.

A sample can be found here 

Be the first to leave a comment
You must be Logged on to comment or reply to a post.