I'm a newcomer to SurveyJS. I want to add Google Map as a widget to SurveyJS.
I did some steps and the map was added correctly in the Survey Designer section, but it does not load my widget in the Test Survey section.
I have uploaded the codes and images below
please guide me
Thanks
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);
//...
