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ışmamasına neden olabileceği anlamına gelir. Bazen, tarayıcının davranışını standart bir ECMAScript ortamı olmayacak şekilde değiştirerek diğer kitaplıklar 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() özelliklerini standart olmayan yöntemlerle geçersiz kılar.
  • MooAraçlar (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 standart olmayan geçersiz kılmaları kaldırmak için uyumsuz kitaplıkları değiştirmek mümkündür.

CSS en iyi uygulamaları

Maps JavaScript API ile bir harita eklediğinizde veya bu haritayı ö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ıyorsanız bu durum, harita stillerinizle daha fazla CSS çakışması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 bir 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ın content-box yerine border-box olarak değiştirilmesini içerir.

API, kullanıcı aracısı stil sayfasında yapılan değişiklikleri desteklemediğinden bu tür bir CSS sıfırlaması, CSS'nin Maps JavaScript API ile çakışmalarına neden olabilir. Çerçeve veya bileşen, CSS sınıflarına veya Maps JavaScript API'nin DOM öğelerine referans veriyorsa ek CSS çakışmaları oluşabilir.

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

Belirginlik

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

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

Bu sorunu düzeltmek için haritanızın img öğesini max-width özelliği none olarak ayarlanacak ş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 işlem desteklenmez ve web sitenizde önceden bildirimde bulunmaksızın 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 kutu boyutu geçersiz kılma önerimiz bir geçici çözüm olarak kullanılabilir.

CSS kutu boyutunu geçersiz kılma

CSS kutu boyutu geçersiz kılmaları, harita stili ç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, 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;
}