Taşıma: google.load içindeki Haritalar modülü

13 Ekim 2021'de, google.load için "Haritalar" modülünü sağlayan hizmeti kapatacağız. Bu nedenle, 13 Ekim 2021'den sonra google.load'da "Haritalar" modülünü kullanmaya çalıştığınızda hata (module "maps" is not supported) alacak ve harita yüklenmeyecek. Olası bozulmaları önlemek için alternatiflerden birine geçmeniz gerekir.

Ne yapmanız gerekiyor?

Öncelikle <script> yükleyiciyi yükleyen <script> etiketini kaldırın, ardından google.load öğesine yapılan çağrıları kaldırın.google.load Google Loader'ı başka amaçlarla kullanıyorsanız yükleyici <script> etiketini yerinde bırakabilirsiniz.

Ardından, Maps JavaScript API'yi yüklemek için yeni bir yöntem uygulayın (aşağıdaki seçeneklerden birini belirleyin):

• <script> etiketi kullanılarak satır içi yükleme
• Başka bir JavaScript dosyasından dinamik yükleme

Google Loader'ın kullanıldığı mevcut örnek

Aşağıdaki örnekte, Google Loader'ın Maps JavaScript API'yi yüklemek için nasıl kullanıldığı gösterilmektedir (iki <script> bloğu vardır):

Önce

<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>

<script> etiketi kullanılarak satır içi yükleme (önerilir)

Bu yaklaşım kullanıldığında Maps JavaScript API, sayfa yüklendiği sırada yüklenir. Satır içi yüklemeyi uygulamak için öncelikle www.google.com/jsapi'yi yükleyen <script> etiketini ("önce") aşağıdaki örnekte gösterilen <script> etiketiyle değiştirin:

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

Ardından, artık gerekli olmadığı için JavaScript kodunuzdaki google.load işlevi çağrısını kaldırın. Aşağıdaki örnekte, Haritalar kitaplığı başarıyla yüklendiğinde çağrılan boş bir initMap() işlevi gösterilmektedir:

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

Belgelere göz atın

Başka bir JavaScript dosyasından dinamik yükleme

Dinamik yükleme, Maps JavaScript API'nin ne zaman yükleneceğini kontrol etmenizi sağlar. Örneğin, kullanıcı bir düğmeyi tıklayana veya başka bir işlem yapana kadar Maps JavaScript API'nin yüklenmesini bekleyebilirsiniz. Dinamik yüklemeyi uygulamak için öncelikle www.google.com/jsapi adresini yükleyen <script> etiketini ("önce") aşağıdaki örnekte gösterildiği gibi <script> etiketini programatik olarak ekleyecek kodla değiştirin:

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;

Ardından, geri çağırma işlevinizi pencere nesnesine şu şekilde ekleyin:

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

Son olarak, <script> etiketini sayfanın başlığına şu şekilde ekleyin:

document.head.appendChild(script);

Belgelere göz atın