You need to set sId for each sap.m.IconTabFilter like this:
new sap.m.IconTabFilter('TF1',{
text: "Floor Plan",
icon: "sap-icon://puzzle",
iconColor: sap.ui.core.IconColor.Default,
content: new sap.m.Image({
src: "image/fp1.jpg",
width:"100%",
height:"100%"
}),
}),
Here TF1 is the sId.
Then add a select function for sap.m.IconTabBar like this:
select: function(oControlEvent)
{
params = oControlEvent.getParameters();
console.log(params.selectedItem.sId);
if(params.selectedItem.sId === 'TF2') // Checks for the right sId
// Call initialize_map from here - It will be called when "Geo location" tab is clicked
initialize_map();
},
Here is the complete source-code for it.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Google map using UI5</title>
<!-- Begin GMaps -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCIxrPiLN7Sk2c7nTPqgmFOpqwOlp4AETk&sensor=true"></script>
<script type="text/javascript">
var geocoder;
var directionsDisplay;
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom : 15,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map($('#map_canvas').get(0), myOptions);
directionsDisplay.setMap(map);
}
</script>
<!-- End GMaps -->
<!-- 1.) Load OpenUI5, select theme and control library -->
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-language="en"
data-sap-ui-libs="sap.m, sap.ui.ux3, sap.ui.commons, sap.ui.table"></script>
<!-- 2.) Create a mobile App -->
<script>
// it initializes the HTML page for mobile use and provides animated page handling
var app = new sap.m.App("myApp", {initialPage:"page1"}); // page1 should be displayed first
var tab = new sap.m.IconTabBar({
select: function(oControlEvent)
{
params = oControlEvent.getParameters();
console.log(params.selectedItem.sId);
if(params.selectedItem.sId === 'TF2')
initialize();
},
items: [
new sap.m.IconTabFilter('TF1',{
text: "Floor Plan",
icon: "sap-icon://puzzle",
iconColor: sap.ui.core.IconColor.Default,
content: new sap.m.Image({
src: "image/fp1.jpg",
width:"100%",
height:"100%"
}),
}),
new sap.m.IconTabFilter('TF2',{
text: "Geo location",
icon: "sap-icon://map",
iconColor: sap.ui.core.IconColor.Default,
content: new sap.ui.core.HTML({
content:'<div id="map_canvas" style="width:100%; height:400px;"></div>',
})
}),
]
});
// create the first page of your application
var page1 = new sap.m.Page("page1", {
title: "Title",
showNavButton: true,
navButtonTap:function(){
app = sap.ui.getCore().byId("myApp");
app.to("idestate1");
},
content : [tab]
});
app.addPage(page1); // add both pages to the App
app.placeAt("content"); // place the App into the HTML document
</script>
</head>
<body class="sapUiBody">
<!-- This is where you place the UI5 App -->
<div id="content"></div>
</body>
</html>
