Memasang Google Maps Di Blog AMP HTML


Halo kawan! Seperti yang sudah diketahui bahwa pada blog yang menggunakan AMP HTML terdapat beberapa aturan yang harus dipatuhi. Pada dasarnya tanpa menggunakan AMP HTML juga ada aturannya, yaitu aturan penulisan HTML. Tetapi secara default beberapa kode embed sudah sesuai dan tinggal pakai.

Salah satunya kode embed untuk menampilkan Google Maps di Blogger. Saat menyalin kode embed Google Maps, kita bisa langsung pakai cuma tinggal pasang, tetapi belum banyak situs yang menyediakan kode embed khusus pengguna AMP HTML.

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

Menampilkan Google Maps Valid AMP

Dapatkan kode iframe dari Google Maps

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

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3347.766760028943!2d119.48997000625333!3d-3.7692207698932996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x8f6442bc83f3c0!2sWarung%20Hidroponik%20Ammani!5e0!3m2!1sid!2sid!4v1567703051988!5m2!1sid!2sid" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

Jadi agar kode tersebut bisa dipasang dan valid pada blog AMP, gunakan tag amp-iframe berikut ini:

<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=!1m18!1m12!1m3!1d3347.766760028943!2d119.48997000625333!3d-3.7692207698932996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x8f6442bc83f3c0!2sWarung%20Hidroponik%20Ammani!5e0!3m2!1sid!2sid!4v1567703051988!5m2!1sid!2sid">
</amp-iframe>

Selanjutnya tinggal sesuaikan ukuran height serta ukuran width dengan yang terdapat pada tag iframe serta ganti URL pada bagian src. Jadi kode di atas bisa langsung kamu pakai dan langsung kamu gunakan.

Untuk kode yang lebih sederhana, kamu bisa gunakan kode berikut dan langsung ganti xxx dengan URL dari Google Maps kamu.

<amp-iframe width="600" height="450" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" src="xxx"></amp-iframe>

Contoh

Dan hasilnya bisa kamu lihat seperti contoh berikut ini:



Penutup

Itulah cara mudah yang bisa kamu gunakan untuk memasang embed Google Maps atau menampilkan Google Maps di blog AMP HTML. Semoga artikel ini bisa bermanfaat untuk kamu. Jika terdapat hal-hal yang kurang jelas, maka jangan sungkan untuk menyampaikannya pada komentar di bawah atau melalui halaman contact blog ini. Terima kasih dan sampai jumpa!
Disqus Comments