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"
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.
The library if FOSS, contributions welcome, any issues please report through sapui5 – Stack Overflow
Enjoy
Wow!!
Really good job! I'll try to use it!
Thanks for sharing!
Very useful information
Thanks for sharing !!
Nice work JSP. Understated and great as usual.
cheers mate
the apps were built with SublimeUI5, too easy
Thanks for sharing.
It´s exactly what I needed.
cool, let me know if you find an issues
jsp
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 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
Thanks JSP for sharing, nice work... I will consume it.
Warm Regards
Hemendra
Hi John,
Nice work! Thanks for sharing..
This is a great addition to the OpenUI5 toolset - thanks John!
cheers Paul
Thanks for this excellent blog and library.
Absolutely deserves to be on the home page!
Cheers,
Jan
Cool, first time for me to get content on the home page
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
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
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.
Cheers
jsp
Cool I could use this!
Thanks John,
It's excellent library & blog.
Can you share you some documents.
Thanks,
Shambhu Nath
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
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 😉 )))
Good one!!!
Thanks very much John, it is short , crisp and powerful. Looking forward to more of this kind. 🙂
Regards,
DR
me too, hopefully it inspires others to build their own libraries and share them
jsp
Hi John,
Nice work ! It's good to see you always challenge something new ..
Cheers!
Jin
cheers Jin
good lib. but google map doesn't work in China. 🙁
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;client=&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
hi john
I will test it in china 🙂 . I will back soon and update you.
Thanks
Hi John
tested your url just now. It was blocked 🙁 . Maybe we need a lib based on the Baidu Map. 🙂
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?
Thanks
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
Hi John,
Nice work, intuitive and easy to use.
Great Work, John.
Good Work, John.
Thanks
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
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
Hi Guys,
Can we use this library for Design Studio ?
Thanks and best regards.
Fahad
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 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
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
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
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
Hi John,
Really a great stuff, more inspired with this useful library.
Thanks,
Dhivya
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
Hi Jonathan
You need to set the Marker property
draggable: true
jsp
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 ...
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
Carrying out the patch proposed in https problem · Issue #1 · jasper07/openui5-googlemaps · GitHub will solve that.
Good luck!
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
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.
Just extract on your eclipse directory, add the library reference on your project preference, and then follow this topic to use it.
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?
Hi Machineni,
did you get it? When yes, how 😉 ?
Hi Maximilian Seubert ,
I did not get it clearly!
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!
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.
Hi Dular,
Did you get any solution for the above point ?
Can anyone please help to implement the same ?
Thanks and Regards.
Hirak
No Hirak,I did not received any help.
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
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
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)
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
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
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
Hello, did you find solution ???
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 :
in manifest.json :
again in manifest.json in dependencies :
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 :
in manifest.json :
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.
Thanks
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.
Really helpfull thank you