Find Questions & Answers

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


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"…

Find Questions & Answers

Very Helpfull

User Rating: Be the first one !
Add Comment
2 Answer(s)

    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

    Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.