Cara Memasang Google Maps di Blog AMP HTML

Salah satunya yaitu kode embed buat menampilkan Peta atau Google Maps pada Blogger. Saat menyalin kode embed Google Maps, kita mampu pribadi makai kode tersebut, namun madslahnya belum poly situs yg menyediakan kode embed spesifik pengguna AMP HTML.

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

Menampilkan Google Maps Valid AMP

Dapatkan kode iframe berdasarkan Google Maps lewat browser atau tertentu cari loka yg ingin kalian ambil kode embed nya lewat https://www.Google.Co.Id/maps/. Cari tempat

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: