Peta adalah aspek penting dalam setiap laman web perniagaan. Walaupun anda benar-benar berasaskan internet, pelanggan masih ingin mengetahui siapa anda dan di mana anda tinggal. Peta Google kini menjadi lalai untuk banyak laman web kerana ia adalah yang paling mudah digunakan, seolah-olah paling tepat dan bebas. Pada akhir tutorial ini, anda akan mengetahui dengan tepat bagaimana untuk memasukkan Peta Google yang responsif ke dalam laman web anda.
Peta Google lalai tidak semestinya responsif sehingga mungkin tidak berskala kepada saiz skrin yang berbeza. Bergantung kepada sama ada anda menggunakan plugin WordPress atau memasukkannya sendiri menggunakan kod, mungkin perlu menambah beberapa baris CSS untuk menjadikan peta responsif.
Reka bentuk web responsif
Responsif adalah istilah utama di sini. Ia menerangkan reka bentuk web yang mengambil kira pengalaman pengguna dan peranti untuk memastikan ia sama tanpa mengira peranti yang anda gunakan untuk mengakses laman web. Contohnya, tapak web responsif harus memberikan pengalaman pengalaman yang sama sama ada anda melawatnya di desktop, tablet atau telefon pintar.
Untuk melakukan ini, laman web perlu menyesuaikan diri dengan resolusi, saiz skrin dan sentuhan yang berbeza.
Memasukkan Peta Google responsif ke dalam laman web
Terdapat tiga cara saya tahu untuk membenamkan Peta Google ke dalam laman web. Jika anda menggunakan tema WordPress, ia mungkin mempunyai ciri yang dibina. Anda juga boleh menggunakan plugin atau anda boleh membenamkan kod secara langsung dari Google ke mana-mana laman web. Pilihan pertama dan kedua adalah sangat baik untuk pengguna WordPress, penggunaan CMS lain juga supaya anda dilindungi di sana. Pilihan terakhir, menggunakan kod harus berfungsi di kebanyakan laman web tanpa mengira bagaimana ia dibina.
Gunakan tema WordPress untuk membenamkan Peta Google yang responsif
Sesetengah tema WordPress akan mempunyai ciri khusus untuk Peta Google. Oleh kerana peta adalah asas kepada laman web moden, beberapa pereka tema telah menerapkannya secara langsung ke dalam reka bentuk mereka. Jika tema anda mempunyai ciri peta, anda mungkin memerlukan Google Maps API untuk mendapatkannya berfungsi. Anda menambah API ke dalam pilihan tema dan ia akan bercakap terus kepada Google untuk membina peta pada setiap lawatan.
- Lawati halaman ini di laman web Google untuk memulakan proses API.
- Pilih butang Bermula biru.
- Pilih ikon menu tiga baris di sebelah kiri bahagian atas skrin baru.
- Pilih API & Perkhidmatan dan kemudian Bukti Kredensial.
- Pilih Cipta Kredensial dan kemudian Kunci API.
- Pilih Hadkan Kekunci dan pilih Perujuk HTTP.
- Pilih Simpan.
- Salin Kunci API dan tampalkannya ke halaman pilihan reka bentuk yang memerlukannya.
Sebaik sahaja anda mempunyai Kunci API, anda boleh melaksanakan Peta Google ke laman web anda menggunakan alat reka bentuk tema. Selagi tema itu responsif, peta sepatutnya juga.
Gunakan plugin untuk membenamkan Peta Google yang responsif
WordPress menggunakan plugin, Joomla menggunakan Sambungan, Drupal menggunakan modul atau plugin dan CMS lain menggunakan konvensyen penamaan yang sama. Sama ada cara, plugin merujuk kepada unsur-unsur modular yang anda boleh baut ke CMS teras anda untuk menambah ciri-ciri. Satu ciri yang berguna ialah Peta Google. Jika tema laman web anda tidak termasuk elemen peta dan anda tidak mahu melakukan kod sendiri, plugin adalah perkara terbaik yang akan datang.
- Di WordPress, navigasi ke Plugin dan Tambah Baru.
- Cari Peta Google dan pilih pemalam yang anda suka rupa.
- Membolehkannya dalam Plugin dan pergi ke Tetapannya.
- Tambah API Google Maps yang anda buat di atas di mana ditunjukkan dan Simpan.
- Laksanakan plugin di mana sahaja anda mahu peta dipaparkan.
CMS lain sedikit berbeza dalam kedudukan menamakan dan menu mereka tetapi prinsipnya sama. Kebanyakan, jika tidak semua, plugin peta memerlukan API Peta Google untuk berfungsi.
Gunakan kod untuk membenamkan Peta Google yang responsif
Jika anda tidak menggunakan WordPress atau CMS lain, anda masih boleh membenamkan Peta Google yang responsif. Anda hanya perlu menggunakan kod dan bukan modul. Ia memerlukan sedikit kerja tetapi akan memberikan peta responsif yang sama.
- Lawati Peta Google dan navigasi sehingga peta yang anda mahu paparkan memenuhi skrin.
- Pilih pautan Kongsi biru dan salin kod daripada Benamkan Peta.
- Tambah kod semakan khusus anda kepada kod di bawah antara dan.
- Tambahkan kod dalam HTML halaman web anda di mana anda mahu melihat peta.
- Simpan perubahan anda.
Kod:
Ini bukan kod saya, saya dapati ia dalam talian tetapi diuji di laman web saya. Ia berfungsi seperti pesona dan harus berfungsi sama ada anda menggunakan CMS, HTML, Hugo atau salah satu daripada banyak laman web atau alat laman web lain.
