/scripts/ahub.form.attachments.js
1

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

Jul 09, 2017 at 01:11 PM

1.6k

avatar image

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


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

2 Answers

Rouzbeh Nabatian Jul 10, 2017 at 03:51 PM
1

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


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

well done rouzbeh

thank you for this foundation!

0
avatar image
Former Member Jul 10, 2017 at 04:06 AM
0
Show 1 Share
10 |10000 characters needed characters left 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

0
Skip to Content