Skip to Content
Jan 25, 2019 at 05:52 AM

Loading Google Map Issue inside Icon Tab Bar?


Hi All,

I am working on Custom SAPUI5 Application which includes Google Map Integration. I have Flexible Column Layout template. It has totally three columns. in First column i have some input controls. In Second Column i used SAPUI5 vbm control to show Geo map with Spots. while clicking the Spots the third column will open . In the third column i need to show the Route between the default location and selected spot location.

I have Icon tab bar with three icons in the third column. In First tab i used form to display selected spot details. In the Second tab i used standard sapi5.vbm.routes to display the route. (it just form the straight line between the location). in the third tab i integrated google map API to plot the exact route between the location.

The issue is,whenever i click the spot the third column opens and by default the first tab will get displayed. after that i press the third icon tab , it does not show anything. but after pressed the second tab(where i implemented the default route sa.ui.vbm.routes), if i open the third now i see the google map route.

Screenshot 1: When i click the spot

Screenshot 2: directly clicking the third icon tab:

Screenshot 3: after clicking the second tab .

my code :

<IconTabFilter icon="sap-icon://map" key="gMap1">
						<VBox fitContainer="true" justifyContent="Center" alignItems="Center">
							<HBox id="map_canvas" fitContainer="true" justifyContent="Center" alignItems="Center" height="100%" width="100%"></HBox>

i loaded the google map api key like this:

	var s = document.createElement("script");
			s.src = "";
			s.onload = function (e) { /* now that its loaded, do something */ };

Please help me to identify the solution.

Thank you,




icon1.png (5.1 kB)
icon2.png (6.0 kB)
icon3.png (43.6 kB)
icon4.png (59.3 kB)