13 października 2021 r. wyłączymy usługę, która udostępnia moduł „Mapy” w domenie google.load
.
Oznacza to, że jeśli po 13 października 2021 r. spróbujesz użyć modułu „Mapy” w aplikacji google.load
, pojawi się błąd (moduł „mapy” nie jest obsługiwany) i żadna mapa nie zostanie wczytana. Aby uniknąć potencjalnych problemów, musisz wybrać jedną z alternatywnych opcji.
Co muszę zrobić?
Najpierw usuń tag <script>
, który wczytuje ładunek google.load
, a potem usuń wywołania google.load
. Jeśli używasz wtyczki Google Loader do innych celów, możesz zostawić tag wczytywania <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 komponent Loader 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>
Wczytywanie bezpośrednie za pomocą tagu <script>
(zalecane)
W takim przypadku interfejs Maps JavaScript API wczytuje się w czasie wczytywania strony. Aby zaimplementować wczytywanie bezpośrednie, najpierw zastąp tag <script>
wczytujący adres 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
, bo 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>
Dynamiczne wczytywanie z innego pliku JavaScript
Dynamiczne wczytywanie pozwala kontrolować, kiedy ma być wczytywany interfejs Maps JavaScript API. Na przykład możesz poczekać z wczytaniem interfejsu Maps JavaScript API, aż użytkownik kliknie przycisk lub wykona inne działanie. Aby zaimplementować ładowanie dynamiczne, zastąp najpierw tag <script>
, który wczytuje stronę www.google.com/jsapi ("before"), kodem, aby automatycznie dodać tag <script>
, 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 dołącz funkcję wywołania zwrotnego do obiektu window w ten 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);