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

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

  1. 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.

    (0) 

Leave a Reply