Hi guys,
So I had this kind of problem too, I need to ask respondents where they live/work and I need to ask them with a very user-friendly question. After asking around my friends and people of this forum (thanks tpartner!) how HTML, javascript, and jquery works (I have zero experience on them), I have come up with this type of question.
Since the last post was from 2 years ago, I thought it would be better to be late than never. My purpose of writing this post is just for my personal documentation of how I achieve this method, but I want to make it public hoping so that people can be helped too. Anyone who wants to polish the question style (my CSS knowledge is not so good) is welcome and please do post here too.
This question uses the Ubilabs Geocomplete and Google's Geocoder to accomplish the task. Obviously you need to make sure you can write HTML, javascript, and jquery on your Limesurvey installation. I had a problem with my university installation because it restricts me to write any script due to security issues.
Here is how it looks and works:
Step-by-step
- Make a multiple short text question in Limesurvey. Click save.
- Edit Subquestions and fill it with Latitude, Longitude, Post Code, and Address. You need to make sure the code is SQ001, SQ002, SQ003, SQ004. Click 'save and close'
- Now click 'edit' to edit the question. Click 'source' on the editor to edit using plain text. Copy and paste this code below to the editor.
Code:
<label>Where do you live?</label>
<!--Division for the map canvas-->
<div id="map_canvas" style="width:100%; height: 350px;"> </div>
<!--Footer to show lat, lng, and post code called "informasi"-->
<footer id= "informasi" style="font-size: 10px;">
<p>Lat: {yourwork_SQ001} Lng: {yourwork_SQ002} Post Code: {yourwork_SQ003}</p>
</footer>
<!--call necessary scripts-->
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyD0v6cdUflFKKxeUzzQWn1t2kriR57nf1s"></script>
<script src="https://ubilabs.github.io/geocomplete/jquery.geocomplete.js"></script>
<!--the script that uses geocomplete and insert the values to answer field-->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Move the informasi footer and the map_canvas to answer container
$('#question{QID} .answer-container').append($('#informasi'));
$('#question{QID} .answer-container').append($('#map_canvas'));
/* Make Lat, Lng, and Postal Code hidden
** Make the label of SQ004 hidden too */
document.getElementById("javatbd{SGQ}SQ001").style.display = "none";
document.getElementById("javatbd{SGQ}SQ002").style.display = "none";
document.getElementById("javatbd{SGQ}SQ003").style.display = "none";
$('label[for="answer{SGQ}SQ004"]').hide();
/* Declare and initialize map named 'options'
** and center it on Jakarta with constraint
** in Indonesia */
var options = {
country: ["ID"],
types: ['geocode','establishment'],
map: "#map_canvas",
location: [-6.17511, 106.86503949999997],
mapOptions: {
zoom: 10,
streetViewControl: false,
fullscreenControl: false,
mapTypeControl: false
},
markerOptions: {
draggable: true
}
};
// What to do when the user inputs address and uses the geocomplete form
$("#answer{SGQ}SQ004").geocomplete(options).bind("geocode:result", function(event, result){
var map = $("#answer{SGQ}SQ004").geocomplete("map");
var pcd = "";
for(var i=0; i < result.address_components.length; i++){
var component = result.address_components[i];
if(component.types[0] == "postal_code") {
pcd = component.long_name;
}
}
// Input the values to the limesurvey's answer field
$("#answer{SGQ}SQ001").val(result.geometry.location.lat).trigger('keyup');
$("#answer{SGQ}SQ002").val(result.geometry.location.lng).trigger('keyup');
$("#answer{SGQ}SQ003").val(pcd).trigger('keyup');
$("#answer{SGQ}SQ004").val(result.formatted_address).trigger('keyup');
});
// What to do when user drags the marker on map
$("#answer{SGQ}SQ004").bind("geocode:dragged", function(event, latLng){
var map = $("#answer{SGQ}SQ004").geocomplete("map");
map.panTo(latLng);
var geocoder = new google.maps.Geocoder();
$("#answer{SGQ}SQ001").val(latLng.lat).trigger('keyup');
$("#answer{SGQ}SQ002").val(latLng.lng).trigger('keyup');
geocoder.geocode({ 'latLng': latLng }, function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
for(var i=0; i < results[0].address_components.length; i++){
var carikodepos = results[0].address_components[i];
if(carikodepos.types[0] == "postal_code"){
$("#answer{SGQ}SQ003").val(carikodepos.long_name).trigger('keyup');
}
}
var alamat = results[0].formatted_address;
$("#answer{SGQ}SQ004").val(alamat).trigger('keyup');
}
});
})
});
</script>
- Click 'save and close' and click 'preview question' to test it out.
Note: I did not attach the .lsq or .lss because my default language is in Indonesian
