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()
veElement.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>
öğesiniborder-box
olarak ayarlayan birbox-sizing
geçersiz kılması oluşturun.- Haritanız dışındaki tüm öğeler için
box-sizing: inherit
kullanın. box-sizing
öğesiniinitial
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;
}