Peta adalah aspek penting dari situs web bisnis apa pun. Bahkan jika Anda sepenuhnya berbasis internet, pelanggan tetap ingin tahu siapa Anda dan di mana Anda tinggal. Google Maps sekarang menjadi default untuk banyak situs web karena paling mudah digunakan, tampaknya yang paling akurat dan gratis. Pada akhir tutorial ini, Anda akan tahu persis bagaimana menanamkan Google Map responsif ke situs web Anda.
Google Maps default tidak selalu responsif sehingga mungkin tidak skala ke ukuran layar yang berbeda. Bergantung pada apakah Anda menggunakan plugin WordPress atau menyematkannya sendiri menggunakan kode, mungkin perlu menambahkan beberapa baris CSS untuk membuat peta responsif.
Desain web responsif
Responsif adalah istilah kunci di sini. Ini menjelaskan desain web yang memperhitungkan pengalaman pengguna dan perangkat untuk memastikannya sama terlepas dari perangkat apa yang Anda gunakan untuk mengakses situs web. Misalnya, situs web yang responsif harus memberikan kualitas pengalaman yang sama apakah Anda mengunjunginya di desktop, tablet, atau ponsel cerdas.
Untuk melakukan ini, situs web harus beradaptasi dengan berbagai resolusi, ukuran layar dan sentuhan.
Memasukkan Google Map yang responsif ke situs web
Ada tiga cara yang saya tahu untuk menanamkan Google Maps ke situs web. Jika Anda menggunakan tema WordPress, itu mungkin memiliki fitur bawaan. Anda juga dapat menggunakan plugin atau Anda dapat menanamkan kode langsung dari Google ke situs web apa pun. Opsi pertama dan kedua sangat bagus untuk pengguna WordPress, CMS lain menggunakan plugin juga sehingga Anda tercakup di sana. Opsi terakhir, menggunakan kode harus berfungsi di sebagian besar situs web terlepas dari bagaimana mereka dibangun.
Gunakan tema WordPress untuk menyematkan Google Map yang responsif
Beberapa tema WordPress akan memiliki fitur khusus untuk Google Maps. Karena peta sangat mendasar bagi situs web modern, beberapa perancang tema telah mengimplementasikannya langsung ke dalam desain mereka. Jika tema Anda memiliki fitur peta, Anda kemungkinan membutuhkan Google Maps API untuk membuatnya berfungsi. Anda menambahkan API ke opsi tema dan itu akan berbicara langsung ke Google untuk membangun peta di setiap kunjungan.
- Kunjungi halaman ini di situs web Google untuk memulai proses API.
- Pilih tombol biru Memulai.
- Pilih ikon tiga baris menu di kiri atas layar baru.
- Pilih API & Layanan lalu Kredensial.
- Pilih Buat Kredensial, lalu API Key.
- Pilih Restrict Key dan pilih Referrers HTTP.
- Pilih Simpan.
- Salin Kunci API dan tempel ke halaman opsi desain yang memerlukannya.
Setelah Anda memiliki Kunci API, Anda dapat menerapkan Google Map ke situs web Anda menggunakan alat desain tema. Selama temanya responsif, peta juga harus.
Gunakan plugin untuk menyematkan Google Map yang responsif
WordPress menggunakan plugin, Joomla menggunakan Extensions, Drupal menggunakan modul atau plugins dan CMS lainnya menggunakan konvensi penamaan yang serupa. Either way, plugins merujuk pada elemen modular yang dapat Anda hubungkan ke CMS inti Anda untuk menambahkan fitur. Salah satu fitur yang bermanfaat adalah Google Map. Jika tema situs web Anda tidak menyertakan elemen peta dan Anda tidak ingin melakukannya sendiri, plugin adalah yang terbaik berikutnya.
- Di WordPress, navigasikan ke Plugin dan Tambah Baru.
- Cari Google Maps dan pilih plugin yang Anda sukai.
- Aktifkan di dalam Plugin dan buka Pengaturannya.
- Tambahkan Google Maps API yang Anda buat di atas tempat yang ditunjukkan dan Simpan.
- Terapkan plugin di mana pun Anda ingin peta muncul.
CMS lain sedikit berbeda dalam penamaan dan posisi menu mereka tetapi prinsipnya hampir sama. Sebagian besar, jika tidak semua, plugin peta akan membutuhkan Google Maps API untuk berfungsi.
Gunakan kode untuk menyematkan Google Map yang responsif
Jika Anda tidak menggunakan WordPress atau CMS lainnya, Anda masih dapat menyematkan Google Map yang responsif. Anda hanya perlu menggunakan kode alih-alih modul. Dibutuhkan lebih banyak pekerjaan tetapi akan memberikan peta responsif yang sama.
- Kunjungi Google Maps dan navigasikan hingga peta yang ingin Anda tampilkan memenuhi layar.
- Pilih tautan Bagikan biru dan salin kode dari Embed Map.
- Tambahkan kode semat khusus Anda ke kode di bawah ini antara dan.
- Tambahkan kode dalam HTML halaman web Anda di mana Anda ingin melihat peta.
- Simpan perubahan Anda.
Kode:
Ini bukan kode saya, saya menemukannya online tetapi mengujinya di situs web saya. Ini berfungsi seperti pesona dan harus berfungsi baik jika Anda menggunakan CMS, HTML, Hugo, atau salah satu dari banyak bahasa situs web lain atau alat halaman.
