A react-based component that displays an embedded Mapbox interface on Qualtrics.
The recent change (January 2024) disabled the use of removeChild
method on an HTMLElement that does not have a parent node, which made the previous Google Maps no longer work.
The early versions of v3 may have some bugs or unintended behaviors. Please report them via the issues if you find one.
- Collection of multiple answers to one question.
- e.g., "From:" and "To:"
- Use either the address bar with autocomplete or a map marker.
This library uses Mapbox API. If you do not have an account, please create one via the link.
After creating the account, please obtain the access token for this map via the account page.
Copy https://cdn.jsdelivr.net/gh/keita-makino/qualtrics-map/dist/bundle.js <- this address (not the contents of this address).
- In the survey edit screen, click "Look & Feel" on right-top.
- Select "General" tab and then edit the "Header".
- Click the "<>" icon to enter coding-view.
- Copy and paste the following code, replacing the
[apiKey]
and[fileUrl]
with respectively the API key and the URL that you copied above.
<script>
jQuery.noConflict();
var countryCode = '${loc://CountryCode}';
var postalCode = '${loc://PostalCode}';
</script><br />
<link href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" rel="stylesheet" type="text/css" />
<link href="https://api.mapbox.com/mapbox-gl-js/v3.1.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/keita-makino/qualtrics-map@3.0.1/dist/bundle.js"></script>
- The question that you want add the map has to be set as "Text Entry" + "Form" question.
- Add / remove text fields and set the field tag as you need. (e.g., Two text fields named "From:" and "To:").
- In the question, click the gear icon and then "Add Javascript..."
- Use the following code.
- If you need to set a default center location or zoom level, use the latter one.
- All done!
Qualtrics.SurveyEngine.addOnload(function () {
document
.getElementById(this.questionId)
.querySelectorAll('[role*=presentation]')[0].style.display = 'none';
});
Qualtrics.SurveyEngine.addOnReady(function () {
mapRender('the access token you copied from the account page', document.getElementById(this.questionId));
});
// If you need to set a default center
Qualtrics.SurveyEngine.addOnReady(function () {
mapRender('the access token you copied from the account page', document.getElementById(this.questionId), {
location: {
lat: 50,
lng: -100,
} // optional,
zoom: 12, // Optional
});
});