Loading Google Map Issue inside Icon Tab Bar?

[Jayakrishnan]

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>
						</VBox>
					</IconTabFilter>

i loaded the google map api key like this:

	var s = document.createElement("script");
			s.src = "https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places";
			s.onload = function (e) { /* now that its loaded, do something */ };
			document.head.appendChild(s);

Please help me to identify the solution.

Thank you,

Regards,

JK.

[Jayakrishnan]

Got a Solution. I used below code inside the icontab, and ot is working.

<html:div id='map_canvas' style='width: 500px; height: 500px;'></html:div>

[Joseph_BERTHE1]

Hi,

Look at the console, and see if here is error.

Regards

[Jayakrishnan]

No , i did not see any error in the console. the problem is the map container is not rendering while pressing the third tab directly. i checked the status for google map api call, it returns OK. No Luck till now.