Skip to Content
Author's profile photo Mario Alejandro Fonseca

Integrate maps on SAP UI5 developments

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

Assigned tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Manasa Yogeesh
      Manasa Yogeesh

      Hi Alejandro,

      This is really helpful in making the co-ordinates human readable. Do you also use the google maps for provider configuration for the provider tile API in GeoMap. Which API do you use?

      Thanks.

      Author's profile photo Mario Alejandro Fonseca
      Mario Alejandro Fonseca
      Blog Post Author

      Hi Manasa,

      This is a very late response. Sorry about that.

      I never came that far, so I cannot help you with this.

      Regards,

      Alejandro.

       

      Author's profile photo Jakob Straub
      Jakob Straub

      Hey Alejandro,

      thanks for this helpful blog.

       

      Do you use your app as a standalone application or in Fiori launchpad context?

      I have the problem that your coding is not allowed in Fiori launchpad, because of cross-origin-policies

      Following problem occures during call:

      "Request header field X-XHR-Logon is not allowed by Access-Control-Allow-Headers in preflight response."

       

      Do you have any solution for that problem?

      Thanks in advance!

      Greetings, Jakob.

      Author's profile photo Mario Alejandro Fonseca
      Mario Alejandro Fonseca
      Blog Post Author

      Hi Jakob,

       

      Sorry about the late response. I do not know what the problem might be.

      Cheers!