Did anyone find a way to include a "Place search box" inside a question that uses Google Maps? It would be really helpful if the functionality shown here can be used to obtain the latitude-longitude values from a Google Maps Limesurvey question without the necessity to move around the map manually.

Is there a way to add the google search bar in the version 2.06?

Can you explain more? Add a search bar to what?

Thank you for your prompt reply.

What we mean is to have a search bar that will allow survey participant to enter their location and the map will show the specific location in google map.

Right now we use a short text question and enable the google map but the survey participant will need to drag the map to go to his/her location which consume a lot of time unlike if you have a search bar you will just type your address and your location will be display.

Thnaks a lot

LimeSurvey uses Google Maps API v3 so, as stated earlier in this thread, the Google Bar (search bar) doesn't exist. You will need to do the search with an AJAX call to the Google Places API - developers.google.com/places/?csw=1

hello, .i am trying to do a survey for my master thesis..

is it easy to explain me how to add a search box in a question with google maps so i can type my adress and my location be displayed..? i am new here and i dont have so much knowledge...

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!

Do you know how to do it? I need to do the same....

Thanks in advance.-

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.
   
   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="http://maps.googleapis.com/maps/api/js?libraries=places&amp;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

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.

Posting an up-vote on this -- would be a very useful question type.

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