Skip to Content
Author's profile photo Ruben Hernan Mircin Ramirez

SAPUI5 + Google Maps + Lima

Introduction –

When I first heard that SAP was building a web development toolkit it really made me curious, but when I read that the SAPUI5 toolkit was going opensource I inmediately knew that it was the perfect time to swim into the HTML5 + Javascript world. In my current blog, I will share my first attempt of SAPUI5 powered web application, inspired on the main activities that can be done in the city i live in: Lima.

There are two main blog posts that I found extremely useful while learning/developing:

Building SAP Fiori-like UIs with SAPUI5

SAPUI5 with Google Maps


Description –

The app consists on two main Views:

                         The main List                  |                                                   and the Detail

Main.png

An this is the Map within the Icon Tab Bar

/wp-content/uploads/2014/05/img_461372.png

You can find my source code on the following Github repository: rhmircin/LimaEsLinda · GitHub

There are some bugs and performance issues I’m struggling with, so feel free to fork, clone etc. Any idea, comment or suggestion is welcome.

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Virinchy P
      Virinchy P

      Hi Ruben,

      You made a very good attempt and this looks impressive.

      Is this web application hosted somewhere ?

      Author's profile photo Ruben Hernan Mircin Ramirez
      Ruben Hernan Mircin Ramirez
      Blog Post Author

      Hi Viru,

      Thanks, it is hosted on a free server: Lima es Linda , but it is slow.


      Regards.

      Author's profile photo Former Member
      Former Member

      Great job! Now I am trying to connect this to an odata service from SAP but with no luck. Have you tried that?

      Author's profile photo Ruben Hernan Mircin Ramirez
      Ruben Hernan Mircin Ramirez
      Blog Post Author

      Thanks Amina,

      No, I haven't but i think this might help:

      OData Service.png

      This would go on the Component.js file, replacing the JSON file data model (mock.json).

      At this moment I don't have access to a SAP Netweaver Gateway instance, so I couldn't give it a try. Please let me know if it works.

      Best regards!.

      Author's profile photo Former Member
      Former Member

      Hello Ruben,

      Thanks a lot for a wonderful working application.

      However, when i implemented the same,I observed 1 thing and also visible in your application that, when on the Details view, you see 3 IconTabFilters on IconTabBar which also contains 'Map'.

      If i click on the 'Maps' ,the google map is not loaded but then when i go to other tabs and come back to the 'Maps' then google map is visible.

      So initially the map is not loaded but It is visible only when you come back to the tab again.

      Did you also face the same issue ? Really appreciate your advice here.

      Thanks in advance

      BR

      Nilesh