Hi,
Normally you would load the google.maps api by adding a script tag to the the index.html. However, since the Fiori application is loaded from the Component.js and the googlemaps api resource is loaded asynchronously we need to find another way.
My solution is similar to what Hemendra Sabharwal did, I just used the sap.jquery APIs for that:
1. I created a separate javascript resource 'googlemaps.js' that loads the googleapis and provides it a callback method:
jQuery.sap.declare("mappub.util.googlemaps");
jQuery.sap.includeScript("https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&callback=init");
function init(oEvent){
var controler = window.myController;
controler.initMap();
}
Once the script is loaded the callback function is invoked and I call the initMap() method on my controller to start rendering the map.
2. My controller looks like this:
jQuery.sap.require("mappub.util.googlemaps");
sap.ui.core.mvc.Controller.extend("mappub.view.Map", {
map: null,
onInit: function() {
window.myController = this;
},
initMap: function () {
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.getView().byId("map_canvas").getDomRef(), mapOptions);
}
Hope this helps,
Regards,
Ido Shemesh