Blog for Visual Composer
Title: Combining Customer BAPI and GoogleMap in your portal
Introduction
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.
Details
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
http://code.google.com/apis/maps/documentation/examples/geocoding-simple.html
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();
}
showAddress();
}
}
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 "";
else
return results[1];
}
function showAddress() {
var address = gup('address');
// alert(address);
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
************** 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.
"
Conclusion
Now you can internalize the Google API into your website and extend the Customer BAPI in a mash-up application.
5 Comments
