Google maps on Thank You Page

asked on June 1, 2017

Hi there,

I'm currently building a demo form to show off some features that forms can manage.

What I have currently is a form that grabs the users current geo-location and displays it in google maps static map API. Works great, I use a hidden field to store the lat and lng for the map and use a separate geo-location field to display it to users.

It displays fine in the form but when I submit to the Thank You Page my map disappears and the only error I seem to get is permissions and not finding the data anymore yet I thought the Thank You Page view form just used the same fields as the form itself without any changes in the DOM.

I used >this https://answers.laserfiche.com/questions/77786/Custom-HTML-how-to-Hold-or-freeze-an-custom-HTML-active-script-when-submitting- post as reference.

Anyone else came across this? It's not a huge deal if we can get all the data into the document into the repository but it'd be nice for the user to view all the image previews / maps on the Thank You page.

0 0

replied on June 1, 2017

The DOM actually does change a little bit depending on how you are viewing the form. When you open a submitted form from the reporting tools or Instance history, you will be shown the original form and fields, with all of the saved variables being filled into the right places accordingly. The Thank You page (and also the saved image when you use a Save to Repository task) actually removes many of the HTML form elements and replaces them with <div> tags. I believe this applies to any string-like inputs such as Text fields, Multiline, Address, Email, Drop-down, etc... So if you are using Javascript to access the hidden coordinates field, something like $(".coords input").val() for example, you may need to also add some logic and code to detect the value within a div tag on the thank you page... something like $(".coords div.ro").text() might do the trick. Obviously I can't give you anything too specific without more details about your actual setup.

0 0

replied on June 2, 2017

I think I get it, I had a look but still getting permission errors on the map.

My code is below, I'm using a single line to stick in the values of the geolocation to pull up the map with and it works great.

$.getScript('https://maps.googleapis.com/maps/api/js?key=KEYNUMBER&libraries=places', function() {


   //   $('#q31').hide();
getLocation();

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById("q30").innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
$('#q31 input').val(position.coords.latitude + "|" + position.coords.longitude);
drawMap($('#q31 input').val());
}

if ($('#q31').prop('tagName') != 'INPUT') {
var divlatlong = document.getElementById("q31").innerHTML;
drawMap(divlatlong);
}

function drawMap(n) {
var position = n.split('|');
var latitude = position[0];
var longitude = position[1];
document.getElementById("q30").innerHTML = "<br />Latitude: " + latitude + "<br />Longitude: " + longitude;
var google_tile = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=16&size=400x150&markers=color:red|" + latitude + "," + longitude;
var canvas = document.getElementById("map_canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = google_tile;
img.onload = function(){
context.drawImage(img, 0, 0);
}
}

});

1 0

Question

Question

Replies

Sign in to reply to this post.