qualtrics-map

A react-based component that displays an embedded Google Maps in Qualtrics.

Features

• Collection of multiple answers in one question.
  • e.g., "From:" and "To:"
• Use either of address bar with autocomplete or map marker.

Installation

Google Maps API

This library uses Google Geocoding API, Maps Javascript API, and Places API.
Make sure you have a key to access those APIs.

Option 1 (use CDN)

Option 2 (manual upload)

Header settings

1. In the survey edit screen, click "Look & Feel" on right-top.
2. Select "General" tab and then edit the "Header".
3. Click the "<>" icon to enter coding-view.
4. Copy and paste the following code, replacing the [apiKey] and [fileUrl] with respectively the API key and the URL that you copied above.

<script>
  var apiKeyGoogleMap = '[apiKey]';
  var countryCode = '${loc://CountryCode}';
  var postalCode = '${loc://PostalCode}';
</script><br />
<script src="[fileUrl]"></script>

Use it

1. The question that you want add the map has to be set as "Text Entry" + "Form" question.
2. Add / remove text fields and set the field tag as you need. (e.g., Two text fields named "From:" and "To:").
3. In the question, click the gear icon and then "Add Javascript..."
4. Use the following code.
5. If you need to set a default center location, use the latter one.
6. All done!

Qualtrics.SurveyEngine.addOnload(function () {
  document
    .getElementById(this.questionId)
    .querySelectorAll('[role*=presentation]')[0].style.display = 'none';
});

Qualtrics.SurveyEngine.addOnReady(function () {
  mapRender(apiKeyGoogleMap, document.getElementById(this.questionId));
});

// If you need to set a default center
Qualtrics.SurveyEngine.addOnReady(function () {
  mapRender(apiKeyGoogleMap, document.getElementById(this.questionId), {
    location: {
      lat: 50,
      lng: -100,
    },
    zoom: 12, // Optional
  });
});