Praktik Terbaik

Praktik Terbaik JS

Maps JavaScript API hanya berfungsi dengan lingkungan DOM W3C dan ECMAScript standar. Artinya, memodifikasi atau mengganti perilaku class dan objek bawaan yang disediakan oleh browser dapat mengakibatkan Maps JavaScript API tidak berfungsi. Terkadang library lain dapat menimbulkan konflik dengan Maps JavaScript API dengan mengubah perilaku browser, sehingga tidak lagi menjadi lingkungan ECMAScript standar. Maps JavaScript API tidak kompatibel dengan library tersebut.

Library yang diketahui tidak kompatibel dengan Maps JavaScript API:

  • Prototype: mengganti Array.from() dan Element.prototype.remove() dengan cara non-standar.
  • MooTools (versi yang lebih lama): mengganti Array.from() dengan cara non-standar.
  • DateJS (versi yang lebih lama): mengganti Date.now() dengan cara non-standar.

Terkadang, modifikasi terhadap library yang tidak kompatibel dapat dilakukan untuk menghapus penggantian non-standar.

Praktik Terbaik CSS

Saat menambahkan atau menyesuaikan peta dengan Maps JavaScript API, beberapa gaya yang Anda terapkan pada halaman web dapat mengganti gaya peta dan menyebabkan konflik CSS. Jika Anda menggunakan framework CSS atau komponen JavaScript untuk gaya visual, mungkin akan muncul konflik CSS lain dengan gaya peta Anda.

.

Framework CSS dan komponen gaya visual JavaScript sering kali menggunakan reset CSS atau normalizer untuk menangani perbedaan rendering di antara browser. Framework sering kali menggunakan elemen box-sizing untuk menskalakan margin dan batas elemen halaman web. Hal ini biasanya melibatkan perubahan perilaku browser default dari penggunaan content-box menjadi border-box.

Jenis reset CSS ini dapat menyebabkan konflik CSS dengan Maps JavaScript API karena API tidak mendukung perubahan pada stylesheet agen pengguna. Konflik CSS tambahan dapat terjadi jika framework atau komponen mereferensikan class CSS atau elemen DOM dari Maps JavaScript API.

Untuk menghindari konflik ini, kami memiliki beberapa rekomendasi yang dapat dipertimbangkan.

Kekhususan

CSS yang disematkan dan ditautkan diterapkan ke peta Anda sebelum gaya peta Google. Jika semua gaya halaman Anda ditentukan dalam CSS yang disematkan atau ditautkan, ikuti aturan kekhususan untuk memastikan gaya yang benar diterapkan ke peta Anda.

Elemen CSS umum, seperti img, button, dan a dapat ditimpa oleh gaya halaman Anda. Salah satu skenario yang paling umum adalah saat atribut max-width dari elemen img ditetapkan ke 100 persen. Penetapan ini dapat menyebabkan komponen peta terdistorsi atau tersembunyi, terutama jika Anda menggunakan InfoWindow.

Untuk memperbaiki masalah ini, Anda dapat memperbarui elemen img untuk peta agar atribut max-width ditetapkan ke none. Contoh:

#map img
{
    max-width : none;
}

Nama class

Jangan merujuk ke nama class dan elemen DOM internal JavaScript Maps API. Tindakan ini tidak didukung dan dapat memicu perubahan yang dapat menyebabkan gangguan pada situs Anda tanpa pemberitahuan. Sebagai gantinya, sebaiknya Anda membuat class CSS sendiri sebagai penampung untuk peta.

Jika framework CSS atau komponen JavaScript menggunakan jenis referensi ini, rekomendasi penggantian box-sizing kami mungkin dapat digunakan sebagai solusi.

Penggantian box-sizing CSS

Penggantian box-sizing CSS memberikan kemungkinan solusi untuk konflik gaya visual peta. Penggantian ini dapat sangat berguna jika Anda menggunakan framework CSS atau komponen gaya visual JavaScript. Misalnya, jika box-sizing ditetapkan ke border-box, coba lakukan tindakan berikut:

  • Buat penggantian box-sizing yang menetapkan elemen <html> ke border-box.
  • Gunakan box-sizing: inherit untuk semua elemen selain peta Anda.
  • Buat penampung peta kustom yang mereset elemen box-sizing ke initial.

Contoh CSS:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.container-map {
  box-sizing: initial;
}