Ability to add Google Maps as a question

More
2 years 6 months ago #132986 by mascarpone
mascarpone replied the topic: Ability to add Google Maps as a question
Hi Folks, another request on this nice feature: anyway that users can enter (either type or copy/paste) their coordinates in the small text field as opposed to dragging the placemarker on the right spot?

Right it seems to be a display only (doesn't capture coordinates that are typed in) - would be very helpful, thanks!

Please Log in or Create an account to join the conversation.

More
2 years 4 months ago #136361 by DiegoSilva
DiegoSilva replied the topic: Ability to add Google Maps as a question
Do you know how to do it? I need to do the same....

Thanks in advance.-

Please Log in or Create an account to join the conversation.

More
3 months 3 days ago - 3 months 3 days ago #169992 by b1994mi
b1994mi replied the topic: Ability to add Google Maps as a question
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
  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.
    <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="http://maps.googleapis.com/maps/api/js?libraries=places&amp;key=AIzaSyD0v6cdUflFKKxeUzzQWn1t2kriR57nf1s"></script>
    <script src="http://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>
  4. 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
Attachments:
Last Edit: 3 months 3 days ago by b1994mi.
The following user(s) said Thank You: holch, tpartner

Please Log in or Create an account to join the conversation.

More
3 months 3 days ago #169993 by tpartner
tpartner replied the topic: Ability to add Google Maps as a question
This looks like a good candidate for a 3.x custom question theme. I'll try to find the time to develop that this week.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: holch, LouisGac

Please Log in or Create an account to join the conversation.

More
2 weeks 1 day ago #173470 by blocka
blocka replied the topic: Ability to add Google Maps as a question
Posting an up-vote on this -- would be a very useful question type.

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!