Cara Menyematkan Google Maps di Situs Web: 4 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:54

Pilih saya di Maps Challenge!

Baru-baru ini, saya telah membuat situs web yang memanfaatkan Google Maps. Menyematkan Google Maps ke situs web saya cukup mudah dan tidak terlalu sulit untuk dilakukan. Dalam Instruksi ini, saya akan menunjukkan kepada Anda betapa mudahnya menyematkan Google Maps ke situs web Anda.

Sejujurnya, saya hanya menyematkan Google Maps ke situs web saya hanya untuk bersenang-senang. Tidak banyak hal yang harus dilakukan selama karantina, jadi mengapa tidak membuat situs web yang menggunakan Google Maps lalu menunjukkan kepada orang-orang langkah-langkah yang telah saya lakukan saat membuat situs web ini.

Sekarang saya harus mengatakan, Anda harus tahu satu atau dua hal tentang HTML dan CSS untuk menyematkan Google Maps ke situs web Anda. Jika Anda tidak tahu apa-apa tentang HTML atau CSS, coba kunjungi

Catatan: Saya tidak berafiliasi dengan W3Schools dalam bentuk atau bentuk apa pun. Ini hanya situs web yang menurut saya sangat membantu saat mempelajari HTML dan CSS.

Perlengkapan

• Editor Teks (akan digunakan untuk menyesuaikan situs web Anda dan menyediakan konten di situs web Anda).
• Google Maps (apa yang akan disematkan ke situs web Anda).
• Pemahaman Dasar tentang HTML dan CSS (ini adalah bahasa pemrograman berikut yang akan digunakan saat menyesuaikan situs web Anda dan menyediakan konten di situs web Anda).

Langkah 1: Sediakan Konten di Situs Web Anda

Buka perangkat lunak editor teks di komputer Anda. Misalnya, karena saya memiliki Windows, saya harus pergi ke Notepad. Setelah Anda pergi ke Notepad ketik berikut ini:

Google Maps

Google Maps

Setelah Anda selesai mengetik berikut ini di Notepad, buka Google Maps di mana Anda nantinya akan mendapatkan kode untuk Anda gunakan untuk menyematkan Google Maps ke situs web Anda.

Berikut tautan untuk Anda membuka Google Maps:

Langkah 2: Sematkan Google Maps ke Situs Web Anda

Setelah Anda berada di Google Maps, klik tombol "Menu" dan kemudian cari "Bagikan atau sematkan peta". Setelah Anda melihat "Bagikan atau sematkan peta", klik di atasnya. Setelah Anda mengkliknya, Anda akan melihat "Kirim tautan" dan "Sematkan peta". Sekarang klik "Sematkan peta", setelah Anda mengklik "Sematkan peta", Anda sekarang akan melihat panah 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 rekatkan teks ke dalam HTML situs web Anda.

Langkah 3: Sesuaikan Situs Web Anda

Kembali ke perangkat lunak editor teks Anda di komputer Anda dan ketik berikut ini:

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

Google Maps

Tag gaya digunakan untuk menyesuaikan situs web Anda. Sekarang, saya akan menyarankan Anda bahwa langkah ini menggunakan CSS. Anda dapat mengetik berikut ini sehingga Anda terlihat persis seperti situs web saya.

Setelah selesai, simpan file Anda sebagai "Google Maps.html". Jangan lupa bagian html karena jika Anda tidak memasukkan bagian ini, Anda tidak bisa membuat website.

Langkah 4: Lihat Produk Akhir Anda

Setelah Anda selesai mengikuti semua langkah dalam Instruksi ini, perhatikan baik-baik produk akhir Anda. Jika Anda senang dengan produk akhir Anda, itu bagus. Namun, jika Anda tidak puas dengan produk akhir Anda, kembali ke Notepad Anda dan coba perbaiki produk akhir Anda sehingga lain kali saat Anda melihat produk akhir dengan baik, Anda akan senang dengan apa yang telah Anda buat. tanganmu.

Jika Anda ingin melihat kode sumber saya, itu dapat ditemukan di bagian bawah Instructables ini. Terima kasih telah melihat Instructables saya dan selamat coding!

Sebagai pengingat, berikan suara untuk saya di Tantangan Peta!