Ability to add Google Maps as a question

Plus d'informations
il y a 3 ans 6 mois #132986 par 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!

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 3 ans 4 mois #136361 par DiegoSilva
Do you know how to do it? I need to do the same....

Thanks in advance.-

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 an 3 mois - il y a 1 an 3 mois #169992 par 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
Pièces jointes :
Dernière édition: il y a 1 an 3 mois par b1994mi.
Les utilisateur(s) suivant ont remercié: holch, tpartner, gremlin

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 an 3 mois #169993 par 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.
Official LimeSurvey Partner - partnersurveys.com
Les utilisateur(s) suivant ont remercié: holch, LouisGac

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 an 2 semaines #173470 par blocka
Posting an up-vote on this -- would be a very useful question type.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 10 mois 1 semaine #176632 par 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

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 2 semaines - il y a 5 mois 2 semaines #182800 par 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.
Dernière édition: il y a 5 mois 2 semaines par gremlin.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 2 semaines #182809 par 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 , plugin development .
An error happen ? Before make a new topic : remind the Debug mode .

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 2 semaines #182812 par 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 theme
toolsforresearch.com/limesurvey-responsive-template
Les utilisateur(s) suivant ont remercié: DenisChenu

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 2 semaines #182839 par DenisChenu

tammo écrit: 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 , plugin development .
An error happen ? Before make a new topic : remind the Debug mode .

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 4 jours #183381 par 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

Connexion ou Créer un compte pour participer à la conversation.

Commencez dès maintenant !

Créez simplement un compte et commencez à utiliser LimeSurvey dès aujourd'hui.

Inscrivez-vous maintenant

Inscrivez-vous à notre Newsletter!