Cara Memasang Google Maps di Blog AMP HTML

Abdi Nov 02, 2019 Nov 02, 2019 2 min read

Genyo.id| Cara Memasang Google Maps Di Blog AMP HTML – Seperti yang sudah diketahui sendiri bahwa blog yang menggunakan AMP HTML terdapat beberapa peraturan yang harus dipatuhi. umumnya tanpa menggunakan tAMP HTML juga terdapat aturan juga, yakni aturan dalam penulisan HTML. namun secara default beberapa kode embed sudah sesuai dan tinggal digunakan.

Salah satunya yaitu kode embed untuk menampilkan Peta atau Google Maps di Blogger. Saat menyalin kode embed Google Maps, kita dapat langsung makai kode tersebut, namun madslahnya belum banyak situs yang menyediakan kode embed khusus pengguna AMP HTML.

Jadi bagi kalian yang menggunakan blog AMP harus melakukan modifikasi secara manual terhadap kode yang akan kalian pasang. Oleh karena itu, pada posting kali ini akan mengulas tentang cara mudah memasang atau menampilkan Google Maps di blog AMP HTML dan tentunya valid AMP.

Menampilkan Google Maps Valid AMP
Dapatkan kode iframe dari Google Maps lewat browser atau langsung cari tempat yang ingin kalian ambil kode embed nya lewat https://www.google.co.id/maps/. Cari tempat dan silahkan kalian ambil kode embednya. Sekedar saran saja, Jika kalian menggunakan smartphone, kalian dapat mengubah tampilannya menjadi Desktop agar kode embed muncul.

Jika diperhatikan, embed Google Maps yang biasa menggunakan tag iframe. Contohnya adalah kode embed Google Maps seperti berikut:


<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3957.8390172536865!2d111.7905835!3d-7.2591551!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e79d548d725ad51%3A0xa51be7d8f76343ea!2sWisata%20Kayangan%20Api!5e0!3m2!1sid!2sid!4v1572714958086!5m2!1sid!2sid" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

Jadi agar kode diatas bisa dipasang dan valid pada postingan blog AMP, kalian harus menggunakan tag amp-iframe berikut:


<amp-iframe width="600"
height="450"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups"
frameborder="0"
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3957.8390172536865!2d111.7905835!3d-7.2591551!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e79d548d725ad51%3A0xa51be7d8f76343ea!2sWisata%20Kayangan%20Api!5e0!3m2!1sid!2sid!4v1572714958086!5m2!1sid!2sid">
</amp-iframe>

Keterangan

Silahkan kalian ganti kode yang ditandai dengan kode embed tempat yang kalian punya.

width dan height adalah ukuran lebar dan tinggi. sesuaikan saja.

Dan hasilnya dapat kalian lihat seperti contoh dibawah ini: