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
Topic Author
Offline
New Member

More

11 years 6 months ago - 11 years 6 months ago #96210 by Rallard

Detect Google Map selection and do calculations with input was created 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: 11 years 6 months ago by Rallard.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

11 years 6 months ago #96236 by tpartner

Replied by tpartner on topic Detect Google Map selection and do calculations with input

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
Topic Author
Offline
New Member

More

11 years 6 months ago #96455 by Rallard

Replied by Rallard on topic Detect Google Map selection and do calculations with input

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
Offline
LimeSurvey Community Team

More

11 years 6 months ago - 11 years 6 months ago #96466 by tpartner

Replied by tpartner on topic Detect Google Map selection and do calculations with input

...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: 11 years 6 months ago by tpartner.

The following user(s) said Thank You: Rallard

The topic has been locked.

Rallard
Topic Author
Offline
New Member

More

11 years 6 months ago #96468 by Rallard

Replied by Rallard on topic Detect Google Map selection and do calculations with input

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.

dweisser
Offline
Premium Member

More

10 years 10 months ago - 10 years 10 months ago #104880 by dweisser

Replied by dweisser on topic Detect Google Map selection and do calculations with input

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 10 months ago by dweisser.

The topic has been locked.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Detect Google Map selection and do calculations with input

Lime-years ahead

Legal

About Us

Open Source