Destek

Bu sayfada, vektör haritalar ve WebGL özellikleri ile ilgili bilinen sorunlar ve geçici çözümler listelenmektedir.

Tarayıcı/cihaz desteği

WebGL özellik önizlemesi, Maps JavaScript API ile aynı tarayıcıları ve cihazları destekler. Belirli bir cihazdaki tarayıcının WebGL'yi destekleyip desteklemediğini kontrol etmek için get.webgl.org veya caniuse.com adresini ziyaret edin. Ayrıca tarayıcı ayarlarında donanım hızlandırmanın etkinleştirildiğinden emin olun. Aksi takdirde vektör haritalar raster biçimine geri döner.

Raster mi yoksa vektör mü?

Bazen vektör haritalar raster haritaya geri dönebilir. Bu durumda, vektör haritaya bağlı özellikler kullanılamaz. Raster haritaya geri dönüş çeşitli nedenlerle gerçekleşebilir. Bu bölümde, web tarayıcınızı doğru şekilde nasıl yapılandıracağınız ve vektör harita özelliğinin mevcut olup olmadığını programatik olarak nasıl kontrol edeceğiniz gösterilmektedir.

Chrome'da tarayıcı özelliklerini kontrol etme

Belirli bir Chrome yüklemesinde hangi donanım hızlandırma özelliklerinin etkinleştirildiğini belirlemek için chrome://gpu/ adresine gidin ve aşağıdaki öğelerin etkinleştirildiğinden (yeşil renkte) emin olun:

• "OpenGL: Etkin"
• "WebGL: Donanım hızlandırmalı"
• "WebGL2: Donanım hızlandırmalı"

(Bunlar yalnızca temel gereksinimlerdir. Desteği etkileyen başka faktörler de olabilir. Aşağıdaki "Bilinen hatalar" bölümüne bakın.)

Donanım hızlandırmayı etkinleştirme

Vektör haritaların desteklenmesi için çoğu tarayıcıda donanım hızlandırmanın etkinleştirilmesi gerekir. Chrome ve Microsoft Edge'de donanım hızlandırmayı etkinleştirmek için Ayarlar'ı açın, Sistem'i seçin ve Kullanılabilir olduğunda donanım hızlandırmayı kullan seçeneğinin etkinleştirildiğinden emin olun.

• Safari'de web sitesi tercihlerini nasıl değiştireceğinizi öğrenin.
• Firefox'un performans ayarları hakkında bilgi edinin.

Raster veya vektör olup olmadığını programatik olarak kontrol etme

map.getRenderingType() işlevini çağırarak bir haritanın raster mi yoksa vektör mü olduğunu programatik olarak kontrol edebilirsiniz. Aşağıdaki örnekte, renderingtype_changed etkinliğini izleyen ve raster veya vektör haritanın kullanılıp kullanılmadığını gösteren bir bilgi penceresi görüntüleyen kod gösterilmektedir.

TypeScript

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */

 function initMap() {
    const center = {lat: 0, lng: 0};
    const map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
      center,
      zoom: 10,
      heading: 0.0,
      tilt: 0.0,
      // Map ID for a vector map.
      mapId: '6ff586e93e18149f',
    });
    const canvas = document.createElement("canvas");
    const infoWindow = new google.maps.InfoWindow({
      content: '',
      ariaLabel: 'Raster/Vector',
      position: center,
    });
    infoWindow.open({
      map,
    });

    map.addListener('renderingtype_changed', () => {
      infoWindow.setContent(`${map.getRenderingType()}`);
    });
  }

  declare global {
    interface Window {
      initMap: () => void;
    }
  }
  window.initMap = initMap;
index.ts

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

JavaScript

/**
 * This example creates a map with an info window that shows whether
 * the map render type is raster or vector.
 */
function initMap() {
  const center = { lat: 0, lng: 0 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center,
    zoom: 10,
    heading: 0.0,
    tilt: 0.0,
    // Map ID for a vector map.
    mapId: "6ff586e93e18149f",
  });
  const canvas = document.createElement("canvas");
  const infoWindow = new google.maps.InfoWindow({
    content: "",
    ariaLabel: "Raster/Vector",
    position: center,
  });

  infoWindow.open({
    map,
  });
  map.addListener("renderingtype_changed", () => {
    infoWindow.setContent(`${map.getRenderingType()}`);
  });
}

window.initMap = initMap;
index.js

WebGL 2 desteğini kontrol etmek için WebGL oluşturma bağlamını da kullanabilirsiniz:

const canvas = document.createElement("canvas");
canvas.getContext("webgl2") ? console.log("WebGL 2 is supported") : console.log("WebGL 2 is NOT supported");

WebGL oluşturma bağlamını programatik olarak algılamanın diğer yollarını öğrenin.

Mobil web desteği

Vektör haritalar için mobil web desteği henüz deneme aşamasındadır. Geliştiriciler, mobil web tarayıcılarını algılamak için istemci API'lerini kullanabilir ve vektör harita yerine raster haritayla ilişkili bir harita kimliği kullanabilir. Bazı mobil cihazlarda daha yavaş oluşturma performansı olacağını tahmin ediyoruz. Mobil web'de vektör haritaları kullanmayı tercih ederseniz performans istatistikleri ve geri bildirimlerinizi bizimle paylaşmanızı rica ederiz. Yukarıda belirtildiği gibi, vektör harita desteği yoksa vektör harita kimliği otomatik olarak raster harita kullanmaya geri döner.

Hatalar

Bilinen hatalar

• AMD GPU'lara sahip bazı macOS cihazlarda Chrome ile ilgili bilinen bir sorun vardır. Bu durum, macOS'in birden fazla GPU'su olan cihazlarda GPU'lar arasında dinamik olarak geçiş yapması nedeniyle kafa karıştırıcı olabilir. Bu nedenle, çalışan diğer uygulamalara veya harici bir monitörün bağlı olup olmamasına bağlı olarak vektör haritalar kullanılamayabilir. Chrome'un yakında kullanıma sunulacak ANGLE Metal arka ucunu etkinleştirmek, bazı durumlarda bu sorunu düzeltiyor. Bu konuyla ilgili genel kullanıma sunma planlarını https://bugs.chromium.org/p/chromium/issues/detail?id=1322521 adresinden takip edebilirsiniz.

Hata bildirme

• Hatayı bildirmeden önce lütfen tarayıcıyı ve GPU sürücüsünü en yeni sürüme güncelleyin.
• chrome://settings/system (Chrome), about:preferences#general (Firefox), edge://settings/system (Microsoft Edge) adresindeki donanım hızlandırma ayarının etkinleştirildiğinden emin olun. Safari'de bu ayar, macOS 10.15 veya sonraki sürümlerde otomatik olarak etkinleştirilir. Eski macOS sürümlerinde lütfen Safari'nin gelişmiş ayarlarına gidin ve "Donanım hızlandırmayı kullan" seçeneğinin etkinleştirildiğinden emin olun.
• Hata raporuna jsfiddle örnek kod bağlantısını ekleyin.
• Ayrıca lütfen chrome://gpu (Chrome), about:support (Firefox) veya edge://gpu (Microsoft Edge) simgesinin ekran görüntüsünü alın. Oluşturma sorunlarıyla karşılaşırsanız hata raporuna GPU ile ilgili bilgileri ekleyin.

Düşüncelerinizi bizimle paylaşın

Sizin ve son kullanıcılarınız için en iyi vektör harita deneyimini sunmaya çalışırken geri bildirimlerinize değer veriyoruz. Lütfen aşağıdaki durumlarda bize bildirin:

• Web uygulamalarınızda yeni JavaScript hataları veya hatalar/kilitlenmeler tespit ederseniz.
• Vektör haritaların başlangıç gecikmesi, raster haritalara kıyasla önemli ölçüde daha kötüdür. Bu durumda, başlangıç gecikmesi regresyonuyla ilgili metrikler çok faydalıdır. Genel olarak, başlangıç gecikmesinin kabul edilebilir eşiklerin ötesine geçip geçmediğini bilmek isteriz.
• Vektör haritalar deneyimi, olması gerektiği kadar sorunsuz değil. FPS veya jank metriklerini kaydederseniz bu metrikler vektör ve raster haritalar arasında nasıl karşılaştırılır?
• Performans, tarayıcıya göre büyük farklılıklar gösterir.

Vektör haritalar ile raster haritaların karşılaştırılması için A/B testi ayarladıysanız lütfen elde ettiğiniz performans geri bildirimlerini paylaşın. Bu geri bildirimler, özelliği iyileştirmemize yardımcı olacağı için çok faydalı olacaktır.