Click here and follow my SAP UI5/FIORI snippets and information Page
I have integrated google map API with SAPUI5 and below I have shown Application structure,View Part,Controller Part and index.html.Go through it and please let me know in case of any issue/doubt.
I have integrated google map API with SAPUI5 and below I have shown Application structure,View Part,Controller Part and index.html.Go through it and please let me know in case of any issue/doubt.
View Part
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="map.S1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:l="sap.ui.layout">
<Page>
<content>
<l:Grid defaultSpan="L6 M6 S6">
<Panel id="pid" height="580px"></Panel>
<Page>
<content>
<l:Grid defaultSpan="L6 M6 S6">
<Panel id="pid" height="580px"></Panel>
<Panel id="pid1" height="580px"></Panel>
</l:Grid>
</content>
</Page>
</core:View>
</l:Grid>
</content>
</Page>
</core:View>
Controller Part
sap.ui.controller("map.S1", {
onInit : function () {
var that = this;
//Called function....
function initialize() {
//LATITUDE AND LONGITUDE of Vashi, Navi Mumbai, Maharashtra, India....
var myCenter=new google.maps.LatLng(19.0771,72.9990);
//LATITUDE AND LONGITUDE of Aurangabad District, Bihar India....
var myCenter2=new google.maps.LatLng(24.7033,84.3542);
//Properties of map....
var mapProp = {
center:myCenter,
zoom:5,
disableDefaultUI:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
//Properties of map....
var mapProp2 = {
center:myCenter2,
zoom:6,
disableDefaultUI:false,
mapTypeId:google.maps.MapTypeId.SATELLITE
};
//Setting Properties to map....
var map1=new google.maps.Map(document.getElementById(that.getView().byId("pid").sId), mapProp);
//Setting Properties to map....
var map2=new google.maps.Map(document.getElementById(that.getView().byId("pid1").sId), mapProp2);
//Marker object...
var marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
//Setting marker to map....
marker.setMap(map1);
//Marker object...
var marker1=new google.maps.Marker({
position:myCenter2,
icon:'image/stick.png',
animation:google.maps.Animation.BOUNCE,
});
//Setting marker to map....
marker1.setMap(map2);
}
// This will call "initialize" function(Calling function)....
google.maps.event.addDomListener(window, 'load', initialize);
}
});
Index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<!-- Load this external file for google map -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
sap.ui.localResources("map");
var app = new sap.m.App({
initialPage : "idS11"
});
var page = sap.ui.view({
id : "idS11",
viewName : "map.S1",
type : sap.ui.core.mvc.ViewType.XML
});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Result
No comments:
Post a Comment