Установка начального адреса для Google Plates PlateAutoCopleteeElement ⇐ Javascript

[Anonymous]

Поскольку Google установил свои старые места для автоматического API в марте 2025 года, мы преобразовались в более новый API. Я публикую это, потому что я нигде не видел ответа и потратил немного времени, выясняя это. Если у кого -то есть лучшее решение, пожалуйста, опубликуйте. < /P>
Это код, который я наконец -то получил. < /P>



Initial Google PlaceAutocompleteElement

(g => { var h, a, k, 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(" 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: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", v: "weekly" });


#myWrapper {
width: 800px;
height: 400px;
background-color: #ddf;
padding: 1em;
border: 2px solid #1d4969
}

#container {
width: 700px;
height: 60px;
}

#container pre {
max-height: 300px;
}

#container .widget-container {
height: 100px;
}
h4 { margin-top:60px; }





Search for a place:

Result:

"use strict";
/*
* @license
* Copyright 2025 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/

// https://developers.google.com/maps/docu ... mplete-new
// Based on https://jsfiddle.net/gh/get/library/pur ... t/jsfiddle

async function initMap() {
// Request needed libraries
await google.maps.importLibrary("places");

// Create the input HTML element
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

// Get the container element and append the autocomplete
const containerElem = document.getElementById('container');
containerElem.appendChild(placeAutocomplete);

// Add the gmp-placeselect listener, and display the results
placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
const place = placePrediction.toPlace();
await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

// Update results
document.querySelector('pre.results').textContent =
JSON.stringify(place.toJSON(), /* replacer */ null, /* space */ 2);
});
}

// Finds and sets input field inside div#container gmp-place-autocomplete
function setMapInput(theLocation) {
// Find the custom element google mapping element
const customElement = document.querySelector('#container gmp-place-autocomplete');

if (!customElement) {
console.log('gmp-place-autocomplete not found in #container');
return;
}

// "Og" is the dom element created by Google Maps PlaceAutocompleteElement that contains the input field we want to update.
// Hopefully this does not change.
const inputField = customElement.Og.querySelector('input');
if (inputField) {
inputField.value = theLocation;

// Trigger an input event for potential listeners if you want to show the suggestions
// const inputEvent = new Event('input', { bubbles: true });
// inputField.dispatchEvent(inputEvent);
}
}

// Page loaded
document.addEventListener('DOMContentLoaded', function () {
// Start map initialization
initMap()
.then(() => {
setMapInput('2401 Ontario Street Cleveland');
})
.catch(error => {
console.error("Error initializing map:", error);
});
});






Подробнее здесь: https://stackoverflow.com/questions/796 ... eteelement