Проблемы с агентом построителя платформы Google Maps? ⇐ Javascript

[Anonymous]

Я только начал использовать агент Google Maps Platform Builder (https://developers.google.com/maps/ai/b ... h-ai?hl=en), это потрясающе. Несколько лет назад я создал карту группы специалистов по всему миру, которую затем можно было искать по местоположению и некоторым другим критериям. Это сработало хорошо, но затем, учитывая несколько новых требований, я решил попробовать Builder Agent (BA). Примерно за полчаса я создал новую функциональность поверх уже существующей, предъявив БА всего лишь несколько подробных требований. Я был глубоко впечатлен и задумался об изменениях на рынке программирования.
Затем пришло время, когда я захотел перейти с BA на существующий веб-сайт, и с тех пор я ходил по кругу. Либо я что-то упускаю (вполне вероятно), либо есть проблема с кодом, созданным BA?
Поэтому, чтобы попытаться проиллюстрировать тип проблем, с которыми я столкнулся, я создал простую карту с диалоговым окном автозаполнения, в котором вы можете ввести часть названия местоположения, а затем выбрать местоположение из списка опций карты Google. Затем карта перерисовывается в этом месте. Это отлично работает в BA, но после вставки в тестовую программу на моем исходном веб-сайте я застреваю в бесконечных циклах IdentifierXhasalreadybeendeclared и document.querySelector, возвращающих неопределенное значение (я пробовал добавить 'await', который "Использование await приостанавливает выполнение окружающей его функции async до тех пор, пока обещание не будет выполнено (то есть выполнено или отклонено)".
Если кто-нибудь может указать на мои ошибки, или разумный подход к решению, как правильно перенести из БА в актуальность, буду премного благодарен.
HTML



Map with Autocomplete and Reliable Centering
















script.js
All globally declared variables cause IdentifierXhasalreadybeendeclared errors
const placeAutocompleteElement = document.querySelector('gmp-basic-place- autocomplete');

const gmpMapElement = document.querySelector('gmp-map');
// gmpMapElement remains undefined
const markers = [];
let infoWindow;

async function initMap() {
await google.maps.importLibrary('places'); // Uncaught (in promise) ReferenceError: google is not defined
const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
const { InfoWindow } = await google.maps.importLibrary('maps');

const map = gmpMapElement.innerMap;
// cannot get innerMap as gmpMapElement undefined
map.setOptions({
clickableIcons: false,
mapTypeControl: false,
streetViewControl: false,
});

infoWindow = new InfoWindow();

placeAutocompleteElement.addEventListener('gmp-select', async (event) => {
const place = event.place;
// Ensure we have a place with an ID before proceeding.
if (!place.id) {
return;
}

// Fetch the necessary fields, including location.
await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

// Now that fields are fetched, check for location.
if (!place.location) {
return;
}

const newMarker = new AdvancedMarkerElement({
map: map,
position: place.location,
title: place.displayName,
});

newMarker.addListener('click', () => {
infoWindow.close();
infoWindow.setContent(`${place.displayName}
${place.formattedAddress}`);
infoWindow.open(map, newMarker);
});

markers.push(newMarker);

// Update the gmp-map element's properties directly for robust centering.
gmpMapElement.center = place.location;
gmpMapElement.zoom = 8;
});

map.addListener('click', () => {
infoWindow.close();
});
}

// Commented out from BA generated code as using the explicit callback=initMap variant of script
// initMap();

CSS
html,
body {
height: 100%;
margin: 0;
padding: 0;
}

gmp-map {
height: 100%;
}

gmp-basic-place-autocomplete {
position: absolute;
height: 30px;
width: 500px;
top: 10px;
left: 10px;
box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);
color-scheme: auto;
border-radius: 10px;
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... ent-issues