Skip to Content
Author's profile photo Vasuki S Patki

Google Maps Integration using BSP Application

*Introduction : </p><p>Google Maps is web mapping service application provided by Google,which can be easily integrated  using the Google Maps API into any website.</p><p>There are many approaches that can be followed to integrate Google Maps in SAP. However, here  I will discuss how it can be done using BSP application.</p><p>Google provides Google Maps API  which helps in integrating Google Maps in our webpage.Inorder to use the Google API ,you should first register your webpage at  http://code.google.com/apis/maps/signup.html  (http://code.google.com/apis/maps/signup.html)  to obtain a Google Maps API key.</p><p>In this blog I will be explaining  a scenario with flight data model. The idea here is to display the arrival and  departure city on map along with the details of the flight.</p><p> </p><p>Technical process :</p><p>1)  Create a BSP application . Create pages with flow logic.</p><p>In this example , I have created 3 pages :</p><p>          Selection.htm – Selection screen for the flights data model(‘carrid’* and ‘connid’ as input fileds)

          Map.htm  – embeds the Google Map

          Main.htm – embeds both the selection.htm and map.htm page

2)   After you have registered your webpage at the google site mentioned above, you will get an API key which will be used in the following way :

<script src=”http://maps.google.com/maps?file=api&v=2&key=your_key_here&sensor=true_or_false

<br />        type="text/javascript"><br/></script></p><p> </p><p>Below is the code in my 'map.htm' page . Note that this displays the Google Map centered at Walldorf,Germany on your Map page. </p><p> </p><textarea cols="78" rows="12" name="comments"><%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=your_key_here&sensor=false" mce_src="http://maps.google.com/maps?file=api&v=2&key=your_key_here&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
 function initialize()
 {
 if (GBrowserIsCompatible())
     {        var map = new GMap2(document.getElementById("map_canvas"));
  map.setCenter(new GLatLng(50.004863,8.580961), 13);
 map.setUIToDefault();
     }
 }
 </script
 </head>
 <body onload="initialize()" onunload="GUnload()">
 <div id="map_canvas" style="width: 100%; height: 800px"></div>
 </body>
 </html>

</textarea><br/><p><img  height='387' alt='' width='663' src='https://weblogs.sdn.sap.com/weblogs/images/251837830/googlemaps.jpg' border='0'/></p><p>Once  the map is displayed, you are sure your API key works fine and things are working fine. Now we can go ahead with the scenario explained earlier .</p><p>

To use Google APIs you will have to first understand the basic classes and methods provided by Google for creating markers, infowindows , geocoding the address information etc. You can find the detailed reference at links  [http://code.google.com/apis/maps/documentation/reference.html | http://code.google.com/apis/maps/documentation/reference.html] and http://code.google.com/apis/maps/documentation/  (http://code.google.com/apis/maps/documentation/) </p><p>Using the classes mentioned in the above link I have created functions to create marker, place marker at the right location, open an info window on clicking the marker.Once you have understood the concepts mentioned in the links provided, you can easily write functions yourself and use it as and how you need.</p><p>Here is the code  written using Google APIs. </p><p>Create a text document, copy the  code and store as  ‘.js ‘ file. upload this file as MIME object in the MIME repository.</p><p><textarea cols=”66″ rows=”14″ name=”comments”>var point1 = [];    
function drawmap(map, addr1, addr2,popup_dep, popup_arr, arr_icon, dep_icon){
  getloc(map,addr1,popup_dep,0,arr_icon);
  getloc(map,addr2,popup_arr,1,dep_icon);
}
//To place the icon on the Map and open an info window on clicking the Icon.
function createMarker(point, html, icon) {
        var marker = new GMarker(point, icon);
        GEvent.addListener(marker, “click”, function() {
          marker.openInfoWindowHtml(html)
        });
        return marker;
};

// Get the Lat, Longitude of the address and add icons and Polylines
function getloc(map,addr1,popup_text,flg,icon){
       var geocoder = new GClientGeocoder();
       geocoder.getLocations(addr1, function(response) {
          if (!response || response.Status.code != 200) { alert(“Address not found”); return;}
          place = response.Placemark[0];
          point1.push(new GLatLng((place.Point.coordinates[1]),(place.Point.coordinates[0])));
          point = new GLatLng((place.Point.coordinates[1]),(place.Point.coordinates[0]));
          map.setCenter(point,12);
          var marker = new createMarker(point, popup_text, icon);
          map.addOverlay(marker);
          map.addOverlay(new GPolyline(point1));    
        });
};

//Function to create an Icon
function createIcon(existing_image, theWidth, theHeight) {
        var iconNew = new GIcon();
        iconNew.image = existing_image;
        iconNew.iconSize = new GSize(theWidth,theHeight);
        iconNew.iconAnchor = new GPoint(15, 2);
        iconNew.infoWindowAnchor = new GPoint(14, 15);
        return iconNew;
};

</textarea></p><p> You have to specify the reference of the the uploaded file in the <head> section of your map page as follows:</p><p><textarea cols=”68″ rows=”5″ name=”comments”><script src=”http://maps.google.com/maps?file=api&v=2&key=your_key_here&sensor=false” type=”text/javascript”></script>     <script src=”functions.js” type=”text/javascript”></script> <script type=”text/javascript”>
</textarea></p><p>In ‘map.htm’ page, I have the following code :</p><textarea cols=”68″ rows=”27″ name=”comments”><%@page language=”abap” %>
<%@extension name=”htmlb” prefix=”htmlb” %>
<!DOCTYPE html “-//W3C//DTD XHTML 1.0 Strict//EN”   “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title>Google Maps JavaScript API Example</title>
<script src=”http://maps.google.com/maps?file=api&v=2&key=your_key_here&sensor=false” type=”text/javascript”></script>
     <script src=”functions.js” type=”text/javascript”></script>
<script type=”text/javascript”>
function initialize() {
if (GBrowserIsCompatible())
     {        var map = new GMap2(document.getElementById(“map_canvas”));

map.setUIToDefault();
              var arr_icon = new createIcon(‘<%= lv_plane1%>’, 40, 40);
              var dep_icon = new createIcon(‘<%= lv_plane2%>’, 40, 40);
<%
**********************
Include the Data declaration and logic to retrieve required data from tables
***********************
loop at lt_spfli into ls_spfli.
   lv_dist = ls_spfli-DISTANCE.
              WRITE ls_spfli-ARRTIME to lv_arrtime USING EDIT MASK ‘__:__:__’.
              WRITE ls_spfli-DEPTIME to lv_deptime USING EDIT MASK ‘__:__:__’.
              WRITE ls_spfli-FLTIME to lv_fltime USING EDIT MASK ‘__:__:__’.

              CONCATENATE ‘”‘ ‘<font face=”Arial” size=”-1”><p><b>’
                            ls_spfli-CITYFROM ‘,’ ls_spfli-COUNTRYFR ‘</b>’ ‘<br>’
                           ‘<b>To: </b>’ ls_spfli-CITYTO ‘,’ ls_spfli-COUNTRYTO ‘</b>”<br>’
                          ‘<b>Departure Time: </b>’ lv_deptime ‘<br>’
                          ‘<b>Arrival Time: </b>’ lv_arrtime ‘<br>’
                          ‘<b>Distance: </b>’ lv_dist ls_spfli-DISTID ‘<br>’
                          ‘</p></font>’ ‘”‘
                into lv_html_dep .
              CONCATENATE ‘”‘ ‘<font face=”Arial” size=”-1”><p><b>’
                           ls_spfli-CITYTO ‘,’ ls_spfli-COUNTRYTO ‘</b>’ ‘<br>’
                          ‘<b>From: </b>’ ls_spfli-CITYFROM ‘,’ ls_spfli-COUNTRYFR ‘<br>’
                          ‘<b>Arrival Time: </b>’ lv_arrtime ‘<br>’
                          ‘<b>Departure Time: </b>’ lv_deptime ‘<br>’
                          ‘<b>Distance: </b>’ lv_dist ls_spfli-DISTID ‘<br>’
                          ‘</p></font>’ ‘”‘
                into lv_html_arr .
                concatenate ‘”‘ ls_spfli-CITYFROM ‘, ‘ ls_spfli-COUNTRYFR ‘”‘ into lv_from.
                concatenate ‘”‘ ls_spfli-CITYTO ‘, ‘ ls_spfli-COUNTRYTO ‘”‘ into lv_to.
%>
drawmap(map,<%= lv_from%>, <%= lv_to%>, <%= lv_html_dep%>, <%= lv_html_arr%>, arr_icon, dep_icon );
<%.
endloop.
%>
     }
}
</script>
</head>
<body onload=”initialize()” onunload=”GUnload()”>
<div id=”map_canvas” style=”width: 100%; height: 800px”></div>
</body>
</html>

</textarea><br/><p> </p><p>Here’s how the Application looks on execution :</p><p>!https://weblogs.sdn.sap.com/weblogs/images/251837830/googlemaps1.jpg|height=328|alt=Google Map|width=628|src=https://weblogs.sdn.sap.com/weblogs/images/251837830/googlemaps1.jpg|border=0!</body>

Assigned Tags

      16 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member
      Unfortunately BSP is a UI technology SAP is "not encouraging" to use. See SAP Guidelines for Best Built Applications, p.35 for reference.
      Author's profile photo Former Member
      Former Member
      bsp is similar with bsp and we love it alot,
      it offers a lot of features that WDA can not,
      i hope sap can keep this powerful tool.
      Author's profile photo Former Member
      Former Member
      sorry, i mean bsp is similar with PHP 🙂
      Author's profile photo Former Member
      Former Member
      don't make a PHP fan like myself cry by telling him BSP were anywhere comparable to PHP 😉
      Author's profile photo Guillaume GARCIA
      Guillaume GARCIA
      Hi,

      Although BSP is not the "lead" UI technology, there is not much of a choice in the Web Dynpro field at the moment. As the Google Maps relies on Javascript and since Web Dynpro does not allow embedding of Jabascript, you have to use a more flexible UI and that is BSP even today.
      Some remaks:
      o from what I have read, the v3 version of Google Maps API (http://code.google.com/apis/maps/documentation/v3/) does not require registering API key any longer
      o there is an ActionScript API for Google Maps (http://code.google.com/apis/maps/documentation/flash/) that would let you embed Google Maps in a Flex application, and then embed this Flex app into a Web Dynpro using Flash Islands

      Best regards,
      Guillaume

      Author's profile photo Vasuki S Patki
      Vasuki S Patki
      Blog Post Author
      Hi Guillaume,
         
                   I totally agree with you.I initially started it off in WebDynpro but as you have mentioned WD does not allow embedding of Javascript, I had to dynamically generate the Google API in a file in MIME repository which involved a lot of complexity. That was the reason for using BSP.
      1) Yes, v3 version of Google Maps does not require registering API key. It is designed to work well and load fast on Mobile devices.
      2)Adobe Flash Island is supported within the
      Web Dynpro for ABAP framework in SAP NetWeaver 7.0 EhP1 and not for releases before this.Embedding the  Map using Flash Islands would be the most elegant and efficient way of integration. But if your system is not on the latest Enhancement Package of release 7.0, the common UI technology to go for would be BSP.

      Thanks,
      Vasuki

      Author's profile photo Former Member
      Former Member
      This Adobe Flash Island sample shows you how to use Google Maps in WD:
      http://www.dev-trend.com/main/?p=232
      Author's profile photo Vasuki S Patki
      Vasuki S Patki
      Blog Post Author
      Hi Mogens,
                  Very true. But Adobe Flash Island is supported within the Web Dynpro for ABAP framework in SAP NetWeaver 7.0 EhP1 and upwards.

      Thanks,
      Vasuki

      Author's profile photo Vasuki S Patki
      Vasuki S Patki
      Blog Post Author
      Hi Anton,
               Here the emphasis is mainly on the integration of Google Maps in SAP. I have just provided one approach which can be done using BSP.Using the basic concepts mentioned, it can even be integrated through upcoming/supported technologies which are already documented in various blogs.
      Thanks a lot for the link. 🙂

      Author's profile photo Former Member
      Former Member
      Which is very strange... All CRM 2007 and 7.0 is developed in BSP ?
      Author's profile photo Guillaume GARCIA
      Guillaume GARCIA
      Hi,

      Actually, it is not the "same" BSP. A long time ago, BSP was developped for the WAS ABAP and as such BSP is part of the BC (Basis Components) package (BC-BSP). It is usually this BSP that most developpers refer to.
      But, the CRM development team develop it "internally" and really put BSP on a next level: an 'evolved version of BSP' (from what I have seen, it seems much closer to Web Dynpro but I am no BSP-CRM expert!!).
      Apart from the CRM field, BSP has not changed for many years I think. But its flexibility is greatly appreciated by developers (Google Maps, FLOB, and so on...)
      Naturally, not being an SAP employee, do not hesitate to correct this little explanation!  😉
      Best regards,
      Guillaume

      Author's profile photo Former Member
      Former Member
      Hi Guillaume,

      The underlying BSP app's are still the same (there are no old and new BSP) - but in CRM there is new developer tool available to build you BSP's instead of 'just' using SE80 for BSP development as in the 'good old day'. In CRM you will use the 'component enhancement workbench' to model your application and this tool will then generate the underlying BSP application - and you can even view them in SE80 afterwards - and they will go to /bc/bsp/sap in SICF as all others BSP's. The new tool will help you to streamline the develop in a pure MVC design framework (you could also do this in SE80 - but you had to enforce the MVC design pattern yourself).
      If you look at a CRM component - and follow the superclasses up - you will end with the good old CL_BSP_CONTROLLER2 class. And it's true that the new tool has added some WD concepts (eg. context and contextnodes, but end of the day this is just another phrase for a model in MVC). CRM also offer a config. tool for screen design - so you dont have to write plain HTMLB - but you still can - and is some cases it's still needed. On the extention side a lot has happend - in other to deliver the AJAX look and feel. And you can still use the good old javascripting - which we all now is still needed to complete certain tasks...   

      Author's profile photo Former Member
      Former Member
      Author's profile photo Guillaume GARCIA
      Guillaume GARCIA
      Hi Morgens,

      Thx for correcting me.
      I guess I should have talked about "new features" instead of "new" BSP.  🙂
      Anyway, it is much clearer to me now. What is not is why all this has not been ported to general ABAP BC and stay in the CRM world?

      Best regards,
      Guillaume

      Author's profile photo Former Member
      Former Member
      Hi Guillaume,

      I couldn't agree more - I would also be very happy to see this tool in ABAP WAS in general.

      But maybe it would be competing to much with WD - which is the chosen Web UI by SAP - eventhough BSP is much more flexible.

      Author's profile photo Jim Spath
      Jim Spath
      I linked to this post on the SCN wiki page for mapping and geocoding technologies (language disputes notwithstanding).

      Jim