Cara Mendapatkan Kode Embed Google Maps

Hallo teman-teman di kesempatan kali ini saya akan menjelaskan Cara Memperoleh Kode Embed Google Maps. Bagi memasang atau menampilkan Google Maps diwebsite, kita membutuhkan Kode Embed Google Maps. Dimana kode tersebut akan kita mendapatkannya dari Google Maps. Untuk teman-teman yang bingung bagaimana caranya, dapat disimak ya langkah-langkahnya.





Cara Memperoleh kode embed google maps:




  • Pertama-tama kita buka laman Google Maps


  • Lalu ketik lokasi yang ingin ditampilkan, selaku contoh saya akan cari lokasi “Source Code Aplikasi depok”



teman




  • Setelah ketemu lokasinya, klik ikon Share karenanya akan muncul pop-up seperti dibawah ini



teman




  • Lalu teman-teman klik Sematkan peta bagi memperoleh kode bagi embed dari lokasi tersebut.



teman




  • Sebelum teman-teman copy paste kode embed tersebut, teman-teman pun dapat menentukan ukuran dari Google Maps yang akan ditampilakan di laman kita. Ada beberapa alternatif bagi ukurannya seperti Kecil, Sedang, Besar, dan Ukuran Khusus. Dimana ukuran tersebut akan mempermudah kita bagi menggunakannya



Contoh Kode Embed Google Maps



<iframe src=https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3964.940045536862!2d106.81638031539354!3d-6.4017266643944675!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69ebdffd52c7f3%3A0xc49631171f8e99c5!2sDUMET+School+Depok!5e0!3m2!1sid!2sid!4v1481605098681 width=800 height=600 frameborder=0 style=border:0 allowfullscreen></iframe>


Contoh pemasangan di HTML



Teman-teman dapat terapkan atau seketika copy paste kode embed tersebut seketika ke HTML teman-teman, karena iframe sendiri itu adalah sebuah tag dari HTML jadi teman-teman lumayan paste kode embed tersebut didalam body, selaku contoh akan seperti ini



<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe src=https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3964.940045536862!2d106.81638031539354!3d-6.4017266643944675!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69ebdffd52c7f3%3A0xc49631171f8e99c5!2sDUMET+School+Depok!5e0!3m2!1sid!2sid!4v1481605098681 width=800 height=600 frameborder=0 style=border:0 allowfullscreen></iframe>
</body>
</html>


Nah hasilnya seperti ini ya teman-teman



teman



Gampang ya teman-teman. Semoga bermanfaat



 




Sumber https://kursuswebsite.org

Popular posts from this blog

Cara Menghapus Isi Dari Form Input Menggunakan Javascript

Membuat Form Menarik Menggunakan HTML dan CSS