Creating a simple SAPUI5 Application with Google Maps
1. Creation of an empty project
I have created an empty project with MS Matrix (you can use any environment you like instead).
Striked out files are generated automatically and actually not needed, if you work with another editor.
Default.cshtml file is a default handler for the site. Let's start with it.
2. Default.cshtml
Default.cshtml has following content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Maps</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-language="en_US"
type="text/javascript"
data-sap-ui-libs="sap.m,sap.makit"
data-sap-ui-theme="sap_mvi"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_APP_KEY&sensor=false"
type ="text/javascript"></script>
<script type="text/javascript" src="j/app.js" ></script>
<style>
.myMap {
height: 100%;
width: 100%
}
</style>
</head>
<body class="sapUiBody">
<div id="content"></div>
</body>
</html>Here is an explanation of included parts.
First special part is including and initializing SAPUI5 library as described in developer guide.
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-language="en_US"
type="text/javascript"
data-sap-ui-libs="sap.m,sap.makit"
data-sap-ui-theme="sap_mvi"></script>Second special part is an initialization of Google Maps API. Of course you need to get your own API key and use it instead of YOUR_APP_KEY.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_APP_KEY&sensor=false"
type ="text/javascript"></script>Third special part is calling own initialisation logic, which is placed in app.js file.
<script type="text/javascript" src="j/app.js" ></script>Fourth special part if a small hack to set the right map size (fill all available space). We define an own css class, which fills all available space.
<style>
.myMap {
height: 100%;
width: 100%
}
</style>This hint is taken from Google API documentation.
The last part is a body - nothing special.
3. app.js
app.js file is very simple and has just an initialisation part.
var oApplication = {};
sap.ui.localResources("v");
sap.ui.xmlview("appView", "v.appView").placeAt("content");Here a default aplication view appView loaded according ro MVC Concept of SAPUI5 Mobile Applications
4. appView
appView consists of 2 files: view definition as xml (appView.view.xml) and view controller as js (appView.controller.js).
Here is content of these files
appView.view.xml
<core:View controllerName="v.appView"
xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns:html="http://www.w3.org/1999/xhtml">
<App id="appMaps">
<mvc:XMLView id="mainView" viewName="v.mainView"></mvc:XMLView>
</App>
</core:View>appView.controller.js
sap.ui.controller("v.appView", {
onInit : function() {
// remember the App Control
oApplication = this.getView().byId("appMaps");
}
});View definition just uses a simple view mainView with a content.
5. mainView
mainView will have following controls: an input field where you can enter an address, button for submitting search and finally a place for the map.
Here is a view definition.
mainView.view.xml
<core:View height="100%" controllerName="v.mainView"
xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page id="mainPage" enableScrolling="false" title="GMaps">
<VBox fitContainer="true" justifyContent="Center" alignItems="Center">
<HBox fitContainer="true" justifyContent="Center" alignItems="Center">
<Input id="inpSearch" editable="true" value="" maxLength="80"/>
<Button id="bntSearch" text="Search" tap="actSearch" />
</HBox>
<HBox id="map_canvas" fitContainer="true" justifyContent="Center" alignItems="Center" />
</VBox>
</Page>
</core:View>and here is a controller.
mainView.controller.js
sap.ui.controller("v.mainView", {
onInit: function () {
this.getView().byId("map_canvas").addStyleClass("myMap");
},
onAfterRendering: function () {
if (!this.initialized) {
this.initialized = true;
this.geocoder = new google.maps.Geocoder();
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.getView().byId("map_canvas").getDomRef(),
mapOptions);
}
},
actSearch: function () {
var map = this.map;
var address = this.getView().byId("inpSearch").getValue();
this.geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
});There are 3 methods implemented here:
onInit - is an initialization of the view - apply a hack from Default.cshtml
onAfterRendering - is an initialization of Google Maps object
actSearch - perform search with the entered address
That's all
Result:
- SAP Managed Tags:
35 Comments
