Skip to Content
Author's profile photo John Patterson

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.

/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

Assigned Tags

      75 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Wow!!

      Really good job! I'll try to use it!

      Thanks for sharing!

      Author's profile photo Former Member
      Former Member

      Very useful information

      Thanks for sharing !!

      Author's profile photo DJ Adams
      DJ Adams

      Nice work JSP. Understated and great as usual.

      Author's profile photo John Patterson
      John Patterson
      Blog Post Author

      cheers mate

      the apps were built with SublimeUI5, too easy

      Author's profile photo Former Member
      Former Member

      Thanks for sharing.

      It´s exactly what I needed.

      Author's profile photo John Patterson
      John Patterson
      Blog Post Author

      cool, let me know if you find an issues

      jsp

      Author's profile photo Mark Teichmann
      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?

      Author's profile photo John Patterson
      John Patterson
      Blog 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

      Author's profile photo Hemendra Sabharwal
      Hemendra Sabharwal

      Thanks JSP for sharing, nice work... I will consume it.

      Warm Regards

      Hemendra

      Author's profile photo Basar Ozgur Kahraman
      Basar Ozgur Kahraman

      Hi John,

      Nice work! Thanks for sharing..

      Author's profile photo Paul Aschmann
      Paul Aschmann

      This is a great addition to the OpenUI5 toolset - thanks John!

      Author's profile photo John Patterson
      John Patterson
      Blog Post Author

      cheers Paul

      Author's profile photo Jan Penninkhof
      Jan Penninkhof

      Thanks for this excellent blog and library.

      Absolutely deserves to be on the home page!

      Cheers,

      Jan

      Author's profile photo John Patterson
      John Patterson
      Blog Post Author

      Cool, first time for me to get content on the home page

      Author's profile photo Krishna Kishor Kammaje
      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

      Author's profile photo John Patterson
      John Patterson
      Blog 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

      Author's profile photo balaji bodagala
      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 🙂  

      Author's profile photo John Patterson
      John Patterson
      Blog 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

      Author's profile photo Former Member
      Former Member

      Cool  I could use this!

      Author's profile photo Former Member
      Former Member

      Thanks John,

      It's excellent library & blog.

      Can you share you some documents.

      Thanks,

      Shambhu Nath

      Author's profile photo John Patterson
      John Patterson
      Blog 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

      Author's profile photo Former Member
      Former Member

      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  😉 )))

      Author's profile photo Shweta Sahay
      Shweta Sahay

      Good one!!!

      Author's profile photo Former Member
      Former Member

      Thanks very much John, it is short , crisp and powerful. Looking forward to more of this kind. 🙂

      Regards,

      DR

      Author's profile photo John Patterson
      John Patterson
      Blog Post Author

      me too, hopefully it inspires others to build their own libraries and share them

      jsp

      Author's profile photo Hyung Jin Youn
      Hyung Jin Youn

      Hi John,

      Nice work ! It's good to see you always challenge something new ..

      Cheers!

      Jin

      Author's profile photo John Patterson
      John Patterson
      Blog Post Author

      cheers Jin

      Author's profile photo Nan Wang
      Nan Wang

      good lib. but google map doesn't work in China. 🙁

      Author's profile photo John Patterson
      John Patterson
      Blog 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

      Author's profile photo Nan Wang
      Nan Wang

      hi john

      I will test it in china 🙂 . I will back soon and update you.

      Thanks

      Author's profile photo Nan Wang
      Nan Wang

      Hi John

      tested your url just now. It was blocked 🙁 . Maybe we need a lib based on the Baidu Map. 🙂

      Author's profile photo Ferry Gunawan
      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

      Author's profile photo John Patterson
      John Patterson
      Blog 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

      Author's profile photo Former Member
      Former Member

      Hi John,

      Nice work, intuitive and easy to use.

      Author's profile photo Sandeep Joseph
      Sandeep Joseph

      Great Work, John.

      Author's profile photo Former Member
      Former Member

      Good Work, John.

      Thanks

      Author's profile photo Ralf Rath
      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

      Author's profile photo John Patterson
      John Patterson
      Blog 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

      Author's profile photo Former Member
      Former Member

      Hi Guys,

      Can we use this library for Design Studio ?

      Thanks and best regards.

      Fahad

      Author's profile photo Ziyi Jiang
      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.

      Author's profile photo Katan Patel
      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. 

      Author's profile photo Kimmo Jokinen
      Kimmo Jokinen

      Hi Katan,

      I've integrated leaflet.js with UI5. See example. There's also blog posts about it if you're interested:

      SAPUI5 Choropleth Map Control with Live Example - Part 1

      UI5 Choropleth Map Control with Live Examples - Part 2

      Regards,

      Kimmo

      Author's profile photo balaji bodagala
      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Dhivya C
      Dhivya C

      Hi John,

      Really a great stuff, more inspired with this useful library.

      Thanks,

      Dhivya

      Author's profile photo Former Member
      Former Member

      Hi John,

      Really good job !

      I tried to use it, but in my test, my marker moves when I drag the map.

      On your exemple : http://jasper07.secondphase.com.au/openui5-googlemaps/
      The marker doesn't move.

      But in this exemple : http://jasper07.secondphase.com.au/openui5-googlemaps/samples/search.html

      You have the same problem of me : the market position change.

      How can i resolve this problem ?

      PS : I used javascript view.

      Thanks,

      Jonathan

      Author's profile photo John Patterson
      John Patterson
      Blog Post Author

      Hi Jonathan

      You need to set the Marker property

      draggable: true

      jsp

      Author's profile photo Former Member
      Former Member

      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 ...

      Author's profile photo Sanket Taur
      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.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Jan Penninkhof
      Jan Penninkhof

      Carrying out the patch proposed in https problem · Issue #1 · jasper07/openui5-googlemaps · GitHub will solve that.

      Good luck!

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Venkatesh Machineni
      Venkatesh Machineni

      Hi John,

      Nice article.

      I have downloaded the above maps from Github and Could you please tell me the procedure to install it?
      Thanks in Advance.

      Author's profile photo Former Member
      Former Member

      Just extract on your eclipse directory, add the library reference on your project preference, and then follow this topic to use it.

      Author's profile photo Venkatesh Machineni
      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?

      Author's profile photo Former Member
      Former Member

      Hi Machineni,

      did you get it? When yes, how 😉 ?

      Author's profile photo Venkatesh Machineni
      Venkatesh Machineni

      Hi Maximilian Seubert ,

      I did not get it clearly!

      Author's profile photo Former Member
      Former Member

      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!

      Author's profile photo Former Member
      Former Member

      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 🙂

      Author's profile photo Dularkumar Sharma
      Dularkumar 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

      Author's profile photo Former Member
      Former Member

      Hi Dular,

      Did you get any solution for the above point ?

      Can anyone please help to implement the same ?

      Thanks and Regards.
      Hirak

      Author's profile photo Dularkumar Jitendrakumar Sharma
      Dularkumar Jitendrakumar Sharma

      No Hirak,I did not received any help.

      Author's profile photo John Patterson
      John Patterson
      Blog 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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo yasser aoujil
      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.

      Author's profile photo jagtar singh
      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)

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo jonathan collin
      jonathan collin

      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

      below https://stackoverflow.com/questions/12712013/using-longitude-latitude-as-waypoint

       

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

      Thanks and regards

      Author's profile photo Vicente Veiga
      Vicente Veiga

      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!

      Regards,
      Vicente

      Author's profile photo Goga Didebashvili
      Goga Didebashvili

      Hello, did you find solution ???

      Author's profile photo Jean-François Parmentier
      Jean-François Parmentier

      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
      			sap.ui.getCore().loadLibrary("openui5.googlemaps");

      in manifest.json :

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

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

      Author's profile photo Former Member
      Former Member

      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.

      Thanks

      Author's profile photo Mohnish Israni
      Mohnish Israni

      Hi John,

       

      If I consume this library in my Fiori app and use it in my organization would I have any legal implication?

      Thanks,

      M.

      Author's profile photo rezig ibtissem
      rezig ibtissem

      Really helpfull thank you