Loading external API(google maps) no longer working. | XM Community
Solved

Loading external API(google maps) no longer working.

  • 25 August 2023
  • 16 replies
  • 740 views
J
Rank
Userlevel 2
Badge +4

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.

icon

Best answer by Nam Nguyen 5 September 2023, 21:24

View original

16 replies

A
Badge

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

Nam Nguyen
Rank
Userlevel 7
Badge +20

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

-Nam Nguyen-
A
Rank
Userlevel 7
Badge +21

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.

J
Rank
Userlevel 2
Badge +4

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

A
Badge

@jmcmummey could you solve the problem?

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

J
Rank
Userlevel 2
Badge +4

@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

 

 

Nam Nguyen
Rank
Userlevel 7
Badge +20

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

 

-Nam Nguyen-
J
Rank
Userlevel 2
Badge +4

@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!

A
Badge

@jmcmummey Worked for me too. Many Thanks!

 

T
Badge

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!

 

J
Rank
Userlevel 2
Badge +4

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

 

A
Badge

Mine is broken too. 

J
Rank
Userlevel 2
Badge +4

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.

 

J
Rank
Userlevel 2
Badge +4

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.

A
Badge

Thanks @jmcmummey  worked for me too. 

S
Badge

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>

 

Leave a Reply


Terms & Conditions