Saturday, December 8, 2012

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.

Context Attribute NameType
LOCSTRING
ZOOMNUM
URLSTRING


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.


8 comments:

  1. how to add from and to location

    ReplyDelete
    Replies
    1. Check out Google's Documentation of Static Maps regarding this. I hope they don't provide directions feature to static maps. Still there is something called paths.

      https://developers.google.com/maps/documentation/staticmaps/#Paths

      Delete
  2. I'm amazed that you seem to have so few page views - excellent posts, i'm regularly checking your blog (bookmarked).

    ReplyDelete
  3. Thank you so much Vlad :) Due to some time constraints I'm unable to write frequently. But I wish to write a lot and hope it reaches more people :)

    ReplyDelete
  4. Iframe UI element is deprecated and is not to be used.
    http://help.sap.com/saphelp_nw70ehp1/helpdata/en/15/c07941601b1d09e10000000a155106/content.htm

    ReplyDelete
  5. very cool and clearly defined with example. and google maps looks great. Hope it also solves my doubts I have regarding the SAP outline as well. I am still searching numerous SAP videos on Youtube and searching some online courses as well. WizIQ also provides online courses for SAP. Got across this one http://www.wiziq.com/course/8153-sap-web-dynpro-pro-abap-training. Hope I can get to the right platform as well as the ongoing market scenario shows a boost in SAP trainings as well.

    ReplyDelete
  6. Can we set percentages for height & width to the I Frame.

    like 40%/100% of window.

    thanks in advance

    ReplyDelete
  7. Hi Fareez,

    I am looking for exactly same requirement and developed the application as you have explained.

    Problem is when I am running the application in the Internet Explorer, its giving me error for the IFrame content as below:

    " This content cannot be displayed in a frame

    To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame.

    What you can try:
    Open this content in a new window "

    Please help as it is very urgent for me.

    Best Regards,
    Rahul Malani

    ReplyDelete