Hey there, I'm new to working with SurveyJS and I'm trying to incorporate a Google Map widget into my SurveyJS.
I followed some steps and successfully added the map in the Survey Designer section, but unfortunately, it's not loading in the Test Survey section.
I've included the relevant codes and images below. Would appreciate any guidance on this issue.
Thank you!
angular: ^7.3.9,
survey-analytics: ^1.7.26,
survey-angular: ^1.8.70,
survey-creator: ^1.8.70,
survey-knockout: ^1.8.70 ,
survey-pdf: ^1.8.70,
surveyjs-widgets: ^1.8.70,
fileName: mapWidget.ts
import { Loader } from "@googlemaps/js-api-loader";
export function init(Survey: any) {
var widget = {
name: "googlemap",
title: "google map survey",
iconName: "my-custom-icon",
init() {},
widgetIsLoaded: function () {
return true;
},
isFit: function (question: any) {
let type = question.getType();
return type === "googlemap";
},
activatedByChanged: function (activatedBy) {
Survey.JsonObject.metaData.addClass("googlemap", [], null, "text");
Survey.JsonObject.metaData.addProperties("googlemap", [
{ name: "lat", default: 29.635703 },
{ name: "lng", default: 52.521924 },
]);
createProperties(Survey);
},
isDefaultRender: false,
htmlTemplate:
"<div class='custom-tessting-input' id='google-map-design'></div>",
afterRender: function (question: any, element: any) {
debugger;
var findDiv = document.getElementById("google-map-design");
findDiv.style.height = "500px";
findDiv.style.width = "100%";
let loader = new Loader({
apiKey: "xxxxxxxxxxx",
});
loader
.load()
.then((google) => {
new google.maps.Map(document.getElementById("google-map-design"), {
center: { lat: question.lat, lng: question.lng },
zoom: 6,
});
})
.catch((err) => {});
},
};
Survey.CustomWidgetCollection.Instance.add(widget, "customtype");
}
function createProperties(Survey) {
var props = createGeneralProperties(Survey);
return props;
}
function createGeneralProperties(Survey) {
return Survey.Serializer.addProperties("googlemap", [
{
name: "latitude:textbox",
category: "general",
default: "29.635703",
},
{
name: "longitude:textbox",
category: "general",
default: "52.521924",
},
]);
}
fileName: survey.creator.component.ts
//...
import { init as initGoogleMapWidget } from "./mapWidget";
...
initGoogleMapWidget(SurveyKo);
//...
fileName: survey.component.ts
//...
import { init as initGoogleMapWidget } from "./mapWidget";
...
initGoogleMapWidget(SurveyKo);
//...