Google Maps Integration with SAPUI5 Application.

Authored by

Google Maps provide rich API services which can be easily integrated with any sort of applications. It is possible to make use of this API in SAPUI5 framework also. There are many ways to do the same. One of the easiest way is to load maps API script after loading our application and placing it in any UI container. Below is the code sample for simple and easy integration of Google maps with UI5 application.

Create a new UI5 project for practicing or you can directly start with your current project. We need container to place maps. So lets create one HBox container in view as below.

We need to import Google maps script. Lets do that in onAfterRendering of the controller file.

In the above code we are calling loadGoogleMaps function with a callback function. Callback function is used for setting map data such as longitude, latitude etc.

Don’t forget to replace [ Google Maps API Key ] with your own generated key. If you are not aware of how to create API key for Google maps, please go through this quick official guide. [ Get an API Key from the Google API Console ]

In loadGoogleMaps function, we are creating a script tag and appending script to the body of web page. Once the script is loaded callback function will be triggered. In callback function we will refer containers dom using the ID, so that map can be placed on that container.

Sample Output:


Once you load the application, you can see map based on the data you set at setMapData function. We can extend this map feature as per our own requirement. One such requirement is using input boxes for setting longitude and latitude of map instead of making it static. There are many such options and tutorials available at Maps API help page. You can go through those options and personalize as per your requirement with little tweaks.