Google Maps in Web Dynpro ABAP

Google Maps integration with Web Dynpro ABAP is one of the most sought out thing. There are a lot of possible ways to this. Google is providing many ways to access map data and we are going to use static maps for this tutorial.

Google Static Maps API returns an image of the map when we call its URL with our own parameters which describe the location and properties of the map (For exact information see here). Recent NetWeaver versions have many ways to bring Google Maps but here we consider doing this in a NetWeaver 7.00 system with IFrame. Let’s jump to the tutorial.

Now we are going to create a simple Google Maps Client using Web Dynpro ABAP. Here we can search for any place and zoom in & out the map.

Create a new component and create the following context node attributes under the root node of the MAIN view.

Set the default value of ZOOM to 13 which is the optimal zoom for Google Maps.

Now design the layout with an Input Field for search text, a search button, two buttons for zoom in & out, an IFrame for the map, and a text view at the bottom to see the URL we pass to IFrame (this helps in debugging, we can make sure whether the URL we construct is valid) as shown below. MatrixLayout is used here. Create the elements with your own preferred sizes.

Bind the context attribute LOC to Search text input field and bind the URL to both Source property of the IFRAME and Text property of the TEXTVIEW.

Now create a method named UPDATE_MAP with the following code.

method UPDATE_MAP .

  data:
        url type string,
        loc type string,
        zoom(2) type n,
        base_url type string
        value 'http://maps.googleapis.com/maps/api/staticmap?size=580x380&sensor=false&center='.

        wd_context->get_attribute( 
             exporting name = 'LOC' 
             importing value = loc ).
        wd_context->get_attribute( 
             exporting name = 'ZOOM'
             importing value = zoom ).

        concatenate base_url loc '&zoom=' zoom into url.

        wd_context->set_attribute( 
             exporting name = 'URL' value = url ).

endmethod.

The above code constructs the URL with the given location, zoom level and size and updates it to the URL context attribute which will reflect in refreshing the IFrame.

Create an action for the search button and add the following code.

method ONACTIONSEARCH_MAP .

  wd_this->update_map( ).

endmethod.

Now for zoom in and zoom out buttons add the corresponding code from the below code.

method ONACTIONZOOM_IN .

  data zoom type i.

  wd_context->get_attribute( 
         exporting name = 'ZOOM' 
         importing value = zoom ).
  add 1 to zoom.
  wd_context->set_attribute( 
         exporting name = 'ZOOM' 
                   value = zoom ).

  wd_this->update_map( ).

endmethod.

method ONACTIONZOOM_OUT .

  data zoom type i.

  wd_context->get_attribute( 
               exporting name = 'ZOOM' 
               importing value = zoom ).
  subtract 1 from zoom.
  wd_context->set_attribute( 
               exporting name = 'ZOOM' 
                         value = zoom ).
  wd_this->update_map( ).

endmethod.

And the output would look like this.