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)

Why does adding image to a google form using Form.addImageItem() result in "Invalid data updating form"?

I'm trying to automatically insert an image from a Google drive into a Google form with the help of a Google script using the addImage function, which has recently stopped working and leads to the error message 'Invalid data update formular'.
I'm using Google forms to allow users to enter text from images.
Some sort of manual image recognition.
The images are stored on the googel drive in a directory.
A Google script inserts them into a form and adds several questions with short answers, multiple choice questions and page breaks.
So until recently everything worked, but now the addImage function of the form returns the error message
Invalid data update form.
I have tried to do do the following:
created a new form with a new script to test addImageItem function (source below)
tested that all other functions to add items to the form except addImageItem (like addMultipleChoiceItem, addPageBreakItem, addCheckboxItem, addTextItem) still work
add image manualy to see if that still work
use other formats as image source (JPG and PNG)
use different files on the google drive as image source
use UrlFetchApp.fetch function as image source (like in the documentation example)
All attempts with addImageItem unsuccessful.
The functions addMultipleChoiceItem, addPageBreakItem, addCheckboxItem, addTextItem return the desired result by adding Items to the form.
Also adding image by hand using the edit form interface stil works.
The images we update are about 60kB in size, about 800x600 px large.
The answers to this thread from 2012 which looks similar do not help. The error messages in the question are different. I also tried to use the getBlob() and getThumbnail() functions, as mentioned in the answers there, but they also lead to the error 'Invalid data update form'.
function myFunction() {
var form = FormApp.openById("drive_file_id_of_form");
var img = DriveApp.getFileById("drive_file_id_of_image");
var imgFormItem = form.addImageItem();
imgFormItem.setImage(img);
//var img = UrlFetchApp.fetch('https://www.google.com/images/srpr/logo4w.png');
//var blob = img.getThumbnail();
//var blob = img.getBlob();
//form.addImageItem().setImage(blob);
}
According to the google documentation, addImage should return a newly created ImageItem as a return value but lead to the error on line 4:
Invalid data for updating the form. (line4, file "Code")
Can someone please help me find out what is invalid in the form data or in the images I try to add and how to avoid this problem?
Edit: found a fresh bug tracker id for this topic on google issue tracker

Unknown syntax in google maps marker

I am trying to get the address or location of a google maps marker. However when I view the source code of the website I get a weird javascript call. Is there any way to resolve this to a usable Long/Lat?
This is what I see.
<script type="text/javascript">
$(window).load(function(){
//Get spu from unit id's
var spuMap = new Array();
// initialization for property page is done in seperate function
if ($("#pdp-container").length == 0){
ha.map.property.init({location: [{a:'%32%30%2E
%35%34%35%35%32%35%39%35%34%32%31%34%37%30%37', b:'%2D%31%30%35%2E
%32%37%39%34%30%37%35%30%31%32%32%30%37', cLat:'%32%30%2E
%35%34%35%35%32%35%39%35%34%32%31%34%37%30%37', cLong:'%2D%31%30%35%2E
%32%37%39%34%30%37%35%30%31%32%32%30%37', id:'268534', exact:true, zoom:16, maxZoom:20, type:'u'}],
mType: 'property'}, spuMap);
}
});
</script>

For some strange reason these parameters are URI encoded so simply call decodeURI on cLat and cLong, eg.
decodeURI(cLat);
And when you use it make sure to convert it to a number as google api takes coordinates as numbers.

How to get the AT5 data from a GGeoXml object

I load an AT5 file into a google map object using the following code:
map = new GMap2(document.getElementById("map_canvas"));
geoXml = new GGeoXml(at5);
GEvent.addListener(geoXml, "load", function() {
geoXml.gotoDefaultViewport(map);
// I would like to read the AT5 contents here
});
map.addOverlay(geoXml);
Thanks for any kind of help.

This does not refer to Version 3 of the Maps API. GMap2, GGeoXml and GEvent are all part of Version 2.
GGeoXml is opaque: you cannot inspect it. Use a third-party parser if you want the content to be available.
There's a rather old list available at http://econym.org.uk/gmap/extensions.htm -- have a look at EGeoXml and GeoXml.

Clear a kml that was added to google earth using javascript

I have added a kml to google earth by use of button with javascript. How can I delete that kml or clear all kml's by use of another button? thanks

To remove all the features you can use the following method. It presumes that 'ge' references your plug-in object.
function RemoveAllFeatures()
{
var features = ge.getFeatures();
while (features.getLastChild() != null)
{
features.removeChild(features.getLastChild());
}
}

Do you mean you added a KML file? I guess you did this by adding a "network link" using functions like
var networkLink = ge.createNetworkLink('ID_MyNetworkLink');
var link = ge.createLink('MyHREF');
link.setHref('http://bla.bla.bla.kml');
networkLink.setLink(link);
ge.getFeatures().appendChild(networkLink);
So your "file" is a child of the whole KML tree with id "ID_MyNetworkLink". You can remove it by
ge.getFeatures().removeChild(ge.getElementById('ID_MyNetworkLink'));
Hope that helps

Though not quite what you are likely looking for you can have a NetworkLink that loads kml with a NetworkLinkController change things. Check out the docs.