Add google maps to fiori sapui5 app

Question

I want to add google maps to my Fiori app. At this moment, I'm able to add google maps to my UI5 app by adding a <script> tag in index.html and successfully call the map to render. But when it comes to Fiori Launchpad, which launch my app not by index.html but Component.js, then it doesn't work. I've been working around but no hope. Any suggestions?

Answer 1

You can try below code in controller file.

Instead of script in index file, load script once view is rendered

onAfterRendering: function() {
	var me = this;
	this.loadGoogleMaps("google map API script", me.setMapData.bind(me));
},

// setMapData is a callback function for setting data such as longitude and lattitude

loadGoogleMaps: function(scriptUrl, callbackFn) {
	var script = document.createElement('script');
	script.onload = function() {
        callbackFn();
	}
	script.src = scriptUrl;
	document.body.appendChild(script);
},

In this way you can use it inside Fiori launchpad.