Community
Application Development and Automation Blog Posts
Learn and share on deeper, cross technology development topics such as integration and connectivity, automation, cloud extensibility, developing at scale, and security.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 


Hello all,

In this blog, I want to show how Google Maps can be displayed in the ABAP screens using the existing CFW utilities available.

There are many other blogs on SDN that talk about displaying Google Maps, but using BSP, WebDynpro, Netweaver. There's actually none (at least I couldn't fine any) that talks about how to integrate these maps in ABAP applications - using ABAP Controls.

If you wonder, why would one require a map display in ABAP Control when it's already possible in Web Dynpro screens?
Well I would say - Why not? Imagine a R/3 report that shows you the list of resources and their tasks planned for today. It would be nice and informative for the user if he could additionally see the actual location of a person on the map. How nice it would be if the map can be displayed in the same screen or an pop-up instead of launching a new web dynpro or BSP application additionally.

Well that's about the requirement, and here is the solution.

We will make use of HTML Viewer control. This is another control just like ALV Grid control or tree control that we use very commonly. This control is capable of displaying HTML pages in SAP screens. There's more to that.. this HTML control is actually as smart as other browsers and it has the capability to run embedded Javascript... Wow.. isn't that cool!

So here's the trick - We will make use of Google APIs (nothing but a set of javascript functions) that can display the map. You can add markers and have text in them as tool tips. You can highlight a route between 2 points on the map and many more things.

 

Step 1: The first step would be to understand the HTML control. The class for that is CL_GUI_HTML_VIEWER. Some important methods of this class that we would be using are : CONSTRUCTOR, SHOW_URL, LOAD_DATA, DO_REFRESH.

You can additionally refer to the sample demo program SAPHTML_DEMO1.

Some more tutorials and example codes to understand the concepts of SAP Control Frameworks are here: Tutorials and Examples.

 

Step 2: Google APIs. Before we start on this, it would be helpful to read the documentation on these links:

Let's take the simplest example and then you can explore more.. Check out the sample map here : Sample Map
Right click on the browser window and display the page source.. It will look something like this:

*************************************************************<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"><br />  <head><br />    <meta http-equiv="content-type" content="text/html; charset=utf-8"/><br />    <title>Google Maps JavaScript API Example: Simple Map</title><br />    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51R...<br />i1QfUnH94QxWIa6N4U6MouMmBA"<br />            type="text/javascript"></script><br />    <script type="text/javascript"><br /><br />    function initialize() {<br />      if (GBrowserIsCompatible()) {<br />        var map = new GMap2(document.getElementById("map_canvas"));<br />        map.setCenter(new GLatLng(37.4419, -122.1419), 13);<br />      }<br />    }<br /><br />    </script><br />  </head><br /><br />  <body onload="initialize()" onunload="GUnload()"><br />    <div id="map_canvas" style="width: 500px; height: 300px"></div><br />  </body><br /></html><br />*************************************************************</p><p>Here you can see how the map is initialized using the Latitude and Longitude information. Now, all we need to do is pass this piece of HTML code to the HTML Viewer control and it would display the map. <br />You can edit the HTML code in an ABAP program, and insert your own Geo coordinates for a location. So if you know the Geo-coordinates of a location, just insert them using variable and your job is almost done.</p><p>In this blog, I am not covering on how to Geo-code the data. I assume that the geographical coordinates are available and here we are discussing on how to display the map. </p><p><u>Step 3</u>: The method LOAD_DATA is capable of showing the output from an internal table. However, for some weird reason it didn't work for me ! So here is the work around...<br />Use GUI_DOWNLOAD and create a temporary file in any of your temporary folders. Then use the method SHOW_URL to show the web page from the local file.</p><p>Lost completely !! So here is the code sample ..  </p>1.* Transaction SE38 - Create a program ZTEST_GOOGLE_MAP_DISPLAY.
2. Create a screen in this program with number 9000.
3. In this screen create a custom control and name it MAP_AREA.
4. In the PBO section, create the objects for custom container and HTML Control.

**    Global Variables.
DATA : lref_container TYPE REF TO cl_gui_custom_container,
lref_html      TYPE REF TO cl_gui_html_viewer.

**    Creating containers.

IF lref_container IS INITIAL.
**  Create a container and then the AlV control.
CREATE OBJECT lref_container
EXPORTING
container_name           = 'MAP_AREA'
EXCEPTIONS
OTHERS                      = 6.
**  Now create HTML Viewer
CREATE OBJECT lref_html
EXPORTING
parent             = lref_container
EXCEPTIONS
OTHERS             = 5.
ENDIF.

5.  Prepare the Internal table with the HTML Code.

DATA : ls_string      TYPE char256,
lt_data    TYPE TABLE OF char256.

**    Populate the Internal table.
ls_string = ''.
INSERT ls_string INTO TABLE lt_data.

ls_string = ''.
INSERT ls_string INTO TABLE lt_data.

....... ** Do it for all the lines in the code
....... ** Here Make sure you populate your Geo codes here..

ls_string = ''.
INSERT ls_string INTO TABLE lt_data.

ls_string = ''.
INSERT ls_string INTO TABLE lt_data.
****************<br />At the end of this, the contents of LT_DATA in debugging should look exactly like an HTML file. It should look as If you wrote the HTML code in a notepad and uploaded the contents of the file into the internal table.<p>***************</p><p>6.*  Download the contents into a temporary file..

**  Here I am using the Front end services to get the SAP Working Directory.
**  Because I want to create the file in this directory..
**  You can hard code it to any directory you want!

CALL METHOD cl_gui_frontend_services=>get_sapgui_workdir
CHANGING
sapworkdir = lv_dir
EXCEPTIONS
OTHERS     = 5.

CALL METHOD cl_gui_frontend_services=>get_file_separator
CHANGING
file_separator = lv_sep
EXCEPTIONS
OTHERS         = 4.

**    Setting the file name.
CONCATENATE : lv_dir 'google_map.html' INTO lv_dir SEPARATED BY lv_sep.

**    Download the contents of LT_TABLE into this file.
CALL FUNCTION 'GUI_DOWNLOAD'
EXPORTING
filename = lv_dir
TABLES
data_tab = lt_table
EXCEPTIONS
OTHERS   = 22.
IF sy-subrc <> 0.
ENDIF.

**  Store the File location - This will be used as URL.
gv_url = lv_dir.

7.  Show the HTML.

CALL METHOD gref_html->show_url
EXPORTING
url                    = gv_url
EXCEPTIONS
OTHERS                 = 5.

**  A Forced Refresh, of you want !
CALL METHOD gref_html->do_refresh.

8. Finally .. calling the screen. In the start of selection of your report call the screen.
CALL SCREEN 9000.

The output of a similar program shown here:

!http://www.abaplearning.com/images/my_Images/google_map_in_sap_screen.jpg|height=1034|alt=Google Map in SAP Screen|width=1122|src=http://www.abaplearning.com/images/my_Images/google_map_in_sap_screen.jpg!

In my further Blogs, I would give more examples to display markers, some code examples.

Stay tuned... :smile: </p>

Comment
10 Comments