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'nin çalışmamasına neden olabileceği anlamına gelir. Bazen diğer kitaplıklar, tarayıcının davranışını standart bir ECMAScript ortamı olmayacak şekilde değiştirerek Haritalar 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()'yi standart olmayan 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() değerini standart olmayan bir şekilde geçersiz kılar.

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

CSS En İyi Uygulamaları

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

CSS çerçeveleri ve JavaScript stil bileşenleri, tarayıcılar arasındaki oluşturma farklılıklarını ele almak için genellikle CSS sıfırlama veya normalleştirici kullanır. Çerçeveler, web sayfası öğelerinin kenar boşluklarını ve kenarları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 kullanacak şekilde değiştirilmesini içerir.

Bu tür bir CSS sıfırlaması, API'nin kullanıcı aracısı stil sayfasında yapılan değişiklikleri desteklememesi nedeniyle CSS'nin Maps JavaScript API ile çakışmasına neden olabilir. Çerçeve veya bileşen, Maps JavaScript API'nin CSS sınıflarına ya da DOM öğelerine referans verirse başka CSS çakışmaları da ortaya çıkabilir.

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

Belirginlik

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

img, button ve a gibi yaygın CSS öğeleri, sayfanızı biçimlendiren stillerle örtüşebilir. 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 bozulmasına veya gizlenmesine neden olabilir.

Bu sorunu düzeltmek için haritanızdaki img öğesini, max-width özelliği none olarak ayarlanacak şekilde güncelleyebilirsiniz. Örneğin:

#map img
{
    max-width : none;
}

Sınıf adları

JavaScript Haritalar API'sinin sınıf adlarına ve dahili DOM öğelerine referans vermeyin. Bu işlem desteklenmez ve web sitenizde önceden haber verilmeksizin önemli 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 boyutlandırması geçersiz kılma önerimiz geçici bir çözüm olabilir.

CSS box-sizing geçersiz kılma

CSS kutu boyutlandırması geçersiz kılma işlemleri, harita stili çakışmaları için olası bir geçici çözüm sunar. Bu özellikle 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 öğesi 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;
}