1

I'm having trouble determining the best way to import a third party library such as the Google Maps JavaScript API into a UI5 application. I have considered the following methods so far:

  • Using a <script> tag in index.html, such as
    <script src="https://maps.googleapis.com/maps/api/js?key=api_key"></script>
    This works when testing locally but as mentioned in this SAP blog post, an app that is launched from the SAP Fiori Launchpad launches via the Component.js, not the index.html
  • That same blog post mentions importing a library via sap.ui.define, which is in fact what I'm doing with moment.js already in the application, which works. The problem is that the Google Maps API does not expose a global instance name / does not consist of a single JS file which can be imported, and thus this import fails. A similar question was asked in June last year but did not get answered.
  • A comment on that same question mentions using require.js to import the Google Maps API. This will likely work but seems like a hack. It feels like there should be some UI5-specific way to do this without having to import yet another third-party library.
  • Finally, this SAP blog post suggests manually creating and appending the Google Maps import <script> tag into the DOM once the window has loaded. This also seems like a hack but might be the only way to achieve this for the time being.

Any help determining the correct method of achieving this would be appreciated!

2
  • What is the use case of Google Maps in your application in the first place? In case of displaying a certain location, calculating optimal routes, or performing search, just opening Google Maps via specific URL parameters might be sufficient which doesn't even require an API key. Jan 18, 2018 at 10:24
  • I need to integrate a map into one of the views with custom markers based on user location. I only need the map and marker functionality but it needs to be within the actual UI5 app, not open an external link to Google Maps. Jan 18, 2018 at 11:06

3 Answers 3

2

Well, I would do it like this:

  1. Create custom control for map (better from sap.ui.core.HTML);
  2. In init method of this control, load GoogleMaps by adding script tag to the page (no load event required here, because page is already loaded when this code executes);
  3. In renderer of this new control, create a div where map will be rendered;
  4. HTML Control has very important property - "preferDOM", this has to be set to true, otherwise, when UI5 rendering cycle happens, GoogleMap will be destroyed and created again which is very bad user experience in this case.
0
1

There are lots of different ways to implement google maps in UI5 apps:

However, pay attention to the Google TOS, they might require a license to use the maps API productively in your code.

Have Fun, Michael

0

I ended up doing the following, which seems to provide the desired results:

jQuery.sap.includeScript(
    "https://maps.googleapis.com/maps/api/js?key=api_key",
    "includeGoogleMaps",
    function () {
        // Do things
    }
);

I found this solution in the following Stack Overflow questions:

If there's anything wrong with the proposed solution, please let me know.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.