Skip to Content

Google Maps library for UI5

There are a number of map providers available to use with UI5, none of them seemed to me to be as simple to use as Google Maps, so I wrote a library.


Getting Started

Goto OpenUI5 Googlemaps Library Github page, download and install the library

Include the library

sap.ui.getCore().loadLibrary("openui5.googlemaps", "../openui5/googlemaps/");

Add a openui5.googlemaps control to your page

<?xml version="1.0" encoding="UTF-8" ?>
<mvc:View xmlns:mvc="sap.ui.core.mvc"
    <gmaps:Map height="250px" zoom="12" lat="-33.895" lng="151.275">
            <gmaps:Marker lat="-33.895" lng="151.275" info="Bondi Beach" />

Its as simple as that.

The openui5.googlemaps library supports Maps, Markers, Polylines and Polygons.

It also has Location detection and the ability to add an API key.

Along with the library there are also a number of sample applications to help get you started.


The library if FOSS, contributions welcome, any issues please report through sapui5  – Stack Overflow


You must be Logged on to comment or reply to a post.
  • Nice work. I always prefer using simple to use components like this instead of coding all the details over and over again just for using a map.

    I wonder how your library compares to webcomponents, e.g. the maps component of Polymer.

    There you use maps in a similar way, e.g.

    <!-- Polyfill Web Components support for older browsers -->
    <script src="components/platform/platform.js"></script>

    <!-- Import element -->

    <link rel="import" href="google-map.html">

    <!-- Use element -->

    <google-map lat="37.790" long="-122.390"></google-map>

    As I understand the webcomponents are HTML standard and in modern browsers already usable while for older browsers you need to add some js libraries.

    So your library would be a specialized alternative to the Google Map webcomponent but without the overhead of all the other stuff in Polymer?

    • Hi Mark

      Interesting comment.

      Web Components are the future!, easy to use custom html tags which abstract the implementation and manages the dependencies, <google-map></google-map> so simple

      They are already been widely used without us noticing, github for example uses them.

      What i really like about Web Components is the interoperability as i understand Mozilla Brick and Google Polymer components play nicely with each other, self contained and loosely coupled.

      I believe Polymer has a Polyfill included so web components can be supported on older browsers,

      I wrote the openui5.googlemaps library before was released at Google I/O 14, when i saw them I was inspired to make the ui5 library easier to use, i stripped back the github page and made a simple "hello world" the focus .

      AngularJS Google Maps Directives was also an influence on the library, if i was to compare the two, I would hope the UI5 library has the ease of Web Components and the flexibility of directives.

      I hope some day i can write a UI5 Web Component which can be consumed by other libraries, I don't think it would take much. IMO to get there instead of introducing polyfils I think they should follow AngualrJS and create a UI5 2.0 tool set which only supports modern browsers.



      • Hey John,

        Great work. Thanks for the inspiring piece.

        Just curious. How long did it take you to develop this library? Any suggestions for someone wanting to write a library?


        • Hi Krishna

          How long did it take?

          The initial release probably 50 - 60 hours after hours over 6 weeks.

          IMO the library is far from complete.

          If i want the library project to be used in Enterprises I need to add Unit and E2E tests and show an acceptable code coverage! also needs documentation, guidelines for pull requests and there are some performance issues and boilerplate code which requires re-factors etc. would estimate at least 100 hours to go before version 1.

          The main drivers for building the library,

          - I got a request with a requirement to use a map control

          - noticed a gap, the other map libraries are IMO very difficult to use

          - I wanted a side project to learn other techniques - Gulpjs, Angularjs directives, Polymer, Github etc

          - I wanted to share something with the community which hopefully would inspire and lift the standard of content being shared

          Suggestions i have

          - find a gap

          - do your research look how other toolsets fill the gap, road test lots of solutions, take away some positives and negatives and feed it back into your design

          - pick something you want to learn and incorporate it, make it fun

          - only release to others when you have a Minimum Acceptable Product, MVP === small set of usable features, MAP = MVP + the things you expect for shared code, linting, formatting, clean build, samples, tests etc



  • Thanks for sharing excellent blog, initially i got an error while the loading the library,but i changed the file "MyTypeid.js" to "MyTypeId.js",Map get started showing on the page 🙂  

    • Balaji

      Thanks for pointing that out.

      Initially the file name was MyTypeid.js I changed it to MyTypeId.js when i noticed there was an issue when testing on Linux/Unix.

      It seems Github was keeping copies of both MyTypeid.js & MyTypeId.js and when i checked out the code Windows chose  MyTypeid.js without me knowing.

      Just noticed that the zip file had both files.

      Hopefully deleted that id.js for good and all is fixed now.



    • Hi Shambhu

      Providing documentation is on a long list of things to do.

      If more people request it i will make it more of a priority, else happy for you or others to fork.



      • Really nice. At least small howto on using your samples is highly desirable .Extra plus = short explanation on how it works (as dj adams did about his ui5 stuff  😉 )))

  • Hi John,

    Great work. I have a question here. I have created a master & detail page and would like to use your library to show the map in the detail page.  I am trying to use the different model name, mainModel but it does not work (the google map will not be displayed). Any advise?

    sap.ui.getCore().setModel(oModel, "mainModel");

      oModel1 = sap.ui.getCore().getModel("mainModel");

      var oContext = oModel1.getContext('/places/0/');

    var oMarkers = new openui5.googlemaps.Marker({

         lat: '{lat}',

         lng: '{lng}',

         info: '{name}',

         icon: '{}',

         animation: 0,

         draggable: true,

         dragEnd: onMarkerDragEnd


      var oMap = new openui5.googlemaps.Map("map1", {

         lat: '{lat}',

         lng: '{lng}',

         zoom: 12,

         width: '600px',

         height: '400px',

         layoutData: new sap.ui.layout.GridData({

             span: "L8 M12 S12"


         markers: {

             path: "/places",

             template: oMarkers,



      var oLayout1 = new sap.ui.layout.form.ResponsiveGridLayout();

      var oForm1 = new sap.ui.layout.form.Form({

         title: new sap.ui.core.Title({

             text: "Sample Map Search",


         layout: oLayout1,

         formContainers: [new sap.ui.layout.form.FormContainer({

             formElements: [

                 new sap.ui.layout.form.FormElement({

                     label: new sap.ui.commons.Label({

                         text: "Query Address"


                     fields: [new sap.ui.commons.AutoComplete('auto',{

                             //change: onChange,

                             layoutData: new sap.ui.layout.GridData({

                                 span: "L3 M6 S12"


                             //suggest: onSuggest


                         new sap.ui.commons.Button({

                             text: 'My Location',

                             //press: onMyLocation,

                             layoutData: new sap.ui.layout.GridData({

                                 span: "L1 M6 S12"





                 new sap.ui.layout.form.FormElement({

                     label: new sap.ui.commons.Label({

                         text: "Longitude / Latitude",


                     fields: [new sap.ui.commons.TextField({

                             value: "{lat}",

                             layoutData: new sap.ui.layout.GridData({

                                 span: "L2 M4 S8"



                         new sap.ui.commons.TextField({

                             value: "{lng}",

                             layoutData: new sap.ui.layout.GridData({

                                 span: "L2 M4 S8"





                 new sap.ui.layout.form.FormElement({

                     fields: [oMap]



         }), ]





    • Hi Ferry


      First piece of advice - forums are for questions.

      To save you the time of writing a question, which is btw unrelated to the library.

      You are using a named model "mainModel" when you use a named model you have to prefix the path with the model name


      var oMarkers = new openui5.googlemaps.Marker({

           lat: '{mainModel>lat}',

           lng: '{mainModel>lng}',



      if it doesn't solve your issue, create a jsbin and ask Q on Stackoverflow

  • hi John,

    just one additional remark:

    we at SAP have also an alternative: SAP Visual Business provides a UI5 map control.

    This control can be configured to work with most map providers without changing the application. But it is not available in the OpenUI5 library.

    We developed this as an SAP standard because not all map vendors provide globally a high qualtity. Most provider work more or less in a specific region.
    SAP customers may have already licensed a map provider and don't want to switch to another one because the SAP application uses only this one. On the other side we at SAP can't change hundrets of applications if a map provider withdraws the contracts and the applications have to run on a different provider.
    These are some arguments why we developed Visual Business.

    We have also a SCN space:


    • Hi Ralph

      I know the SAPUI5 Visual Business library well, it has a lot more features than openui5.googlemaps and from what i saw it supports ESRI, Navteq, Google and more as map providers.

      It would be good if someone could write a blog in this space showing how and when you would use it

      For those interested you can find some examples in the SAPUI5 SDK on premise library at


      Doesn't work on the externally hosted SAPUI5 SDK sites, i tried



  • Hello John, thanks for this great tool.

    But I have one question, what's the difference between using Google Maps Library for UI5 and using Google Maps API?

    I mean if I want to develop something, is it more convenient by using Google Maps Library for UI5 rather than Google Maps API? Or is Google Maps Library for UI5 more powerful?

    Thanks in advance and best regards.

  • Looks really good John, I'm going to try it out now and also investigate how you built it. Was wondering if you ever came across Leaflet.js.  It's pretty neat and relatively lightweight and supports a variety of map providers. Notably openstreetmap and Esri (via plugin).  Also has heaps of plugins to extend functionality like geocoding, drawing and routing.  I've used it quite a bit (not in UI5) and found it easy to use, even for a novice like me. The main reason I chose it was because I did not want to be locked into one specific vendor. 

  • Hi John,

    try to draw ploygon , it shows error on the console,"Cannot read property 'forEach' of undefined"

    is there is any issue with polygon.js? do you have code snippet <gmaps:Polygon path=""/>



  • Hi John,

    Are you running this example in Eclipse? Im running this example out on River RDE and Im getting this error msg

    Uncaught Error: failed to load 'openui5/googlemaps/Map.js' from resources/openui5/googlemaps/Map.js: 404 - Not Found.

    Can you please advise.

    Thanks ,


  • Hi John,

    Very nice and useful library. I just installed it and it works fine.

    Quick question: When it is working fine in a normal view, it doesn't inside of a iconTabFilter element. Any idea why?



    • Hi,

      I have found why ... but no how correct ...

      It's due to variables using to initialize the map and the marker.

      Bellow, the code doesn't work. (And the marker move with the map, when the map is dragged).

              var latitude = "{/BrocanteCollection/0/Latitude}";

              var longitude = "{/BrocanteCollection/0/Longitude}";    

               var latitude2 = "{/BrocanteCollection/0/Latitude}";

               var longitude2 = "{/BrocanteCollection/0/Longitude}";

              var gmap = new openui5.googlemaps.Map({

                  lng: longitude, lat: latitude,

                  zoom: 11, zoomControl: true,

                  height: "300px",  width: "500px",

                  center: {lat: latitude, lng: longitude},

                  //mapTypeControl: true,   });

               var mark = new openui5.googlemaps.Marker({lat: latitude2, lng: longitude2});


      If I put the latitude and longitude in hard coded as bellow, it works and the marker is fixed :

              var latitude = 49.89;

              var longitude = 2.28;

      I don't understand why, variables seens to be the same ...

      • Hi Jonathan,

        I facing the same issue of marker moving with the map  I have set the marker property draggable : true but still doesnt make a difference as you have explained above, the hardcoding  seems to work. Did you get a fix for the above problem ?

        Thanks, please let me know.

  • Great Work. In my eclipse everything works fine but it will not work in WebIDE. One Point is that within the WebIDE he expect https instead of http. Have anybody this working within a Fiori Launchpad or the WebIDE?

    Thank you

  • Hi,

    can somebody please write a little howto how I can include the library or what I must do? I copied the openui5 folder to my resources folder. But the command

    sap.ui.getCore().loadLibrary("openui5.googlemaps", "../resources/openui5/googlemaps/");

    isn´t working. Has somebody an idea what is missing?


  • This library is awesome and helped me get introduced to SAPUI5 since I am always looking for examples of folks who are using and integrating geo into business apps.

    If anyone is using this library and needs help with Google Maps licensing and compliance, drop me a line.

    I have helped several customers make sure they are deploying code is within Google TOS. For this library, you simply need to update the key. Also, Google is now requiring you to register all Google Maps Apps with a key.

    Ultimately we built a cloud Google Maps designer which exports as a SAPUI5 component but it does include the proper enterprise Google Maps license. Due to "advertising" policies I can't share the link, but if you look for CMaps and SAPUI5 it is impossible to miss on Google 🙂

    • Hello Ryan,

      I am looking for options to select relevant path given by google map .I want to integrate that feature in the application can you guide me for that?

      I have attached image.While selecting source to destination address it displays various options to select particular path to reach destination.I want to add that feature in my application,any help will be grateful.

      Thank you.path.PNG

    • this is a blog post, not a forum

      even then on a forum I would follow the appropriate etiquette and explain to people what you have done where you are stuck, rather than asking for consulting advice



  • Thanks John,

    It’s excellent library & blog it's really helpful.

    Quick question: how can i get the key of marker in click event thx

  • Hi John,

    Thank you for the library, very useful.

    I have a requirement to show some information on the info dialog that shows up after clicking a marker, the information has to have some formatting like bold text and new lines, my question is how do I change the content of the info attribute in the tag <gmaps:Marker info=”” /> so that i could show more information?

    Thank you.

  • Getting error message google not defined


    sap.ui.define([sap.ui.define([ "sap/ui/core/mvc/Controller"], function(Controller,MapsApi) { "use strict";
    return Controller.extend("openui5myMap.controller.App", { onInit: function() { // var myRootPath ="openui5myMap"); // sap.ui.getCore().loadLibrary("openui5.googlemaps", [myRootPath, "openui5/googlemaps/"].join("/")); sap.ui.getCore().loadLibrary("openui5.googlemaps", "openui5myMap/openui5/googlemaps/"); }, onAfterRendering: function() { if (!this.initialized) { this.initialized = true; var mapOptions = { center: Geomaps.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; = new google.maps.Map(this.getView().byId("map_canvas").getDomRef(), mapOptions); } }, actSearch: function() { var map = new google.maps.Map(this.getView().byId("idMap"), { zoom: 8, center: { lat: -34.397, lng: 150.644 } }); var geocoder = new google.maps.Geocoder(); var address = this.getView().byId("inpSearch").getValue(); geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert('Geocode was not successful for the following reason: ' + status); } }); } });});


    Uncaught ReferenceError: Geomaps is not defined
    at f.onAfterRendering (App.controller.js?eval:16)
    at f.a.fireEvent (EventProvider-dbg.js:229)
    at f.a.fireEvent (Element-dbg.js:427)
    at f.fireAfterRendering (ManagedObjectMetadata-dbg.js:426)
    at f.c.onAfterRendering (eval at evalModuleStr (, <anonymous>:924:46)
    at f.a._handleEvent (Element-dbg.js:162)
    at x (RenderManager-dbg.js:518)
    at y (RenderManager-dbg.js:563)
    at R.render (RenderManager-dbg.js:679)
    at constructor.U.rerender (UIArea-dbg.js:564)

  • Hi John,

    Which is better option between Geo map and analytical map in SAP UI5 if i want to display data in Map like BarChart and values after selecting region.Is any licence is required to implement google map in SAP?



    Thanks, Please let me know.

  • Hi John,

    First of all very good tool !!

    But 😀 I'm facing one issue regarding the use of it :

    1 - I want to use the Direction in an XML view like you did in the demo directionstestwaypointsview.html

    but is not working could you please let us know if something missing?

    2 - I want to use lat and lng for waypoints and location attribute like the example



    I try to change it on the demo directionstestwaypoints.html but not working could you please let me know why?

    Thanks and regards

  • Hello John,

    Thank you for all you time on building this tutorial and the Google Maps UI5 project.

    I'm trying to use it on a UI5 app I'm building using WebIDE on SCP. The final app will be used on SCP Fiori Launchpad.
    I've tried a couple of ways of using the "openui5.googlemaps" namespace but when I run the application is always saying it's not possible to find it (404).

    I've tried the same way as this small guide explains how to do for SCP deployment but still not successful.

    Can you please help me?

    Thank you!


      • Hi I’m facing the same problem :

        when on web-ide the application works, but after deployment to fiori launchpad, I’ve got the same message openui5.googlemaps not found 404.

        to add data :

        when deploying : component openui5.googlemaps used in the app is not found.

        after deployment, in fiori launchpad error is displayed. 

        here is what I use to make a link with openui5 library :

        in component.js :

                    //load googlemaps library
                    sap.ui.getCore().loadLibrary("openui5.googlemaps", "/openui5/googlemaps/");


        in manifest.json :

        		"resourceRoots": {
        			"openui5": "openui5"

        again in manifest.json in dependencies :

        			"libs": {
        				"sap.m": {},
        				"sap.ui.core": {},
        				"sap.ui.layout": {},
        				"openui5.googlemaps": {}

        openui5 library is directly in webapp directory.

        is there something  missing ?

        EDIT 2019/11/05 : I found a solution after a lot of testing and think I may share it there. 

        in component.js :

        			//load googlemaps library

        in manifest.json :

        		"resourceRoots": {
        			"openui5.googlemaps": "./openui5/googlemaps"

        that's all which is needed for the library to work

  • Hi John,

    I'm just a beginner in SAPUI5 and i was trying to include the library which you have mentioned but i was not able to include the library into my code. And where exactly do i have to include the library.

    Please can you guide me so as what has to be done.