Cara Menampilkan atau Embed Google Maps Responsive di Blog

Kali saya ingin membagikan tutorial tentang cara menampilkan atau embed Google Maps di blog. Biasanya hal ini sering dilakukan oleh pemilik blog bisnis, toko online, dan sebagainya, untuk menampilkan lokasi kantor atau tempat kerja mereka.

Okee. Nggak usah kebanyakan basa-basi, langsung aja ikuti langkah-langkah di bawah ini jika Anda ingin menampilkan lokasi Anda pada Google Maps di blog.

Cara Menampilkan atau Embed Google Maps di Blog

1. Buka situs Google Maps terlebih dahulu : https://www.google.co.id/maps

2. Cari lokasi yang Anda inginkan pada kotak pencarian atau search box di kiri atas. Anda bisa memasukan keyword pencarian berupa alamat, kelurahan, kecamatan, nama bisnis/perusahaan, dll.

Misal, saya ingin mencari alamat sebuah bisnis, yaitu “WahyuPratama”.

Cara Menampilkan atau Embed Google Maps Responsive di Blog

3. Pastikan lokasi yang Anda inginkan tepat ditandai oleh placemark bewarna merah, maka akan muncul tab/panel deskripsi lokasi Anda di sebelah kiri. Lalu klik “Bagikan”.

Cara Menampilkan atau Embed Google Maps Responsive di Blog

4. Kemudian, akan muncul pop up. Klik “Sematkan peta” > pilih ukuran bebas (sebagai contoh, saya memilih ukuran kecil) > salin kode.

Cara Menampilkan atau Embed Google Maps Responsive di Blog

5. Sebelum Anda memasang kode tersebut, Anda perlu memodif sedikit agar tampilan google maps di blog Anda menjadi Responsive.

Misal kode yang Anda dapatkan seperti berikut :

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.0333710173504!2d106.93146921422665!3d-6.259334663023001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e698d218f5662dd%3A0x1d80dfc79f538491!2sWahyuPratama.com!5e0!3m2!1sid!2s!4v1452782695853" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Ganti kode width=”600″ height=”450″ frameborder=”0″ style=”border:0″ menjadi style=”width:100%;height:450px; sehingga menjadi seperti di bawah ini. :

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.0333710173504!2d106.93146921422665!3d-6.259334663023001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e698d218f5662dd%3A0x1d80dfc79f538491!2sWahyuPratama.com!5e0!3m2!1sid!2s!4v1452782695853" style="width:100%;height:450px;" allowfullscreen></iframe>

6. Setelah itu, silahkan letakkan kode yang sudah dimodif pada tempat yang Anda inginkan. Jika ingin menampilkan pada postingan/halaman statis silahkan letakkan pada mode HTML. Jika ingin menampilkan pada sidebar/footer, silahkan tambahkan gadget > pilih HTML/JavaScript > letakkan kode > Simpan.

Maka nanti tampilan map atau petanya akan menjadi seperti di bawah ini.

Sekian, semoga bermanfaat.

Leave a Reply