En İyi Uygulamalar

JS ile İlgili En İyi Uygulamalar

Davranışı geçersiz kılma ve kitaplık uyumluluğu

Maps JavaScript API yalnızca standart bir ECMAScript ve W3C DOM ortamıyla çalışır. Bu nedenle, tarayıcı tarafından sağlanan yerleşik sınıfların ve nesnelerin davranışını değiştirmek veya geçersiz kılmak, Maps JavaScript API'nin çalışmamasına neden olabilir. Bazen diğer kitaplıklar, tarayıcının davranışını artık standart bir ECMAScript ortamı olmayacak şekilde değiştirerek Maps JavaScript API ile çakışabilir. Maps JavaScript API bu kitaplıklarla uyumlu değildir.

Maps JavaScript API ile uyumlu olmadığı bilinen kitaplıklar:

  • Prototip: Array.from() ve Element.prototype.remove() standart olmayan şekillerde geçersiz kılınıyor.
  • MooTools (eski sürümler): Array.from() öğesini standart olmayan bir şekilde geçersiz kılar.
  • DateJS (eski sürümler): Date.now() öğesini standart olmayan bir şekilde geçersiz kılar.

Bazen uyumsuz kitaplıkları değiştirerek standart dışı geçersiz kılmaları kaldırmak mümkün olabilir.

Dahili performans optimizasyonu

Maps JavaScript API, sayfa yükleme hızlarını artırmak için etkileşimli içeriklerin yüklenmesini, öğe veya kapsayıcı görüntü alanına yaklaşana kadar dahili olarak erteleyebilir. Bu dahili optimizasyonlar, önceden haber verilmeksizin herhangi bir zamanda değiştirilebilir. Bu bütçeler, performansı artırmak için tasarlanmıştır ve faturalandırmayı yönetmek için kullanılmamalıdır. Bir öğe görünür olana kadar faturalandırma yapılmamasını sağlamak için uygulama kodunuzda öğenin oluşturulmasını erteleyin.

CSS ile ilgili en iyi uygulamalar

Maps JavaScript API ile harita eklediğinizde veya özelleştirdiğinizde, web sayfanıza uyguladığınız stillerden bazıları harita stillerinizi geçersiz kılabilir ve CSS çakışmalarına neden olabilir. Stil oluşturmak için CSS çerçevesi veya JavaScript bileşeni kullanıyorsanız bu, harita stillerinizle ek CSS çakışmalarına neden olabilir.

CSS çerçeveleri ve JavaScript stil bileşenleri, tarayıcılar arasındaki oluşturma farklılıklarını gidermek için genellikle CSS sıfırlama veya normalleştirici kullanır. Çerçeveler, web sayfası öğelerinin kenar boşluklarını ve kenarlıklarını ölçeklendirmek için genellikle box-sizing öğesini kullanır. Bu genellikle varsayılan tarayıcı davranışını content-box yerine border-box kullanacak şekilde değiştirmeyi içerir.

Bu tür bir CSS sıfırlama, API kullanıcı aracısı stil sayfasındaki değişiklikleri desteklemediğinden Maps JavaScript API ile CSS çakışmalarına neden olabilir. Çerçeve veya bileşen, Maps JavaScript API'nin CSS sınıflarına ya da DOM öğelerine referans veriyorsa ek CSS çakışmaları meydana gelebilir.

Bu çakışmaları önlemek için dikkate almanız gereken birkaç önerimiz var.

Belirginlik

Yerleştirilmiş ve bağlantılı CSS, Google Haritalar stillerinden önce haritanıza uygulanır. Tüm sayfa stilleriniz yerleşik veya bağlantılı CSS'de tanımlanmışsa haritanıza doğru stillerin uygulandığından emin olmak için özgüllük kurallarına uyun.

img, button ve a gibi yaygın CSS öğelerinin üzerine sayfanızın stilleri yazılabilir. En yaygın senaryolardan biri, img öğesinin max-width özelliğinin %100 olarak ayarlanmasıdır. Bu durum, özellikle InfoWindow kullanıyorsanız harita bileşenlerinin bozulmasına veya gizlenmesine neden olabilir.

Bu sorunu düzeltmek için haritanızın img öğesini güncelleyerek max-width özelliğinin none olarak ayarlanmasını sağlayabilirsiniz. Örneğin:

#map img
{
    max-width : none;
}

Sınıf adları

JavaScript Eşlemesi API'sinin sınıf adlarına ve dahili DOM öğelerine referans vermeyin. Bu durum desteklenmez ve web sitenizde önceden haber verilmeksizin zarar veren değişikliklere neden olabilir. Bunun yerine, haritanız için kapsayıcı olarak kendi CSS sınıflarınızı oluşturmanızı öneririz.

Bir CSS çerçevesi veya JavaScript bileşeni bu tür referanslar kullanıyorsa box-sizing geçersiz kılma önerimiz geçici bir çözüm olarak kullanılabilir.

CSS box-sizing geçersiz kılma

CSS box-sizing geçersiz kılmaları, harita stil çakışmaları için olası bir geçici çözüm sunar. Bu, özellikle bir CSS çerçevesi veya JavaScript stil bileşeni kullanıyorsanız yararlı olabilir. Örneğin, box-sizing, border-box olarak ayarlanmışsa aşağıdakileri deneyin:

  • <html> öğesini border-box olarak ayarlayan bir box-sizing geçersiz kılma kuralı oluşturun.
  • Haritanız dışındaki tüm öğeler için box-sizing: inherit kullanın.
  • box-sizing öğesini initial olarak sıfırlayan özel bir harita kapsayıcısı oluşturun.

CSS örneği:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.container-map {
  box-sizing: initial;
}