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?
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.
You could try to create a wrapper custom control that is responsible for the renndering of the map. Then you can place this control inside your view XML.
There is also this post: https://blogs.sap.com/2014/07/01/google-maps-library-for-ui5/
Related
I've added a button into my Google Web App that when clicked, dynamically creates a new file in my Drive and downloads it to my local machine. I'm looking for a way to add the key word 'allow-downloads-without-user-activation' to the iframe so that it will continue to work after drive-by downloads are deprecated.
Currently, the console is giving me a warning to add 'allow-downloads-without-user-activation' since it will be removed in M74. Background details: https://www.chromestatus.com/feature/5706745674465280
function doGet(e) {
return HtmlService.createTemplateFromFile('MainPage').evaluate();
}
The code above is how I currently display the web app, and I could not find any way to add sandbox keyword from there. Is there any way to add this keyword to the iframe in Google App Script?
Edit:
This is the code in my html file.
$('#downloadBtn').click( function() {
$('#downloadBtnLabel').html('Preparing file...');
$('#Spinner').css('display','block');
google.script.run.withSuccessHandler(downloadFile).getTempLink();
});
function downloadFile(createdSpreadsheetId) {
var dlink = document.createElement('a');
dlink.download = name;
dlink.href = 'https://docs.google.com/spreadsheets/d/' + createdSpreadsheetId + '/export?exportFormat=xlsx';
dlink.onclick = function(e) {
var that = this;
setTimeout(function() {
window.URL.revokeObjectURL(that.href);
}, 1500);
};
dlink.click();
dlink.remove();
$('#downloadBtnLabel').html('Download');
$('#Spinner').css('display','none');
}
Parts of the above code is from https://stackoverflow.com/a/35251739 (special thanks to the author), which is working perfectly, just with the warnings in console.
I have a file in Google Drive with id=0B3fqdol6s0bWZHV3RWpoV1gyWkk
And I created appscript to download it over a link automatically. The code looks like this
function doGet(e) {
return HtmlService.createHtmlOutput(downloader());
}
function downloader() {
var out = "<body onload='dllink.click()'>";
out +="<a id='dllink' href='https://drive.google.com/uc?export=download&id=0B3fqdol6s0bWZHV3RWpoV1gyWkk'>wait will download automatically<a/>";
out +="</body>";
return out;
};
Then, I developed it as webapps so my friend can download it easily using link
https://script.google.com/macros/s/AKfycbzzToo8gwgdj30FBLrjA1izcfv4rddjW6VClaEGuNXAqZAkIH7S/exec
It's working perfect on PC browser, but sadly, It can't work on mobile phone browser which doesn't support handle onload event or javascript.
So, is there any solution to make an appscript download a file based on its id automatically?
Try it by using an iFrame:
function doGet(e) {
return HtmlService.createHtmlOutput(downloader());
}
function downloader() {
var out = "<iframe width=\"1\" height=\"1\" frameborder=\"0\" src=\"https://drive.google.com/uc?export=download&id=0B3fqdol6s0bWZHV3RWpoV1gyWkk\"></iframe>";
return out;
};
*Backslashes are for escaping
I'm working on a Dart app that heavily relies on Google Maps. How does/should one populate a Google Maps info window from within a Dart app?
Four approaches come to mind: Dart string interpolation (the string being HTML code), "templating" or web components or Polymer or...
The prototype (snippets below) does nothing more than placing "foo bar" in the info window.
My Marker class
var markerOptions = new JsObject.jsify({...});
_marker = GoogleMapsApi.newMarker(markerOptions);
GoogleMapsApi.getEventContext().callMethod('addListener', [_marker, 'click', (event) {
map.openInfoWindow(_marker, 'foo bar');
}]);
My Map class
openInfoWindow(JsObject marker, String content){
_infoWindow.callMethod('setContent', [content]);
_infoWindow.callMethod('open', [map, marker]);
}
Sidenote: GoogleMapsApi is my own helper class dealing with Google Maps JavaScript interop, I plan to replace it with Dart Google Maps.
i am trying to build a google earth view showing cities, but i stuck with the kml parser geoxml3. I have a javascript building a google map at first showing the locations i want. this works fine. I call the function from a php script providing it an address and kml file reference from database. The function builds the map, sets a flag 'map_finished' as a control flag when all ran fine and calls the build google earth view function.
// Get maps and earth from google
google.load( 'maps', '2.s', {'other_params': 'sensor=true'} );
google.load( 'earth', '1' );
//Google Earth Initializer
function initObjectEarth() {
// Check if Google Earth plugin is installed
if( gm_loaded ) {
this.ge_plugin_installed = google.earth.isInstalled();
if( this.ge_plugin_installed ) {
google.earth.createInstance( 'inmap', geSuccessCallback, geFailureCallback );
ge_loaded = true;
} else {
alert( 'Your Browser has not yet installed the Google Earth plugin.
We recommend installing it to use all features!' );
return false;
}
}
}
// Success handler
function geSuccessCallback( object ) {
this.ge = object;
this.ge.getWindow().setVisibility( true );
this.kmlParser = new geoXML3.parser();
}
// Error handler
function geFailureCallback( object ) {
alert( 'Error: ' + object );
}
The geoxml parser uses the ProjectedOverlay class. Both libraries are loaded into document head. When the parser is getting instatiated it requests a ProjectedOverlay instance. This class throws a
Error: **google.maps is undefined**
error in firebug for the following statement
ProjectedOverlay.prototype = new google.maps.OverlayView();
In my script file i have declared vars including
var gm //for google map
var ge //for google earth
gm is set in the function that builds the google map.
I wonder how to fix this issue. I tried the getProjection() thing i found in web as well as
ProjectedOverlay.prototype = new google.maps.OverlayView().prototype;
with no success. This topic is absolutely new to me and i cannot figure out how to fix it neither from the documentation of OverlayView nor from google search.
What did i forget or do wrong?
The call to the geoXML3 constructor is wrong, you must pass the google.maps object as a parameter (...hence the "google.maps is undefined" error).
this.kmlParser = new geoXML3.parser({map: gm}); // gm for google map
I want to create a Google map with user uploaded Geotagged photos that show up on my map. I can easily create manipulate my map but I can't seem to find instruction on how to add these geotagged photos.
Here is an example of what I am try to accomplish:
http://maps.google.com/?ie=UTF8&ll=26.892794,-80.055909&spn=0.003875,0.004828&t=h&z=18&lci=lmc:panoramio
I don't have experience working with photos, but I don't think it should be really any different than placing a GMarker on the map at the appropriate coordinates of your photo, and then in the info window of the tag you would output your custom HTML which would include your photo.
Edit: Specific link leading to the GMarker class in the Google Maps API Reference: http://code.google.com/apis/maps/documentation/reference.html#GMarker
You need to create a tile, then create a tile overlay.
var tilelayer = new GTileLayer(myCopyright);
tilelayer.getTileUrl = function() { return "../include/tile_crosshairs.png"; };
tilelayer.isPng = function() { return true;};
tilelayer.getOpacity = function() { return 1.0; }
var myTileLayer = new GTileLayerOverlay(tilelayer);
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addOverlay(myTileLayer);
The documentation is here, with a great sample map here.
You could use PHP (or another script) to create a KML or GeoRSS file (much like Flickr's KML and GeoRSS feeds) and have the Google Maps API function GGeoXML load the file as an overlay on the map.
See Google's example code here: http://code.google.com/apis/maps/documentation/examples/geoxml-rss.html
That example is actually loading a live GeoRSS feed from Flickr.