Skip to Content

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.

/wp-content/uploads/2014/07/map1_487602.png

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"
    xmlns:gmaps="openui5.googlemaps"
    controllerName="sampleController">
    <gmaps:Map height="250px" zoom="12" lat="-33.895" lng="151.275">
        <gmaps:markers>
            <gmaps:Marker lat="-33.895" lng="151.275" info="Bondi Beach" />
        </gmaps:markers>
    </gmaps:Map>
</mvc:View>


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.

/wp-content/uploads/2014/07/map2_487619.png

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

Enjoy

To report this post you need to login first.

67 Comments

You must be Logged on to comment or reply to a post.

  1. Mark Teichmann

    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?

    (0) 
    1. John Patterson Post author

      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 http://polymerlabs.github.io/google-map/components/google-map/ 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.

      cheers

      JSP

      (0) 
      1. Krishna Kishor Kammaje

        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?

        Krishna

        (0) 
        1. John Patterson Post author

          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

          hth

          jsp

          (0) 
  2. balaji bodagala

    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 πŸ™‚  

    (0) 
    1. John Patterson Post author

      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.

      Cheers

      jsp

      (0) 
    1. John Patterson Post author

      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.

      Cheers

      jsp

      (0) 
      1. Alex Romashko

        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  πŸ˜‰ )))

        (0) 
    1. John Patterson Post author

      Hi Nan

      FYI – as i read it Google Maps aren’t blocked, just most of the services that are used to generate them are

      For example on GreatFire.org i can see that the following will work today

      http://maps.googleapis.com/maps/api/js?v=3.12&client=&sensor=true&hl=en

      maps.googleapis.com/maps/api/js?v=3.12&amp;amp;amp;client=&amp;amp;amp;… in China | GreatFire.org

      If you want to get the library working you could try changing the default API and parameters

      You can change the default API in the library quite easily

      // load googlemaps library

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

      //set API params

      var params = {

          url : ‘http://maps.googleapis.com/maps/api/js‘,

          sensor : true,

          v:’3.exp’,

          libraries : ‘places’

      };

      openui5.googlemaps.ScriptsUtil.setParams(params);

      if that doesn’t work change loadScripts.js directly and add a url that works

      let me know how you get on

      hth

      jsp

      (0) 
  3. Ferry Gunawan

    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: ‘{http://www.w3schools.com/googleapi/pinkball.png}’,

         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]

                 }),

             ]

         }), ]

      });

      oForm1.placeAt(‘content’);

      oForm1.setBindingContext(oContext);

    Thanks

    (0) 
    1. John Patterson Post author

      Hi Ferry

      Thanks

      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

      eg.

      var oMarkers = new openui5.googlemaps.Marker({

           lat: ‘{mainModel>lat}’,

           lng: ‘{mainModel>lng}’,

      hth

      jsp

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

      (0) 
  4. Ralf Rath

    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: http://scn.sap.com/community/visual-business/

    Thanks

    (0) 
    1. John Patterson Post author

      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

      http://<myserver>:<port>/<sapui5sdk>/test-resources/sap/ui/vbm/

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

      Cheers

      JSP

      (0) 
  5. Ziyi Jiang

    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.

    (0) 
  6. Katan Patel

    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. 

    (0) 
  7. balaji bodagala

    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=””/>

    Regards,

    Balaji

    (0) 
  8. Vidya Goruganthu

    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 ,

    Vidya

    (0) 
  9. Benoit Larochelle

    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?

    Thanks,

    Benoit

    (0) 
    1. Gricourt Jonathan

      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});

               gmap.addMarker(mark);

      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 …

      (0) 
      1. Sanket Taur

        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.

        (0) 
  10. Simon Ludwigs

    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

    (0) 
      1. Simon Ludwigs

        Thank you! Next error is than TypeError: a is undefined in Line 27,304 of https://maps.google.com/maps/api/js?sensor=true&callback=google.maps.callBack

        return a.call

        In the view I just call the example:

        <gmaps:Map height="250px" zoom="12" lat="-33.895" lng="151.275">
           <gmaps:markers>
           <gmaps:Marker lat="-33.895" lng="151.275" info="Bondi Beach" />
           </gmaps:markers>
           </gmaps:Map>


        Also without the marker no success. Any idea?


        Edit: SOLVED! You need to add v=3 to the default url

        http://stackoverflow.com/questions/32691295/google-maps-api-typeerror-a-is-undefined

        (0) 
      1. Venkatesh Machineni

        Hi Jonathan,

        Could you please elaborate it. You mean extract the downloaded zip file to eclipse root folder (same level as eclipse.exe file path) and then add that folder to Libraries in Configure build path?Right?

        (0) 
  11. Maximilian Seubert

    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?


    Thanks!

    (0) 
  12. Ryan Goodman

    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 πŸ™‚

    (0) 
    1. Dularkumar Jitendrakumar Sharma

      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

      (0) 
    1. John Patterson Post author

      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

      Cheers

      JSP

      (0) 
  13. anas ameur

    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

    (0) 
  14. yasser aoujil

    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.

    (0) 
  15. jagtar singh

    Getting error message google not defined

    App.controller.js

    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 = jQuery.sap.getModulePath(“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 }; this.map = 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 (jquery.sap.global-dbg.js:3395), <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)

    (0) 

Leave a Reply