Skip to Content

Load Google MAP API using component.js

Jul 14, 2017 at 12:54 AM


avatar image

Hi Experts,

I plan to incorporate google map into Fiori application that I build and start by register as Google developer to get the API key. I follow the guide in this blog to start testing the usage of the API first. Following the guide has no issue and the map loaded successfully but the issue is this approach load the library in index.html where as Fiori apps from Launchpad will not use index.html but Component.js as the starting point.

I try using Manifest.json to load the library but it seems like not working. I heard that it might be because uri in Manifest.json only meant for local uri. Below is the portion that I added into Manifest.json

"resources": {
   "js": [
    "uri": ""
   "css": [{
    "uri": "css/style.css"

Has anyone successfully try using Google Map library in the Fiori Launchpad itself?

Thank you.



10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Best Answer
Yong Zhao
Jul 14, 2017 at 02:35 AM

Hi Abraham,

did you try to include Google map API in index.html?

One expert wrote a UI5 library for Google map API which simplifies integration with Google map API. You can find library in this link:

best regards,


Show 2 Share
10 |10000 characters needed characters left characters exceeded

Hi Abraham,

Then you can load source library in the Component.js.

It seems adding external API in manifest also works if you put them in the "sap.ui5" section.

As an alternative solution you can manually extend the following declaration in the Component.js if you don't have index.html.

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "";

Hi Yong Zhao,

Sorry for late reply, I ended up using your first suggestion which is using 3rd party library google map API by Jasper however the way I load it in component.js is not using $("head").append(s).

Below is the what use at the beginning of Component.js ."[replace_with_your_component]");"openui5.googlemaps","[replace_with_your_component]") + "/[sub_directory_where_you_store_third_party_library]/openui5/googlemaps/");

It is now working as expected.

Thank you for your suggestion.

avatar image
Former Member Sep 01, 2017 at 02:26 AM

hello, I meet the same problem , I don't you whether solving the problem. if you solve the problem ,could you tell the method?

Show 1 Share
10 |10000 characters needed characters left characters exceeded


Please check the answer above for the solution.


avatar image
Former Member Dec 18, 2017 at 07:43 AM


I am facing the same issue as well while trying to use Google maps API in fiori app. The google uri is not loading from Component.js.

Getting the error: "Google is not defined"

If anyone has cracked, please share it as well.



10 |10000 characters needed characters left characters exceeded