Correctly importing Google Maps API into UI5 Application

Question

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!

Answer 1

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.

Answer 2

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

• If you are using SAPUI5: there are controls for generic map integration which you can configure to use google maps as provider: https://sapui5.hana.ondemand.com/#/entity/sap.ui.vbm.GeoMap https://sapui5.hana.ondemand.com/#/entity/sap.ui.vk.MapContainer

• If you are using OpenUI5 you may be interested in this community library that wraps the google API in custom controls: https://github.com/jasper07/openui5-googlemaps

• If you are in need of something else, you can inject the JavaScript of google directly as the above poster explained and inject the map into the app but it might not be flexible enough. You can always create a simple custom control rendering an empty div for the map and connect it with the maps API to render the map via google API's.

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

Have Fun, Michael

Answer 3

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:

• Using external js libraries in sapui5
• UsingjQuery.sap.includeScript().then() in HCP Firori Launchpad

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