Hello,
I'm trying to implement a survey where someone picks a location on one map, and then picks a location on another map, and it calculates the distance between those two points.
To do this I'm attempting to implement a modified version of tpartner's code from this page:
www.limesurvey.org/en/community-services...on?start=10&start=20
But no matter what I try, I can't get this to work. I have absolutely no experience with Javascript so I've been trying to stumble my way through it, but can't figure it out. Here is the code I modified and attached to question 2:
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Identify the map
var map2SGQA = '{SGQ}';
var map1SGQA = '774328X12X32';
var currentMap = gmaps[''+map2SGQA+'_c'];
// Wait for the map to load
google.maps.event.addListenerOnce(currentMap, 'idle', function(){
// Some variable definitions
var currentMarker = gmaps['marker__'+map2SGQA+'_c'];
var answerInput = $('#answer'+map2SGQA+'_c');
var defaultPosition = $(answerInput).val();
var startLat = $('{INSERTANS:'+map1SGQA+'}').val().split(';')[0];
var startLng = $('{INSERTANS:'+map1SGQA+'}').val().split(';')[1];
var startLatLng = new google.maps.LatLng(startLat, startLng);
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
// Listener on the map events
google.maps.event.addListener(currentMap, 'click', function() {
calculateDistances(startLatLng, currentMarker.getPosition());
});
google.maps.event.addListener(currentMarker, 'dragend', function() {
calculateDistances(startLatLng, currentMarker.getPosition());
});
google.maps.event.addListener(currentMap, 'rightclick', function() {
calculateDistances(startLatLng, currentMarker.getPosition());
});
// Insert the results element
$(answerInput).after('<div class="distanceResults" />');
});
});
function calculateDistances(origin, destination) {
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [origin],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, callback);
}
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = $('.questiontext');
outputDiv.innerHTML = '';
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
for (var j = 0; j < results.length; j++) {
$('.distanceResults').html('Start address: '+origins[i]+'<br />\
End address: '+destinations[j]+'<br />\
Distance: '+results[j].distance.text+'<br />\
Time: '+results[j].duration.text+'');
}
}
}
}
</script>
I could also see doing this by setting the start point of the second map to the answer of the first map, but because of how map questions output answers I can't figure out how to get that to work either.
Edit:
When putting both maps on the same page and using the following code, I have gotten this to work somewhat. Unfortunately it won't change the starting location after it has tried calculating everything once, so if anyone has any suggestions there I'd like to fix that.
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Identify the map
var map2SGQA = '{SGQ}';
var map1SGQA = '774328X12X32';
var currentMap = gmaps[''+map2SGQA+'_c'];
var prevMap = gmaps[''+map1SGQA+'_c'];
// Wait for the map to load
google.maps.event.addListenerOnce(currentMap, 'idle', function(){
// Some variable definitions
var currentMarker = gmaps['marker__'+map2SGQA+'_c'];
var prevMarker = gmaps['marker__'+map1SGQA+'_c'];
var answerInput = $('#answer'+map2SGQA+'_c');
var defaultPosition = $(answerInput).val();
var startLat = $('#answer'+map1SGQA+'_c').val().split(' ')[0];
var startLng = $('#answer'+map1SGQA+'_c').val().split(' ')[1];
var startLatLng = new google.maps.LatLng(startLat, startLng);
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
// Listener on the map events
google.maps.event.addListener(prevMap, 'click', function() {
startLatLng = prevMarker.getPosition();
});
google.maps.event.addListener(prevMarker, 'dragend', function() {
startLatLng = prevMarker.getPosition();
});
google.maps.event.addListener(prevMap, 'rightclick', function() {
startLatLng = prevMarker.getPosition();
});
google.maps.event.addListener(currentMap, 'click', function() {
calculateDistances(startLatLng, currentMarker.getPosition());
});
google.maps.event.addListener(currentMarker, 'dragend', function() {
calculateDistances(startLatLng, currentMarker.getPosition());
});
google.maps.event.addListener(currentMap, 'rightclick', function() {
calculateDistances(startLatLng, currentMarker.getPosition());
});
// Insert the results element
$(answerInput).after('<div class="distanceResults" />');
});
});
function calculateDistances(origin, destination) {
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [origin],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, callback);
}
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = $('.questiontext');
outputDiv.innerHTML = '';
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
for (var j = 0; j < results.length; j++) {
$('.distanceResults').html('Start address: '+origins[i]+'<br />\
End address: '+destinations[j]+'<br />\
Distance: '+results[j].distance.text+'<br />\
Time: '+results[j].duration.text+'');
}
}
}
}
</script>
