Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Detect Google Map selection and do calculations with input

  • Rallard
  • Rallard's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
10 years 10 months ago - 10 years 10 months ago #96210 by Rallard
Hi everyone,

I can find little on using the Google maps API, but I've been able to setup the maps API to show a region of interest,and accept input from the user. It seems as if the location selected cannot be detected in the Expression manager (I tried using an Equation Question) until the "Next" button is pressed (assuming user actually selected a location). However I want to be able to validate the choice before the user proceeds to the next page (basically measuring the distance between the point chosen in one map and that chosen in another). So

How can I read the value of the location chosen on the map with an event such as Onclick or Onchange? I've tried:
Code:
$('input[id="answer{SGQ}"]').change(function() {
   // code
});

as well as
Code:
document.getElementById('gmap_canvas_SSSSSSXGGXQQ_c').click(function() {
   //code
});

but nothing happens (even inside the
Code:
$(document).ready()
)

R

LimeSurvey
Version 2.00+ Build 130514
Last edit: 10 years 10 months ago by Rallard.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 10 months ago #96236 by tpartner
Try something like this:
Code:
<script type="text/javascript" charset="utf-8">  
  $(document).ready(function(){
 
    window.setTimeout(function() { // A little time for the map to initialize
 
      var mapSGQA = {SGQ};
 
      // Define the map and marker
      var currentMap = gmaps[''+mapSGQA+'_c'];
      var currentMarker = gmaps['marker__'+mapSGQA+'_c'];
 
      // Listener on the map "click" event
      google.maps.event.addListener(currentMap, 'click', function() {
        alert(currentMarker.getPosition());
      });
 
    }, 1000);
 
 
  });
</script>

developers.google.com/maps/documentation...vents#EventListeners

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • Rallard
  • Rallard's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
10 years 10 months ago #96455 by Rallard
Thanks Tony, that's helpful. (I had to change this line to include quotes as shown:
Code:
var mapSGQA = '{SGQ}';

But anyway, it works as it was expected to work, that is, if a user just Clicks on the map, then the code runs, however when selecting a location, users rarely just click on the map in this way, generally they'd either scroll right to the desired location and Drag the marker to there (doesn't count for the Click event) or they'd Right Click to place the marker at the desired location (also doesn't count). I didn't see an event for either of these actions on the Google Developer page. If you have any idea, please let me know.

Also, I am trying to add a search bar for geocoding addresses. The code I entered for some reason, changes the page to go to the Limesurvey Welcome page (where you choose your language and select available surveys on my host). This happens whether or not I enter an address in the search bar. Any ideas?
Code:
<input id="search_address" type="text" value="" /><button onclick="search()">Search</button>
 
<script type="text/javascript">
var addressField = document.getElementById('search_address');
var geocoder = new google.maps.Geocoder();
 
function search() {
  geocoder.geocode(
        { 'address': addressField.value }, 
        function(results, status) { 
            if (status == google.maps.GeocoderStatus.OK) { 
                var loc = results[0].geometry.location;
                // use loc.lat(), loc.lng()
                alert(loc.lat());
            } 
            else {
                alert("Not found: " + status); 
            } 
        }
    );
};
</script>

R

LimeSurvey
Version 2.00+ Build 130514
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
10 years 10 months ago - 10 years 10 months ago #96466 by tpartner

...generally they'd either scroll right to the desired location and Drag the marker to there (doesn't count for the Click event) or they'd Right Click to place the marker at the desired location...

Well, you did ask for an "Onclick" event listener. You can also use the "dragend" and "rightclick" events.

Code:
<script type="text/javascript" charset="utf-8">  
  $(document).ready(function(){
 
    window.setTimeout(function() { // A little time for the map to initialize
 
      var mapSGQA = '{SGQ}';
 
      // Define the map and marker
      var currentMap = gmaps[''+mapSGQA+'_c'];
      var currentMarker = gmaps['marker__'+mapSGQA+'_c'];
 
      google.maps.event.addListener(currentMarker, 'dragend', function() {
        alert(currentMarker.getPosition());
      });
 
      google.maps.event.addListener(currentMap, 'rightclick', function() {
        alert(currentMarker.getPosition());
      });
 
    }, 1000);
  });
</script>

What are you trying to achieve with the search bar?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 10 years 10 months ago by tpartner.
The following user(s) said Thank You: Rallard
The topic has been locked.
  • Rallard
  • Rallard's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
10 years 10 months ago #96468 by Rallard
True true, you're right I did ask for onclick last week, I was a confused Padawan back then.

I'll play around with dragend. Thanks.

The search bar is to help find the locations faster (I was only testing with the command I placed in the code). The map starts on zoom level 5 which shows countries. Some users will find it easier to just type-search rather than use the mouse, others will only use the mouse. It's better to provide both options in my opinion.

The combined operation I envision is: "1" and "2" are optional for user
1- user types general area or street or city of interest in search box
2- search bar centres map at this location, then zooms to an appropriate level, but does not place marker
3- user then pans and zooms to specific location and places marker manually (right click event)
4- on right click the map does calculations on the location coordinates (distance from a prior point) and places a message to right of map, such as within this <div class="question answer-item geoloc-item "> (I also haven't figured out this part as yet). Actually I'd like to place the search box/button in this whitespace. I suppose I have to appendchild to that <div>? How?

R
The topic has been locked.
More
10 years 1 month ago - 10 years 1 month ago #104880 by dweisser
Hi there,
I get the alert to state the most current lat/long of the new marker location after the Respondent moves it. Thank you. But how do you "do the math" between map points? I would like to be able to record the driving the distance between the default map position and the markers final location.

Also, did you ever get the search box into the map?

Any thoughts would be much appreciated.
David
Last edit: 10 years 1 month ago by dweisser.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose