Migracja: moduł Map w google.load

13 października 2021 r. wyłączymy usługę udostępniającą moduł „Mapy” dla usługi google.load. Oznacza to, że po 13 października 2021 r., jeśli spróbujesz użyć w google.load modułu „Mapy”, pojawi się błąd (moduł „Mapy” nie jest obsługiwany) i nie uda się załadować mapy. Aby uniknąć potencjalnych problemów, musisz wybrać jedną z alternatywnych rozwiązań.

Co muszę zrobić?

Najpierw usuń tag <script>, który wczytuje ładowarkę google.load, a potem usuń wywołania do google.load. Jeśli używasz komponentu Google Loader do innych celów, możesz zostawić tag ładowania <script> na swoim miejscu.

Następnie wdrożyć nowy sposób wczytywania interfejsu Maps JavaScript API (wybierz jedną z tych opcji):

• Wczytywanie w tagu za pomocą tagu <script>
• Ładowanie dynamiczne z innego pliku JavaScript

Aktualny przykład użycia Google Loader

Poniższy przykład pokazuje, jak komponent Google Loader jest obecnie używany do wczytywania interfejsu Maps JavaScript API (są 2 bloki <script>):

Przed

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("maps", "3.exp", {
    "callback": initMap,
    "key": "YOUR_KEY",
    "libraries": "places,visualization"
});
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

Wczytywanie w tekście za pomocą tagu <script> (zalecane)

W takim przypadku interfejs Maps JavaScript API wczytuje się w tym samym czasie, co strona. Aby wdrożyć wczytywanie w ramach, najpierw zastąp tag <script>, który wczytuje www.google.com/jsapi („before”), tagiem <script> pokazanym w tym przykładzie:

<script async src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap">
</script>

Następnie w kodzie JavaScript usuń wywołanie funkcji google.load, ponieważ nie jest już potrzebne. Ten przykład pokazuje pustą funkcję initMap(), która jest wywoływana po udanym załadowaniu biblioteki Map:

<script type='text/javascript'>
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

Zapoznaj się z dokumentacją

dynamiczne wczytywanie z innego pliku JavaScript;

Dynamiczne wczytywanie umożliwia kontrolowanie, kiedy wczytywane jest interfejs Maps JavaScript API. Możesz na przykład poczekać z wczytaniem interfejsu Maps JavaScript API, aż użytkownik kliknie przycisk lub wykona inną czynność. Aby zaimplementować wczytywanie dynamiczne, najpierw zastąp tag <script>, który wczytuje www.google.com/jsapi („przed”), kodem, który dodaje tag <script> programowo, jak pokazano w tym przykładzie:

var script = document.createElement('script');
script.src =
'https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap';
script.async=true;

Następnie dodaj funkcję wywołania zwrotnego do obiektu okna w ten sposób:

window.initMap = function() {
  // Google Maps JS API is loaded and available
};

Na koniec dodaj tag <script> do nagłówka strony w ten sposób:

document.head.appendChild(script);

Zobacz dokumentację