Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Hi Folks !!

This blog is about the Extension to Application .

How good it will be if you are able to navigate yourself and know your location on the map in the sap fiori for logistics use.

Application can be deployed and can be used as ios/android/browser application or you can use it on fiori client.

Application is build using the mvc structure and google map api is used to embed the map in the application.


Here are the following steps to create the application

  • Create a project with XML view.

<mvc:View xmlns:html="" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="" displayBlock="true">
<Page title="{i18n>title}">
<HBox id="map" fitContainer="true" justifyContent="Center" alignItems="Center"></HBox>


  • Create a controller js for the view 

], function(Controller) {
"use strict";

return Controller.extend("", {

onAfterRendering: function() {

this.geocoder = new google.maps.Geocoder();
window.mapOptions = {
center: new google.maps.LatLng(45, 32),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP

var map = new google.maps.Map(this.getView().byId("map").getDomRef(), mapOptions);
var infowindow = new google.maps.InfoWindow;
var geocoder = new google.maps.Geocoder();
var iconBase = '';

navigator.geolocation.watchPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
var marker = new google.maps.Marker({
map: map,
position: pos,
icon: iconBase + 'placemark_circle_highlight_maps.png'
infowindow.setContent('Location found.');
}, function() {
noGeolocation('Error: The Geolocation service failed.');
}, {
enableHighAccuracy: true,
maximumAge: 10e3,
timeout: 20e3

noGeolocation: function(message) {
var opts = {
map: map,
position: ll(60, 105),
content: message
info = new google.maps.InfoWindow(opts);
ll: function(y, x) {
return new google.maps.LatLng(y, x);



Here are the screenshots of the application attached for mobile view and desktop view.



Labels in this area