Menyematkan google maps ke dalam Web atau HTML



Selamat siang sahabat blogger, pada kali ini saya bagikan cara memasukkan google maps ke dalam web atau kode HTML anda. Pada google maps, digunakan untuk memberikan lokasi dimana perusahaan atau institusi berada Sehingga memudahkan pembaca untuk mengetahui lokasinya. Langkah-langkah dalam memasukkan maps kedalam web atau HTML sebagai berikut:

Langkah pertama yaitu buka browser anda kemudian buka https://www.google.co.id/maps/ setelah itu cari nama institusi atau nama perusahaan anda pada menu Telusuri google Maps,pada contoh kali ini  saya menggunakan alamat toko online calesmart.

www.blog.calesmart.com

Maka akan terlihat hasil di google maps seperti pada gambar berikut

www.blog.calesmart.com

Langkah selanjutnya pilih Bagikan pada tampilan kiri layar setelah itu akan menghasilkan tampilan seperti berikut ini

www.blog.calesmart.comKeterangan:

Untuk membagikan lokasi berupa link, anda bisa pilih Bagikan Link kemudian copy tulisan yang ada didalam kotak tersebut, jika untuk menyematkan peta di dalam web atau HTML anda harus pilih tab sematkan Peta pada menu sebelah kanannya seperti pada gambar berikut ini:

www.blog.calesmart.com

Langkah ketiga yaitu copy alamat link yang akan kita sematkan kedalam body web kita.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>memasukkan peta kedalam HTML</title>
</head>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3952.4058095464975!2d110.3819395087761!3d-7.852527164914419!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a56f4085b1d53%3A0x4991913f249b4dab!2sOnline+Shop+calesmart.com!5e0!3m2!1sid!2sid!4v1503900872256" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</body>
</body>
</html>

Fungsi dari iframe adalah menampilkan isi dari web lain contoh lainya yaitu untuk menampilkan maps dari google map. Untuk hasil tampilan bisa anda lihat pada gambar dibawah ini.www.blog.calesmart.com

Semoga artikel ini bermanfaat, salam.

penulis

About Catur Budi Waluyo

Suka otak atik yang penting menyenangkan dan bermanfaat saja. Administrator www.calesmart.com

Learn More