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.