Showing results for 
Search instead for 
Did you mean: 

Add Google Maps zu a IconTabBar

0 Kudos


i am completely new to this topic so excuse my question

I am building one of my first small Fiori Apps and i like to have an IconTabBar with an area for Google Maps.

I used the "Master-Detail" Template and i already added a IconTabBar to the XML File.

What futher steps i have to go to add Google maps to my app.

I already read some other discussions but still i dont know what to do.

Thats how it should look like. As a placeholder i added a image:

Accepted Solutions (0)

Answers (1)

Answers (1)

Former Member
0 Kudos

I recently had the same question, so I thought I'd share my research result.

I found this library online:

Download an unzip the archived library files and add these to your project. Then add this line to the Component.js file:

sap.ui.getCore().loadlibrary("openui5.googlemaps", "../openui5/googlemaps/");

(make sure that the path matches that of the location of the files you installed). To add the map to the icon toolbar, use the XML example on the openui5-googlemaps library page. It's really simple to use. Note, I did find that I was getting errors in the browser console about parts of the library not loading, but the output seemed fine.

Former Member
0 Kudos

Another way to add a Google Map to a SAPUI5 project is to make use of the Google Maps API directly.

You feed all the data you need to define the map as part of a URL string. To do this, create a formatter in which you use the address / lat-long data. You then call the formatter on the various parts you specify in the view, inside an <Image> tag. Something like this:

<Image src="{

                        parts: [






formatter: '.formatter.formatMapUrl'

                        }" />