cancel
Showing results for 
Search instead for 
Did you mean: 

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


Accepted Solutions (0)

Answers (3)

Answers (3)

Hi,

I have created a project as mentioned above and tried to replicate the same, but when I run the application is throwing below error.

Any idea would be appreciated? Please let me know if am missing anything.

Project Structure:

Thanks!

Gayathri Vijayakumar

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

0 Kudos

well done rouzbeh

thank you for this foundation!

Jayakrishnan
Active Participant
0 Kudos

will it work in Launchpad? i see empty page on FLP when i run this code.

Former Member
0 Kudos
0 Kudos

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