Я мигрирую в Googles New Places Auto Auto. Я пытаюсь загрузить сценарий, используя рекомендованный Google метод для загрузки. Они говорят, что есть 3 способа загрузить карту < /p>
Использовать импорт динамической библиотеки. < /P>
< /li>
Используйте тиг прямого сценария. /> < /ol>
Я сосредоточен на первых двух. Раньше он работал в рамках сценария устаревшего (не уверен, что он был перенесен на новые места API).
Мне нужно использовать вариант второй, потому что я хочу динамически загрузить скрипт только при использовании. В этом вопросе я был сосредоточен на том, как динамически загружать карты Google в той точке, когда пользователю необходимо использовать карту. < /P>
Этот вопрос не имеет ничего общего с динамической загрузкой карты. Вопрос сосредоточен на том, как загрузить Googles New Auto Complete Map, используя опцию 2 (прямая загрузка скрипта). Как объяснено, прямая загрузка сценария работает в соответствии с устаревшим кодом, но не новым Google Auto завершен.
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "YOUR_API_KEY",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
Это пример опции 2 Прямая загрузка:
И это полный пример того, как я смог загрузить с помощью динамического импорта библиотеки (опция One):
html:
Place Autocomplete element
Search for a place here:
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "MYKEY", v: "weekly"});
js
async function initMap() {
await google.maps.importLibrary("places");
const country = 'uk'
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
const card = document.getElementById('place-autocomplete-card');
card.appendChild(placeAutocomplete);
document.body.appendChild(selectedPlaceInfo);
placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
const place = placePrediction.toPlace();
console.log('places return', place);
await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location','addressComponents'] });
});
}
initMap();
< /code>
Когда я использовал один и тот же сценарий выше, но измените скрипт на вариант два, т.е. < /p>
< /code>
Я получил следующие сообщения об ошибках: < /p>
- Uncaught (in promise) ReferenceError: google is not defined
- Uncaught (in promise) InvalidValueError: initMap is not a function
Подробнее здесь: https://stackoverflow.com/questions/796 ... -auto-comp
