Loading external API(google maps) no longer working. | XM Community
Skip to main content

I have been developing a survey with a page that presents the user with a google maps image based on their input area code.  It was looking great until this week (AUGUST 21, 2023) when the map api no longer appears to be capable of loading (I’m getting now key errors).  I’ve validated my maps key running a page hosted locally on my computer, but I can’t get even a simple map to load in qualtrics.  Has something changed?  This is a mission critical component.  

My code follows:

question html

<head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://d1kyp0vfgurfeq.cloudfront.net/index_mapsv3.js"></script>
    <script src='https://maps.googleapis.com/maps/api/js?key=MYAPICODE&callback=initMap'></script>
  </head>
  <body>
    <div id="map" style="width:800px;height: 500px;margin:auto;align-items: center;">Map Here</div>

  </body>

index_mapv3.js (distributed on AWS cloudfront)

let map;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

   // The map, centered on input address
   var map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

}

then my javascript for this question is:

Qualtrics.SurveyEngine.addOnReady(function()
{
	initMap();
});

 

Any help would be MASSIVELY appreciated.

I got the same issue and this is very critical for my project.
does anyone know how to solve this?

@jmcmummey @Amin If everything work fine outside of Qualtrics, maybe something did change with the platform. I suggest you guys to contact Qualtrics support team for more solution.

Qualtrics often strips out script tags from the question html. 

That could be one reason. Move them to the header, maybe then things will work.

@ahmedA Have tried with the header in both places, but get the same results.  This is with code that was working fine a few weeks ago.

@jmcmummey could you solve the problem?

in my case, the address bar works while the map is not loading!!!

@Amin   no, have not gotten it to work. am trying to reach support at qualtrics, but its challenging actually communicating with someone about custom code support

 

 

@jmcmummey @Amin Check out this topic, it might be relevant: 

 

@Amin @dxconnamnguyen Switching my invocation to the async script , that is:

from 

<script src='https://maps.googleapis.com/maps/api/js?key=MYAPICODE&callback=initMap'></script>

to 

<script async src="https://maps.googleapis.com/maps/api/js?v=quarterly&key=MY_API_KEY"></script>

Fixed it!

@jmcmummey Worked for me too. Many Thanks!

 

Hello,

I revised my header code according to this reply and it worked well yesterday, but after one night, things changed. My map cannot load successfully. I have confirmed that I did not choose “simple” layout and my java script for survey question part is correct, because it can work yesterday. 

This survey with Google Map API is for my dissertation research, so this will be a very pressing issue. I will really appreciate that if someone could help me! I will also try to contact Qualtrics Support but because it is a custom code problem, it might be very hard to ask for help from them. 

Thank you!

@Amin @dxconnamnguyen Switching my invocation to the async script , that is:

from 

<script src='https://maps.googleapis.com/maps/api/js?key=MYAPICODE&callback=initMap'></script>

to 

<script async src="https://maps.googleapis.com/maps/api/js?v=quarterly&key=MY_API_KEY"></script>

Fixed it!

 

Mine code also broke last night.  I’m looking into this now

 

Mine is broken too. 

I called Qualtrics and was told that they don’t support custom code.  Things are working fine when I run the code locally, so I definitely think it’s a qualtrics push that broke it.

 

Ok.  I have resolved the issue.  The problem is that Qualtrics is overriding Array.from() - see: https://stackoverflow.com/questions/76955952/array-from-with-an-implementation-that-doesnt-support-iterables-google-maps

When the quarterly version turned over recently, it broke the survey because it moved to the google javascript api version 3.54 (or higher).  To get my code working I used:

 

<script async src="https://maps.googleapis.com/maps/api/js?v=3.53&key=MY_API_KEY"></script>

Unfortunately, I believe that this will no longer be supported after April 2024, so Qualtrics will have to modify the code on their end to allow google maps api.

Thanks @jmcmummey  worked for me too. 

Hi @jmcmummey

Thanks for the solution it solved my issue.

However, I think the code needs a slight adjustment since you haven't used the places library. So, I think the below code might work better in this case:

<script async src="https://maps.googleapis.com/maps/api/js?v=3.53&libraries=places&key={API KEY}"></script>

 

Just looking to see if there was any resolution to this issue. Attempting to implement this JS question in a survey now and running into issues given that we are past April of 2024. Has anyone been able to resolve this to get it working? 

Ok.  I have resolved the issue.  The problem is that Qualtrics is overriding Array.from() - see: https://stackoverflow.com/questions/76955952/array-from-with-an-implementation-that-doesnt-support-iterables-google-maps

When the quarterly version turned over recently, it broke the survey because it moved to the google javascript api version 3.54 (or higher).  To get my code working I used:

 

<script async src="https://maps.googleapis.com/maps/api/js?v=3.53&key=MY_API_KEY"></script>

Unfortunately, I believe that this will no longer be supported after April 2024, so Qualtrics will have to modify the code on their end to allow google maps api.

 

Leave a Reply


Terms & Conditions