Welcome, Guest
Username: Password: Remember me

TOPIC: Detect Google Map selection and do calculations with input

Detect Google Map selection and do calculations with input 1 year 2 months ago #96210

  • Rallard
  • Rallard's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 5
  • Karma: 0
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:
$('input[id="answer{SGQ}"]').change(function() {
   // code
});

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

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

R

LimeSurvey
Version 2.00+ Build 130514
Last Edit: 1 year 2 months ago by Rallard.
The administrator has disabled public write access.

Detect Google Map selection and do calculations with input 1 year 2 months ago #96236

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4049
  • Thank you received: 739
  • Karma: 341
Try something like this:
<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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Detect Google Map selection and do calculations with input 1 year 1 month ago #96455

  • Rallard
  • Rallard's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 5
  • Karma: 0
Thanks Tony, that's helpful. (I had to change this line to include quotes as shown:
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?
<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 administrator has disabled public write access.

Detect Google Map selection and do calculations with input 1 year 1 month ago #96466

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4049
  • Thank you received: 739
  • Karma: 341
...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.

<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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 1 year 1 month ago by tpartner.
The administrator has disabled public write access.
The following user(s) said Thank You: Rallard

Detect Google Map selection and do calculations with input 1 year 1 month ago #96468

  • Rallard
  • Rallard's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 5
  • Karma: 0
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 administrator has disabled public write access.

Detect Google Map selection and do calculations with input 5 months 1 week ago #104880

  • dweisser
  • dweisser's Avatar
  • OFFLINE
  • Bronze Donor
  • Posts: 196
  • Thank you received: 5
  • Karma: 5
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: 5 months 1 week ago by dweisser.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.140 seconds
Donation Image