Skip to Content

Visual Composer demo – Customer and Google API

Google Maps API Example: Simple Geocoding

Blog for Visual Composer  

Title: Combining Customer BAPI and GoogleMap in your portal




I wanted to build a composite application,  so I read  about other mash-up applications on SDN. One Mash up your application gave a good overview of the topic.  I figured that I want to reconstruct the example, but in the process, I came across a few changes, which I believe make the creation of mash-ups with SAP technology easier to understand.


There is an existing WIKI  description of using Google via URL but I chose a different implementation method where you are more free to customize in a Javascript, since I store a .jsp file in the KM-repository at our SAP EP server. This, on the other hand, requires that you sign up for a free API-key from Google. It gives more flexibility in my opinion.




My composite application is just a simple Address –> Map application that is based on BAPI and Google Map API. Hardly any coding needed.


1)      I created a simple customer model using the BAPI_Customer_Getdetail2




2)      I only choose the fields, CITY, COUNTRY; POSTL_CODE, STREET as input to the CustomerAddress Form.






3)      Notice I made a new invisible field “SAMLET” where I added all the fields as for getting the right syntax for the Google Map I am going to use later on.




4)      I registered for a free Google Map API, so I could use it from our own homepage.

Take your time to read the specifications for the Map API – it provides lots of possibilities with Traffic Overlayer, driving directions, zoom etc.


5)      I added a HTML view,  which I connected with the CustomerAdress form via a “Select”




6)      Now, I stored almost exact the demo-example from Google Map on how to retrieve a location from an address using the Geocoding example


I took the source code (View Source in tools), changed the API key to the one I just registered and that was it.

**********************  JSP Source Coe **********************






    var map = null;

    var geocoder = null;


  function initialize() {


      if (gup(‘address’) != ”)


            if (GBrowserIsCompatible()) {

        map = new GMap2(document.getElementById(“map_canvas”));

        map.setCenter(new GLatLng(55.715443, 12.550362), 13);

        geocoder = new GClientGeocoder();





            function gup( name )


                        name = name.replace(/[[]/,”\[“).replace(/[]]/,”\]”);

                        var regexS = “[\?&]”+name+”=([^&#]*)”;                        var regex = new RegExp( regexS );

                        var results = regex.exec( window.location.href );

                        if( results == null )

                                    return “”;


                                    return results[1];



    function showAddress() {


              var address = gup(‘address’);

            //  alert(address);

      if (geocoder) {



          function(point) {

            if (!point) {

              alert(address + ” not found”);

            } else {

              map.setCenter(point, 13);

              var marker = new GMarker(point);

















************** End of JSP Source Code *************************


Of course I made small changes as for example not showing an input box, and changing the default map location etc.


The file was stored at our own demo environment as a JSP-file. This is the file you want to reference, look up the file – find the exact http:// location at the Portal, and then you are all set.





Just remember to “parse” in the address at the end of the “Assigned value” URL in the Select between Customeradress Form and your map HTML view –?address=” & @samlet   –  or whatever you prefer to call your variable made in step 3. Notice that I blanked out the exact link to our portal as well as part of the Google API key


This is the end-product when deployed from VC into the Portal.





Now you can internalize the Google API into your website and extend the Customer BAPI in a mash-up application.

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

    I'm glad to see that your first blog was published. I know you have lots of other great ideas and I can't wait to see what your next blog will be.


  • Hi Jakob
    Great idea to use the jsp in order to get Google Maps working. As a user I prefer Google Maps above Mappoint. In my example I used Mappoint as they provide webservices and Google 'only' an API.

    Kind regards

    (Thanks for mentioning my blog)

  • Hi Jacob,

    Can you please expand you details on task 3, when you create a SAMLET what kind of control type is it. And also what does this mean "where I added all the fields as for getting the right syntax". when I compile the application i get the following warning. Field "SAMLET" contains and empty entry list. Please help.

  • Hi,

    Firstly thanx for such an excelent blog.

    I have impletemented the senario explained, but i am not getting the map to dispay on the html view.
    i have passed the same value to a form and checked the complete link that is passed to the html view. Correct me if the below link is what i should be passing :
    html view: "http://*******:*****/irj/go/km/docs/guid/70b92640-c34d-2c10-21be-baef7e1f23fb?address=" &@SAMLET

    the code used in the jsp file was exaclty the same as mentioned in your blog with just a change in the API key.

    Thank you,

  • Is it possible to bring multiple coordinates for the same ad?

    Maybe seperated by komma or pipe?

    Like 52.412260000000,13.389740000000|51.457400000000,6.884850000000

    I have implemented your blog and this is the only enhancment i need.