asked on July 8, 2018
Hi All,
Having an issue with 10.3.1 forms,
We are trying to have the image captured, displayed and saved into a form for the geolocation.
The issue is we can't get the image to show in the form.
This exact setup is working in another environment using 10.2 so not sure what is causing the problem.
How we have it setup is:-
3 fields
A single line field to hold the Geolocation value #q4
A HTML field "P Tab" for the written values #q2
A HTML field "Canvas" for the image (HTML:- <canvas id="myCanvas"></canvas>)
Here is the JavaScript below we use and I have attached images showing the issue
$.getScript('https://maps.googleapis.com/maps/api/js?key=KEYNUMBER&libraries=places', function() {
//$('#q4').hide();
getLocation();
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById("q2").innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
$('#q4 input').val(position.coords.latitude + "|" + position.coords.longitude);
drawMap($('#q4 input').val());
}
if ($('#q4').prop('tagName') != 'INPUT') {
var divlatlong = document.getElementById("q4").innerHTML;
drawMap(divlatlong);
}
function drawMap(n) {
var position = n.split('|');
var latitude = position[0];
var longitude = position[1];
document.getElementById("q2").innerHTML = "Location found!<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("myCanvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = google_tile;
img.onload = function(){
context.drawImage(img, 0, 0);
}
}
});
getLocation();
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById("q2").innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
$('#q4 input').val(position.coords.latitude + "|" + position.coords.longitude);
drawMap($('#q4 input').val());
}
if ($('#q4').prop('tagName') != 'INPUT') {
var divlatlong = document.getElementById("q4").innerHTML;
drawMap(divlatlong);
}
function drawMap(n) {
var position = n.split('|');
var latitude = position[0];
var longitude = position[1];
document.getElementById("q2").innerHTML = "Location found!<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("myCanvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = google_tile;
img.onload = function(){
context.drawImage(img, 0, 0);
}
}
});
Regards
Shane
0
0