Cara mendapatkan kode embed Google Maps | Ternyata banyak orang yang bingung bagaimana cara mendapatkan kode embed Google Maps. Pada tulisan sebelumnya jurnalweb pernah bahas bagaimana cara memasang google maps di postingan wordpress.

Pada tulisan tersebut kita perlu untuk mendapatkan URL Google Maps, sedangkan URL tersebut bisa kita peroleh dari Google maps. Untuk melengkapi tulisan tersebut disini kami jelaskan caranya agar Anda bisa dengan mudah mendapatkan kode embed di Google Maps.

1. Buka website Google Maps (https://maps.google.com)

2. Ketik lokasi yang ingin dicari, sebagai contoh kami ketik dan cari lokasi “gedung dpr mpr“.

google maps search

3. Setelah ketemu, maka klik ikon Share, maka akan muncul popup seperti dibawah ini.

google maps share url

4. Klik Embed Maps untuk mendapatkan kode untuk embed dari lokasi tersebut.

google maps embed code

Contoh kode yang didapat adalah seperti ini untuk lokasi “gedung dpr mpr“.

<iframe loading="lazy" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.4015657890086!2d106.80298813255!3d-6.210650092604212!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f153a35426ef%3A0xf69c935a828d0d3d!2sGedung+DPR%2FMPR+RI!5e0!3m2!1sen!2sid!4v1461733235635" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

5. Anda bisa terapkan di WordPress dengan mengikuti tutorial sebelumnya yang berjudul cara menambahkan google maps responsive ke WordPress. Atau jika Anda tidak menggunakan WordPress maka bisa juga dengan langsung menaruh kode tersebut di dalam tag body di kode HTML karena kode tersebut merupakan sebuah iframe yang merupakan bagian dari tag html.

Sekian…

Artikel Lain:

redesign websiteTips Mengganti Theme Web Untuk Menambah Pengunjung Warna Address bar browser websiteCara Mengubah Warna Address Bar Website di Browser Mobile kunci konten website jqueryKunci Konten Web Agar Tidak Bisa di Edit di Inspect Element / Developer Tool background slideshow dengan jqueryCara Membuat Background Slideshow dengan Jquery user friendly website10 Ciri Website User Friendly google maps wordpress shortcodeCara Memasang Google Maps Responsive di WordPress Tanpa Plugin pdf htmlCara Menampilkan File PDF di Website dengan HTML background video html5Cara Membuat Background Video Full-Screen dengan HTML5 & Jquery tabel responsiveCara Membuat Tabel Responsive Dengan CSS dan HTML sliding menu css htmlTutorial Cara Membuat Sliding Menu dengan CSS dan HTML show hide passwordCara Show Hide Password dengan Javascript efek salju html5Membuat Efek Salju dengan HTML5 Canvas dan Javascript