Ability to add Google Maps as a question

More
3 years 1 month ago #132986 by mascarpone
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 11 months ago #136361 by DiegoSilva
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
10 months 1 day ago - 10 months 1 day ago #169992 by b1994mi
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: 10 months 1 day ago by b1994mi.
The following user(s) said Thank You: holch, tpartner, gremlin

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

More
10 months 1 day ago #169993 by tpartner
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
7 months 1 week ago #173470 by blocka
Posting an up-vote on this -- would be a very useful question type.

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

More
5 months 6 days ago #176632 by KompetenzZ
Hi,

are these steps of the multiple short text question by b1994mi working without adding the API from Google Analytics? I don't see it in the his post:

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.


But I tried to do these steps and it did not work for me. So I thought that I might need an API?

Thank you

Cheers kompetenzz

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

More
2 weeks 20 hours ago - 2 weeks 20 hours ago #182800 by gremlin
Hi there,

Yes you would need a google API. Not sure if you are still troubled by this. Thought that I would just share that I made the following changes and it seem to work well.

1) changed the <src>in b1994b's contribution to the following:

src=" maps.googleapis.com/maps/api/js?key={YOU...ries=geometry,places "

src=" ubilabs.github.io/geocomplete/jquery.geocomplete.js "

2) Added my api key in the global settings and in the script above.
Last edit: 2 weeks 20 hours ago by gremlin.

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

More
2 weeks 9 hours ago #182809 by DenisChenu
You can still offer pull request if LimeSurvey core can be improved …

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

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

More
2 weeks 5 hours ago #182812 by tammo
Since we are an open source platform, it would be great if we could avoid Google Maps and use Open Street maps in stead.

Tammo


Tammo ter Hark at Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template
The following user(s) said Thank You: DenisChenu

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

More
2 weeks 1 hour ago #182839 by DenisChenu

tammo wrote: Since we are an open source platform, it would be great if we could avoid Google Maps and use Open Street maps in stead.

Tammo

Yes,

And create some js to use wiki.openstreetmap.org/wiki/Nominatim or (better) mapquest developer.mapquest.com/documentation/open/ ( developer.mapquest.com/documentation/open/geocoding-api/ ) with option to use own user API name

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

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

More
2 days 4 hours ago #183381 by s9521070
Hi,
This is indeed a great additional question type.
I think it would really help if both the map is reoriented and the marker gets moved if one rightclicks the map. The current implementation requires the user to pick the marker and drag it to the right location, which is less user-friendly.
I am not proficient in jQuery, but this should be fairly easy with something like google.maps.event.addListener(map,'rightclick',function())
Could anyone help me out on how to implement this rightclick solution?

Thanks,
Stijn

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!