- Posts: 5
- Thank you received: 0
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
Less
More
10 years 10 months ago - 10 years 10 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:
as well as
but nothing happens (even inside the
)
R
LimeSurvey
Version 2.00+ Build 130514
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10632
- Thank you received: 3697
10 years 10 months ago #96236
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Detect Google Map selection and do calculations with input
Try something like this:
developers.google.com/maps/documentation...vents#EventListeners
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
Less
More
- Posts: 5
- Thank you received: 0
10 years 10 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:
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?
R
LimeSurvey
Version 2.00+ Build 130514
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
Less
More
- Posts: 10632
- Thank you received: 3697
10 years 10 months ago - 10 years 10 months ago #96466
by tpartner
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.
Replied by tpartner on topic Detect Google Map selection and do calculations with input
Well, you did ask for an "Onclick" event listener. You can also use the "dragend" and "rightclick" events....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...
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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 5
- Thank you received: 0
10 years 10 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
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
Less
More
- Posts: 153
- Thank you received: 5
10 years 1 month ago - 10 years 1 month 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
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.