Как получить значение из окна поиска Google Maps и нажать на новый тег div?

Question

Я новичок в кодировании в целом, но у меня есть вопрос, касающийся того, как получить значение из окна поиска Google Maps, чтобы попытаться, а затем динамически создать тег div, который будет отображать строку со значением того, что было введено вокно поиска.

Я пытался создать событие .onclick(), но оказалось бесполезным, поскольку в окне поиска не требуется кнопка отправки для поиска результатов.

// Adding event listener for when user clicks the add-bttn
$("#search").on("click", function() {

// variable for using the search functionality and adding it to the itinerary for the first day
var itineraryInput = $("#form-control").val();

console.log(itineraryInput);

})


.then(function() {

    var row = $("<div>");
    row.addClass("attraction");

    row.append("<p>" + itineraryInput + "</p>");


    $("#trans_first").prepend(row);
});

ошибка, с которой я сталкиваюськонсоль:

Uncaught TypeError: $ (...). on (...). затем не является функцией.

Я просто хочу получить значение из окна поиска, но понятия не имею, как получить этот результат.