Cara Mendapatkan Kode Embed Google Maps

by | Dec 13, 2016 | HTML CSS, Kursus Website, Tips Trik, Tutorial | 0 comments

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

Cara Mendapatkan kode embed google maps:

  • Pertama kita buka website Google Maps
  • Lalu ketik lokasi yang ingin ditampilkan, sebagai contoh saya akan cari lokasi “Dumet school depok”

Cara Mendapatkan Kode Embed Google Maps

  • Setelah ketemu lokasinya, klik ikon Bagikan maka akan muncul pop-up seperti dibawah ini

embed-google-maps-2

  • Lalu teman-teman klik Sematkan peta untuk mendapatkan kode untuk embed dari lokasi tersebut.

embed-google-maps-3

  • Sebelum teman-teman copy paste kode embed tersebut, teman-teman juga bisa menentukan ukuran dari Google Maps yang akan ditampilakan pada website kita. Ada beberapa pilihan untuk ukurannya seperti Kecil, Sedang, Besar, dan Ukuran Khusus. Dimana ukuran tersebut akan memudahkan kita untuk 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 pada HTML

Teman-teman bisa terapkan atau langsung copy paste kode embed tersebut langsung ke HTML teman-teman, karena iframe sendiri itu merupakan tag dari HTML jadi teman-teman cukup paste kode embed tersebut didalam body, sebagai 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

Cara Mendapatkan Kode Embed Google Maps

Mudah ya teman-teman. Semoga bermanfaat