Migracja: moduł Map w google.load

13 października 2021 r. wyłączymy usługę google.load, która zawiera moduł „Mapy”. Oznacza to, że po 13 października 2021 r. przy próbie użycia modułu „Mapy” w aplikacji google.load pojawi się błąd (moduł „mapy” nie jest obsługiwany) i mapa nie zostanie wczytana. Aby uniknąć potencjalnych problemów, musisz wybrać jedną z opcji alternatywnych.

Co muszę zrobić?

Najpierw usuń tag <script>, który wczytuje tag wczytywania google.load, a następnie usuń wywołania google.load. Jeśli używasz wtyczki Google Loader do innych celów, możesz zostawić tag wczytujący <script>.

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

Aktualny przykład z wykorzystaniem wtyczki Google Loader

Poniższy przykład pokazuje, w jaki sposób moduł ładowania Google jest obecnie używany do wczytywania interfejsu Maps JavaScript API (istnieją 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>

W takim przypadku interfejs Maps JavaScript API wczytuje się podczas wczytywania strony. Aby zaimplementować wczytywanie bezpośrednie, najpierw zastąp tag <script>, który wczytuje stronę 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. Poniższy przykład pokazuje pustą funkcję initMap(), która jest wywoływana po pomyślnym wczytaniu biblioteki Map:

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

Zobacz dokumentację

Dynamiczne ładowanie z innego pliku JavaScript

Dynamiczne ładowanie pozwala określić, kiedy interfejs Maps JavaScript API ma być wczytywany. Na przykład możesz poczekać, aż interfejs Maps JavaScript API zostanie wczytany, aż użytkownik kliknie przycisk lub wykona inne działanie. Aby zaimplementować dynamiczne wczytywanie, zastąp tag <script>, który wczytuje stronę www.google.com/jsapi („before”), kodem, by automatycznie dodać tag <script>, tak jak 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 dołącz funkcję wywołania zwrotnego do obiektu window w następujący sposób:

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

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

document.head.appendChild(script);

Zobacz dokumentację