Skip to Content

Load Google MAP API using component.js

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

https://blogs.sap.com/2013/02/11/sapui5-with-google-maps/ 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": "https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=false"
   }
   ],
   "css": [{
    "uri": "css/style.css"
   }]
  }

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

Thank you.

Regards,

Abraham

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Best Answer
    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: http://jasper07.secondphase.com.au/openui5-googlemaps/

    best regards,

    Yong

    Add comment
    10|10000 characters needed characters exceeded

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

      jQuery.sap.declare("[replace_with_your_component]");
      jQuery.sap.registerModulePath("openui5.googlemaps",jQuery.sap.getModulePath("[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?

    Add comment
    10|10000 characters needed characters exceeded

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

    Hi,

    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.

    Thanks,

    Harish

    Add comment
    10|10000 characters needed characters exceeded