En İyi Uygulamalar

JS En İyi Uygulamaları

Maps JavaScript API yalnızca standart bir ECMAScript ve W3C DOM ortamıyla çalışır. Bu, tarayıcı tarafından sağlanan yerleşik sınıfların ve nesnelerin davranışını değiştirmenin veya geçersiz kılmanın, Maps JavaScript API'yi çalışmayabilir. Bazen diğer kitaplıklar, tarayıcının davranışını değiştirerek Haritalar JavaScript API'sini standart bir ECMAScript ortamı olmayacak şekilde değiştirebilir. 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() özelliklerini standart dışı şekillerde geçersiz kılar.
  • MooTools (eski sürümler): Array.from() politikasını standart olmayan bir şekilde geçersiz kılar.
  • DateJS (eski sürümler): Date.now() yönergesini standart olmayan bir şekilde geçersiz kılar.

Bazen standart olmayan geçersiz kılmaları kaldırmak için uyumsuz kitaplıkları değiştirmek mümkündür.

CSS ile ilgili en iyi uygulamalar

Maps JavaScript API ile bir 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 için bir CSS çerçevesi veya JavaScript bileşeni kullanırsanız bu, harita stillerinizle ek CSS çakışmalarına yol açabilir.

CSS çerçeveleri ve JavaScript stil bileşenleri, tarayıcılar arasındaki oluşturma farklılıklarını ele almak için genellikle bir CSS sıfırlaması 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 işlem genellikle, content-box kullanılan varsayılan tarayıcı davranışının border-box olarak değiştirilmesini içerir.

Bu tür CSS sıfırlaması, API kullanıcı aracısı stil sayfasında yapılan 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ı oluşabilir.

Bu çakışmaları önlemek için dikkate alabileceğiniz birkaç önerimiz var.

Belirginlik

Yerleştirilmiş ve bağlı CSS, haritanıza Google Haritalar stillerinden önce uygulanır. Sayfa stillerinizin tümü yerleştirilmiş veya bağlı CSS'de tanımlanmışsa haritanıza doğru stillerin uygulandığından emin olmak için spesifiklik kurallarını uygulayın.

Sayfanızın stilleri, img, button ve a gibi sık kullanılan CSS öğelerinin üzerine yazılabilir. En sık karşılaşılan senaryolardan biri, img öğesinin max-width özelliğinin yüzde 100'e ayarlanmasıdır. Bu durum, özellikle InfoWindow kullanıyorsanız bozuk veya gizli harita bileşenlerine neden olabilir.

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

#map img
{
    max-width : none;
}

Sınıf adları

JavaScript Maps API'nin sınıf adlarına ve dahili DOM öğelerine referans vermeyin. Bu yöntem desteklenmez ve haber vermeksizin web sitenizde zarar verici değişiklikler yapılmasına neden olabilir. Bunun yerine, haritanız için container'lar 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 kutu boyutlandırma geçersiz kılma önerimiz, geçici bir çözüm olarak kullanılabilir.

CSS kutu boyutlandırmasını geçersiz kılma

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

  • <html> öğesini border-box olarak ayarlayan bir box-sizing geçersiz kılması 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;
}