Integrate maps on SAP UI5 developments

[former_member201646]

Hello Developers,

 

This post will show how to integrate maps on SAP UI5 developments. It gets interesting when a GoogleMaps service comes into play, it's pretty simple though.

 

I've found myself with an application requirement that consisted of displaying addresses in maps. Thanks to SAP UI5 developers we now have a library for maps rendering: sap.ui.vbm.GeoMap. However, this library expects coordinates but my customer database has human-readable addresses like Carrera 7 # 28-66 Bogotá. Here is what the binding looks like into sap.ui.vbm.GeoMap:

 

vos: [

        new sap.ui.vbm.Spots({

             //click: onClickSpots,

             //contextMenu: onContextMenuSpot,

             // bind to an array in the model

             items: {

             path : "/data",

                  template: new sap.ui.vbm.Spot({

                  position: '{Coordinates}',

                  tooltip: '{CardName}',

                  image: 'pin_blue.png',

                  })

              }

        }),

]

Take a look at the position element: it requires the coordinates which I didn't have.

So, I've been to the Google Developers web site and found this: https://developers.google.com/maps/documentation/geocoding/intro, a geocoding API that converts addresses to coordinates. It's free to use with some restrictions and very easy to implement, but I'leave the explanations to the Google guys.

The following code implements the call to the Google service which expects the address I'd like to convert and a key (provided by Google) to be passed as parameters:

var oGoogleModel = new sap.ui.model.json.JSONModel('https://maps.googleapis.com/maps/api/geocode/json?address='+address+'&key='+key);

oGoogleModel.attachRequestCompleted(oModel,function(oEventG){

  var oModelG = oEventG.getSource();

  var data = oModelG.getData().results[0].geometry.location;

  // After this coordinates are stored in data.lng and data.lat

});

As shown in the code above, the Google API returns a json array with lots of information including the required coordinates.

Hope this was helpful.

Alejandro Fonseca

Twitter: @MarioAFC