Google Maps API in Fiori SAPUI5 using WebIDE and SAP Cloud Platform

Hi,

is there any best practice for using the Google Maps API (or any third party js library) in a Fiori SAPUI5 Application using the WebIDE?

loading the library in controller using the absolute path "https://maps.googleapis.com/maps/api/js?key=XXXX" doesn't work because of Access-Control-Allow-Origin issue.

Component.js

jQuery.sap.registerModulePath("googlemaps", "https://maps.googleapis.com/maps/api/js?key=XXX");

controller.js

var googlemaps = jQuery.sap.require("googlemaps");

error:

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/js.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://webidetesting0873340-XXXXtrial.dispatcher.hanatrial.ondemand.com' is therefore not allowed access. The response had HTTP status code 404.

I tried to fix this issue using an SAP Cloud Platform destination:

neo-app.json

{ "path": "/Google_Maps_API", "target": { "type": "destination", "name": "Google_Maps_API" }, "description": "Google_Maps_API" }


Component.js

jQuery.sap.registerModulePath("googlemaps", "/Google_Maps_API");

controller.js

var googlemaps = jQuery.sap.require("googlemaps");


error:

failed to load 'googlemaps.js' from /Google_Maps_API.js: 404

any idea how to solve this issue?

Kind regards

Rouzbeh


Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Jul 10, 2017 at 03:51 PM

    Hi,

    solved the issue using the following approach:

    create a new SAPUI5 Application:

    • WEB IDE File -> New -> Project From Template -> SAPUI5 Application
    • model > gmap.js: Create a javascript file in the project folder model and add the following code (you need to put your API key gmaps.js file.)

    • view > gmap.view.html:

    • controller > gmap.controller.js


    Kind regards

    Rouzbeh

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Jul 10, 2017 at 04:06 AM
    Add comment
    10|10000 characters needed characters exceeded

    • Hi Jakob,

      thank you! as my HTML view was embedded in a XML View loading the script using

      <script src="model/gmap.js"></script>

      didnt work. I loaded the script in onInit function of the controller file

      jQuery.sap.require("playground/apigmap/model/gmap");

      and this works!

      Kind regards

      Rouzbeh

Skip to Content