Add Google Maps zu a IconTabBar

[dannyheinrichs]

Hi,

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:

[Former Member]

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

I found this library online: http://jasper07.secondphase.com.au/openui5-googlemaps/

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]

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: [

                                         'street',                                                                                                                                 

                                         'ZIPCode',                                       

                                         'city',                                                                        

'country'

                                    ],                                                                       

formatter: '.formatter.formatMapUrl'

                        }" />