Cara Menyematkan Peta Google di Laman Web: 4 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:08

Undi saya dalam Cabaran Peta!

Baru-baru ini, saya telah membuat laman web yang menggunakan Peta Google. Melekatkan Peta Google ke laman web saya agak mudah dan tidak sukar dilakukan. Dalam Instructables ini, saya akan menunjukkan betapa mudahnya memasukkan Google Maps ke laman web anda.

Sejujurnya, saya memasukkan Peta Google ke laman web saya hanya untuk bersenang-senang. Tidak banyak perkara yang perlu dilakukan semasa berada di karantina, jadi mengapa tidak membuat laman web yang menggunakan Peta Google, kemudian tunjukkan kepada orang-orang langkah yang telah saya ambil semasa membuat laman web ini.

Sekarang saya mesti katakan, anda mesti mengetahui satu atau dua perkara mengenai HTML dan CSS untuk memasukkan Peta Google ke laman web anda. Sekiranya anda tidak mengetahui apa-apa mengenai HTML atau CSS, cuba pergi ke

Catatan: Saya tidak berafiliasi dengan W3Schools dalam bentuk dan bentuk apa pun. Cuma laman web yang saya dapati berguna ketika belajar HTML dan CSS.

Bekalan

• Teks Editor (akan digunakan untuk menyesuaikan laman web anda dan menyediakan kandungan di laman web anda).
• Peta Google (apa yang akan disematkan ke laman web anda).
• Pemahaman Dasar HTML dan CSS (ini adalah bahasa pengaturcaraan berikut yang akan digunakan ketika menyesuaikan laman web anda dan menyediakan kandungan di laman web anda).

Langkah 1: Sediakan Kandungan di Laman Web Anda

Pergi ke perisian penyunting teks anda di komputer anda. Sebagai contoh, kerana saya mempunyai Windows, saya harus pergi ke Notepad. Selepas anda pergi ke Notepad taipkan perkara berikut:

Peta Google

Peta Google

Setelah selesai mengetik perkara berikut di Notepad, pergi ke Peta Google di mana kemudian anda akan mendapatkan kod yang akan anda gunakan untuk menanamkan Peta Google ke laman web anda.

Inilah pautan untuk anda pergi ke Peta Google:

Langkah 2: Benamkan Peta Google ke Laman Web Anda

Setelah anda berada di Peta Google, klik pada butang "Menu" dan kemudian cari "Kongsi atau sematkan peta". Sebaik sahaja anda melihat "Bagikan atau sematkan peta", klik padanya. Setelah mengkliknya, anda akan melihat "Kirim pautan" dan "Benamkan peta". Sekarang klik pada "Benamkan peta", setelah Anda mengklik "Benamkan peta", Anda sekarang harus melihat anak panah ke bawah di sebelah kiri kotak teks yang akan digunakan untuk memilih seberapa besar atau kecil peta yang Anda inginkan. Salin teks di dalam kotak. Dan tampal teks ke dalam HTML laman web anda.

Langkah 3: Sesuaikan Laman Web Anda

Kembali ke perisian penyunting teks di komputer anda dan taipkan perkara berikut:

Badan Peta Google {background-color: rgb (129, 207, 224, 1);}

Peta Google

Tag gaya digunakan untuk menyesuaikan laman web anda. Sekarang, saya akan menasihati anda bahawa langkah ini menggunakan CSS. Anda boleh memasukkan perkara berikut agar laman web saya kelihatan seperti laman web saya.

Setelah selesai, simpan fail anda sebagai "Google Maps.html". Jangan lupa bahagian html kerana jika anda tidak memasukkan bahagian ini, anda tidak dapat membuat laman web.

Langkah 4: Lihat Produk Akhir Anda

Setelah selesai mengikuti semua langkah dalam Instruksional ini, perhatikan produk akhir anda. Sekiranya anda berpuas hati dengan produk akhir anda, itu bagus. Tetapi, jika anda tidak berpuas hati dengan produk akhir anda, kembalilah ke Notepad anda dan cuba perbaiki produk akhir anda sehingga pada masa berikutnya apabila anda melihat produk akhir anda dengan baik, anda akan berpuas hati dengan apa yang telah anda hasilkan tangan awak.

Sekiranya anda ingin melihat kod sumber saya, ia boleh didapati di bahagian bawah Instructables ini. Terima kasih kerana melihat Instructables saya dan selamat membuat kod!

Sebagai peringatan, sila pilih saya dalam Maps Challenge!