En İyi Uygulamalar

JS ile İlgili En İyi Uygulamalar

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ştirme veya geçersiz kılma işlemi, Haritalar JavaScript API'sinin çalışmamasına neden olabilir. Bazen diğer kitaplıklar, tarayıcının davranışını 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 uyumsuz olduğu bilinen kitaplıklar:

  • Prototip: Array.from() ve Element.prototype.remove()'yi standart dışı yöntemlerle geçersiz kılar.
  • MooTools (eski sürümler): Array.from() öğesini standart olmayan bir şekilde geçersiz kılar.
  • DateJS (eski sürümler): Date.now() karakterini standart olmayan bir şekilde geçersiz kılar.

Bazen, standart dışı 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 harita eklediğinizde veya özelleştirdiğinizde, web sayfanıza uyguladığınız stillerin bazıları harita stillerinizi geçersiz kılarak CSS çakışmalarına neden olabilir. Stil oluşturmak için bir CSS çerçevesi veya JavaScript bileşeni kullanıyorsanız bu durum, 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 genellikle web sayfası öğelerinin kenar boşluklarını ve kenarlıklarını ölçeklendirmek için 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ı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 çeşitli önerilerimiz var.

Belirginlik

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

img, button ve a gibi yaygın CSS öğeleri, sayfanızın stilleriyle geçersiz kılınabilir. En yaygın senaryolardan biri, img öğesinin max-width özelliğinin yüzde 100 olarak ayarlandığı durumdur. 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, max-width özelliğinin none olarak ayarlanacağı şekilde güncelleyebilirsiniz. Ö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 özellik desteklenmez ve web sitenizde önceden haber verilmeksizin 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 çözüm olarak kullanılabilir.

CSS box-sizing geçersiz kılma

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

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