Using Google Maps with Qualtrics 2

@Andrés Adiego Use browser developer tools to debug your code maybe throw some console log line t make sure it’s running properly

Hello @dxconnamnguyen

Thank you very much for your reply. Unfortunately I am not a programmer or developer, and I don't know how to handle the console and do that kind of checks. But if you explain me how to do something simple, I can try and tell you the results.

Thanks again for your interest, and I remain attentive if you can give me more indications.

Regards.

Hello again @dxconnamnguyen 

Looking in the browser console I found this message:

Google Maps JavaScript API has been loaded directly without a callback. This is not supported and can lead to race conditions and suboptimal performance. For supported loading patterns please see https://goo.gle/js-api-loading

I hope it will provide more information to be able to solve the problem.

Hello community,

I attach a screenshot of the console, with the detected problems. It seems that the problem may be related to the version of the APIs (?)

I appreciate any help to be able to solve it.

Thanks in advance

Hello Community,

I still need help with this problem.

With the code below, the map question was working fine, but after making some changes to the Qualtrics survey appearance, it stopped working.

Can someone explain to me if the changes to the appearance can affect the operation of the codes to load the map question?

I am using the "Mountain valleys" theme in the "Look and field" settings, and the "simple" layout. I removed the "Mountain valleys" theme, but it still doesn't work.

I also have the survey available in English and Spanish.

I have this code in the header section:

<script async src="https://maps.googleapis.com/maps/api/js?v=quarterly&key=MY_API_KEY"></script><script src="https://unpkg.com/qualtrics-google-map-lat-long@2.0.1/dist/QualtricsGoogleMap.min.js"></script>.

Where it says "MY_API_KEY", I put my key.

And this code in the map question:

Qualtrics.SurveyEngine.addOnload(function().

{

/*Place your JavaScript here to execute when the page loads*/.

initGoogleMapsQuestion(this.questionId, this.getQuestionContainer(), {

  // Map Options, set these! See Map Options in Option Documentation Section

  options: {

    center: {

      lat: -46.05,

      lng: -72.1833333333,

    },

    zoom: 9,

  },

  // Marker Options, set these!

  markers: [

    // First Marker

    {

      // See Marker Options in Option Documentation Section

      options: {

        title: "Marker 1",

        draggable: true,

        label: "1",

      },

    },

  ],

});

});

I remain attentive to your comments.

Thanks!

Hello @vgayraud 

Yes, the "Simple" layout prevents the code from executing properly. With the rest of the loyouts it works fine.

Thank you.

Hello,

I am also using Google maps API for my survey on Qualtrics. I fixed my previous codes yesterday (Nov 14, 2023) based on this topic and replies included. It worked well yesterday.

But after one night, my maps cannot load successfully. I think maybe the Qualtrics team upgraded the UI settings again? but I have confirmed I did not use the “simple” layout. 

For the header section, I used the code as mentioned in this topic:

<script async src="https://maps.googleapis.com/maps/api/js?v=quarterly&key=MY_API_KEY"></script><script src="https://unpkg.com/qualtrics-google-map-lat-long@2.0.1/dist/QualtricsGoogleMap.min.js"></script>.

This survey 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!