- Posts: 2
- Thank you received: 0
Ask the community, share ideas, and connect with other LimeSurvey users!
<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&amp;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>
1. Make a multiple short text question in Limesurvey. Click save.
2. 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'
3. 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...
4. Click 'save and close' and click 'preview question' to test it out.