Develop Reference

Display generated Google Map image on a web page

I am using Google Apps Script to create a page, on which I would like to embed maps. The maps themselves would be static, but the map could be different depending on other parameters (it’s a genealogy page, and I’d like to display a map of birth and death locations, and maybe some other map points, based on a selected individual).
Using Google’s Maps service, I know that I can create a map, with a couple points built in.
Function getMapImage() {
var map = Maps.newStaticMap()
.setSize(600,400)
.addMarker('Chicago, Illinois') // markers would be based on a passed parm; this is just test data
.addMarker('Pocatello, Idaho');
// *** This is where I am looking for some guidance
return(); // obviously, I'm not returning a blank for real
}
Within the map class, there are a number of things I can do with it at this point.
I could create a URL, and pass that back. That appears to require an API account, which at this point, I do not have (and ideally, would like to avoid, but maybe I’ll have to do that). It also appears that I will run into CORB issues with that, which I think is beyond my knowledge (so if that’s the solution, I’ll be back for more guidance).
I could create a blob as an image, and pass that back to my page. I have tried this using a few different examples I have found while researching this.
Server Side
function getMapImage() {
var map = Maps.newStaticMap()
.setSize(600,400)
.addMarker('Chicago, Illinois')
.addMarker('Pocatello, Idaho');
var mapImage = map.getAs("image/png");
// OR
// var mapImage = map.getBlob();
return(mapImage);
}
Page side
<div id=”mapDiv”></div>
<script>
$(function() {
google.script.run.withSuccessHandler(displayMap).getMapImage();
}
function displayMap(mapImage) {
var binaryData = [];
binaryData.push(mapImage);
var mapURL = window.URL.createObjectURL(new Blob(binaryData, {type: "image/png"}))
var mapIMG = "<img src=\'" + mapURL + "\'>"
$('#mapDiv').html(mapIMG);
}
</script>
The page calls getMapImage() on the server, and the return data is sent as a parm to displayMap().
var mapIMG ends up resolving to <img src='blob:https://n-a4slffdg23u3pai7jxk7xfeg4t7dfweecjbruoa-0lu-script.googleusercontent.com/51b3d383-0eef-41c1-9a50-3397cbe83e0d'> This version doesn't create any errors in the console, which other options I tried did. But on the page, I'm just getting the standard 16x16 image not found icon.
I’ve tried a few other things based on what I’ve come across in researching this, but don’t want to litter this post with all sorts of different code snippets. I’ve tried a lot of things, but clearly not the right thing yet.
What’s the best / correct (dare I ask, simplest) way to build a map with Google’s Map class, and then serve it to a web page?
EDIT: I added a little more detail on how the server and page interact, in response to Tanaike's question.

Modification points:
I think that in your script, Blob is returned from Google Apps Script to Javascript using google.script.run. Unfortunately, in the current stage, Blob data cannot be directly sent from from Google Apps Script to Javascript. I think that this might be the reason of your issue.
In this case, I would like to propose to directly create the data URL at the Google Apps Script side. When your script is modified, it becomes as follows.
Modified script:
Google Apps Script side:
function getMapImage() {
var map = Maps.newStaticMap()
.setSize(600, 400)
.addMarker('Chicago, Illinois')
.addMarker('Pocatello, Idaho');
var blob = map.getAs("image/png"); // or map.getBlob()
var dataUrl = `data:image/png;base64,${Utilities.base64Encode(blob.getBytes())}`;
return dataUrl;
}
Javascript side:
$(function() {
google.script.run.withSuccessHandler(displayMap).getMapImage();
});
function displayMap(mapURL) {
var mapIMG = "<img src=\'" + mapURL + "\'>"
$('#mapDiv').html(mapIMG);
}
In your Javascript side, $(function() {google.script.run.withSuccessHandler(displayMap).getMapImage();} is not enclosed by ). Please be careful this.
Note:
In my environment, when I saw <div id=”mapDiv”></div>, this double quote ” couldn't be used. So if in your environment, an error occurs by <div id=”mapDiv”></div>, please modify ” to " like <div id="mapDiv"></div>.
Reference:
base64Encode(data)

how to jump to page of rendered pdf

Im using pdfobject along with forcePDFJS which uses pdfjs viewer.js to render pdf's.. Once they are rendered I need to be able to jump to pages without reloading the document.. The documents can be pretty large
I've seen some mentions about using PDFApplicationViewer.pdfview.currentPageNumber. but I haven't seen a good example on how to use it correclty
I've seen two example of using the PDFApplicationViewer
1. PDFApplicationViewer.pdfview.currentPageNumber = pagNum;
2. document.getElementById('mycanvas').contentWindow.PDFApplicationViewer.pdfview.currentPageNumber = pagNum;
Althought the second on make more sense Im not sure where the contentWindow object from the element comes from. Im assuming the pdfobject embeds something that I could get access too but I can't figure it out..
Also, since I couldn't really find alot on this.. Is this even possible..
For time constraint reasons I don't want to have to put together a new viewer using pdfjs.. I like what comes with the viewer.html.. I just need to jump the pages without reloading

PDFObject.embed doesn't return any reference So I looked into the pdfObject code to see how it was embedding the pdf..
for this to work there needs to be a iframe.. So when rendering with pdfobject Im using a configureation as follows:
Notice forcePDFJS=true
if(!pageNum)
pageNum=1;
var options = {
pdfOpenParams: {
view: "FitV",
page: pageNum
},
forcePDFJS: true,
PDFJS_URL: "../pdfjs/web/viewer.html"
};
Here is code that works
var pdfviewer = document.getElementById('pdfviewer');//get the viewer element
var contenttag = pdfviewer.getElementsByTagName("iframe")[0]//got this from pdfobject code
contenttag.contentWindow.PDFViewerApplication.pdfViewer.currentPageNumber = parseInt(pageNum);//change the page

In my case, the pdfviewer id is not available anymore.
PDFObject does return the reference of iframe that it creates. I was using basic HTML + JS so I had to save that reference to global window object to be able to access it from anywhere in the project.
Finally, with the reference we have, we can access the PDFViewerApplication object as below and manipulate the PDF:

I need to overwrite an existing Google Sheets file with an attached Script

I have a Google Sheets file with an attached Script. The script does a number of things, one is it makes a clone of it self using makeCopy. This portion works. Now I want to be able to keep the same cloned Google file name and same Google file ID and just update the content which includes a Spreadsheet and the associated Google script.
if (!fileFound){
var file = masterSSFile.makeCopy(reportFileName, RepFolder);
} else {
oldFile.setContent(masterSSFile.getBlob());
}
When I use makeCopy with the same file name it creates a second file with the same name but with a different file ID.
The else portion fails because .setContent argument seems to just accept text. The result is the word "Blob" in the oldFile, everything else is gone.
I have other scripts that update the contents of a existing spreadsheet by overriding the contents of the various sheets, but I also want the associated script to also be included in the updated file keeping the same file ID.

I found this....
Overwrite an Image File with Google Apps Script
and tried using
var masterSpreadsheetID = SpreadsheetApp.getActiveSpreadsheet().getId();
var masterSpreadsheetFile = DriveApp.getFileById(masterSpreadsheetID);
var oldFileID = oldFile.getId();
var oldFileName = oldFile.getName();
var newBlob = masterSpreadsheetFile.getBlob();
var file = {
title: oldFileName,
mimeType: 'application/vnd.google-apps.spreadsheet'
};
var f = Drive.Files.update(file, oldFileID, newBlob);
I get error: "We're sorry, a server error occurred. Please wait a bit and try again. " on this line: "Drive.Files.update(file, oldFileID, newBlob);"
After reading this:
https://github.com/google/google-api-nodejs-client/issues/495
it looks like Drive.Files.update(), does not support bound scripts.

Keeping javascript minified inside the database

I have written a script that is placed on different websites. It puts some html/css there. I have also written a website that enables to configure this html/css for each website.
That's why the script has to load html/css from the database. And that's why I have to keep javascript inside the database, and then use some eval to fire it from the script.
My question is - how can I keep something like this minified in the database, and then display it nicely formatted in some wysiwyg editor?
Sample text:
var el = document.createElement('body');
el.innerHTML = 'foobar';
document.getElementsByTagName('body')[0].appendChild(el);
This is what I want to get in my wysiwyg editor, but in DB I want this:
var el = document.createElement('body');el.innerHTML = 'foobar';document.getElementsByTagName('body')[0].appendChild(el);
So I have to somehow convert between those two.

I think you can use a regular expressions to do that (if you just want to place all code at the single line into the DB):
To store from the editor to the database do
var codeToDB = WYSIWYG_value.replace(/\r\n|\r|\n/g,"");
To restore from the database
var codeToWYSIWYG = codeFromDB.replace(/;/g,";\n")

simple js source mapping

I'm developing a tool that dynamically load javascript in the browser.
I want to allow users to debug generated code, but I also want to hide some of the generated line while debugging.
Example of the generated source:
define('simple','simple',function(module) {
module.exports = function gogogo() {
var a = require("./a");
var b = require("./b");
return a + b;
};
});
Ideally, I want the first and last line to be hidden while debugging in devtools.
I know I could use source mapping, but I want to know if there is a simple way to just hide some line in debugger, or if there is some tool to generate a source map for this simple use case.