Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:

THEMA: Ability to add Google Maps as a question

Re: Ability to add Google Maps as a question 2 Monate 1 Woche her #104986

  • tpartner
  • tpartners Avatar
  • ONLINE
  • LimeSurvey Team
  • Beiträge: 3813
  • Dank erhalten: 683
  • Karma: 328
Well, I didn't have much time to spend on this but here's a quick-and-dirty example of how to calculate the distance and travel time from the "Default position" using the Google Maps API v3 Distance matrix.

Place this in the question source.
<script type="text/javascript" charset="utf-8">	
 
	$(document).ready(function(){
 
		// Identify the map
		var mapSGQA = '{SGQ}';
		var currentMap = gmaps[''+mapSGQA+'_c'];
 
		// Wait for the map to load
		google.maps.event.addListenerOnce(currentMap, 'idle', function(){ 
 
			// Some variable definitions
			var currentMarker = gmaps['marker__'+mapSGQA+'_c'];
			var answerInput = $('#answer'+mapSGQA+'_c');
			var defaultPosition = $(answerInput).val();
			var startLat = $('#answer'+mapSGQA+'_c').val().split(' ')[0];
			var startLng = $('#answer'+mapSGQA+'_c').val().split(' ')[1];
			var startLatLng = new google.maps.LatLng(startLat, startLng);
			var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
 
 
			// Listener on the map events
			google.maps.event.addListener(currentMap, 'click', function() {
				calculateDistances(startLatLng, currentMarker.getPosition());
			});
			google.maps.event.addListener(currentMarker, 'dragend', function() {
				calculateDistances(startLatLng, currentMarker.getPosition());
			});
			google.maps.event.addListener(currentMap, 'rightclick', function() {
				calculateDistances(startLatLng, currentMarker.getPosition());
			});
 
			// Insert the results element
			$(answerInput).after('<div class="distanceResults" />');
 
		});
	});
 
	function calculateDistances(origin, destination) {
		var service = new google.maps.DistanceMatrixService();
		service.getDistanceMatrix({
			origins: [origin],
			destinations: [destination],
			travelMode: google.maps.TravelMode.DRIVING,
			unitSystem: google.maps.UnitSystem.METRIC,
			avoidHighways: false,
			avoidTolls: false
		}, callback);
	}
 
	function callback(response, status) {
		if (status != google.maps.DistanceMatrixStatus.OK) {
			alert('Error was: ' + status);
		} else {
			var origins = response.originAddresses;
			var destinations = response.destinationAddresses;
 
			var outputDiv = $('.questiontext');
			outputDiv.innerHTML = '';
 
			for (var i = 0; i < origins.length; i++) {
				var results = response.rows[i].elements;
				for (var j = 0; j < results.length; j++) {
					$('.distanceResults').html('Start address: '+origins[i]+'<br />\
												End address: '+destinations[j]+'<br />\
												Distance: '+results[j].distance.text+'<br />\
												Time: '+results[j].duration.text+'');
				}
			}
		}
	}
</script>

Demo survey:

Dateianhang:

Dateiname: travel_distance_v2.lss
Dateigröße: 15 KB

Capture1.png







.
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.
Letzte Änderung: 2 Monate 1 Woche her von tpartner.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Ability to add Google Maps as a question 2 Monate 1 Woche her #105001

  • dweisser
  • dweissers Avatar
  • OFFLINE
  • Silver Donor
  • Beiträge: 182
  • Dank erhalten: 5
  • Karma: 5
Hey T,
This is great. I think there are a lot of directions one could go here.

I was working on this, but instead of using the short-text Map-style question, I ended up showing a map inside a short-text text-style question. It is not optimal because the style requirements were pretty hard to work with, however I was able to save the calculated distance as the question's answer.

I assume that this is what this does:
// Insert the results element
$(answerInput).after('<div class="distanceResults" />');

I suppose the "benefit" of using the external map rather than the short-text map-style question is that it might be more easy to implement driving directions, location search and things of that nature. Or is it?

Your solution is really great. Thank you as always for relentlessly adding to the knowledge base.

David
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Re: Ability to add Google Maps as a question 2 Monate 1 Woche her #105002

  • tpartner
  • tpartners Avatar
  • ONLINE
  • LimeSurvey Team
  • Beiträge: 3813
  • Dank erhalten: 683
  • Karma: 328
Yes, of course, this could be applied to any map. I just used the LimeSurvey map because it was faster.



.
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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Moderatoren: ITEd
Ladezeit der Seite: 0.242 Sekunden
Donation Image