Cara Menampilkan Peta Lokasi Google Maps Blog AMP & Non-AMP

Memasang Peta Lokasi Google Maps atau yang lebih dikenal dengan bahasa Embed Peta Lokasi dari Google Maps ke Blog terkadang merupakan suatu kebutuhan dimana kita bisa menunjukkan suatu lokasi misanya saja alamat toko Offline kamu di Blog yang kamu jadikan sebagai tempat menjual barang atau jasa.


Dengan cara ini diharapkan akan dapat meningkatkan informasi dan kepercayaan pengunjung ataupun calon pelanggan atas barang atau jasa yang kamu jual secara online.

Pada postingan ini saya akan berbagi pengalaman bagaimana caranya agar kita dapat menampilkan alias embed peta lokasi dari Google Maps ke Blog Blog.

Cara Memasang Peta Lokasi Google Maps di Blog AMP dan Non-AMP

Berikut ini panduan tutorial cara memasang peta lokasi Google Maps ke halaman postingan blog yang bisa kamu praktikkan. Tinggal kamu pilih aja mana yang sesuai dengan Jenis Blog (Themplate Blog) yang kamu gunakan apakah type AMP atau Non-AMP.

Cara Embed Google Maps Blog Non-AMP

Yang pertama saya akan mengajarkan kepada kalian bagaimana cara memasang Embet Kode Peta Lokasi Google Maps di Blog Non-AMP, langkah-langkahnya sebagai berikut:

1. Langkah Pertama langsung saja kalian buka Google Maps menggunakan browser





2. Cari Lokasi yang ingin kamu sematkan ke postingan blogger. Ketikkan saja nama usaha atau nama tempat yang ingin kamu dapatkan peta lokasinya di kolom pencarian lokasi. 





3. Apabila sudah ditemukan, Klick Icon Menu Bagikan Lokasi




4. Pilih Opsi Sematkan Peta



Disini kamu bisa memilih ukuran tampilan dari Peta Lokasi yang ingin kamu pasang di postinganmu. Ada 4 pilihan ukuran mulai dari Kecil, Sedang, Besar dan Ukuran Khusus.



Sesuaikan ukuran tampilan dari Peta Lokasi sesuai kebutuhanmu. Apabila kalian butuh ukuran khusus pilih Opsi Ukuran Khusus kemudian tentukan Tinggi dan Lebar tampilan Peta Lokasi sesuai selera kalian.




5. Salin semua kode iFrame HTMLnya 
6. Buka halaman postingan Blog Kalian yang ingin dipasang Ebed Peta Lokasi Google Maps
7. Biasanya dan pada umumnya format penulisan postingan adalah Mode Compose, ubah dan beralihlah ke mode HTML
8. Tempelkan Kode IFrame ke area yang kamu inginkan
9. Kembali ke mode Compose untuk melihat hasilnya, dan publikasikan jika dirasa sudah pas

Bagaimana? mudah sekali bukan? .Kelebihan dari pengguna Template Blog Non-AMP yaitu kalian tidak perlu mengedit susunan kode iFramenya. Tinggal salin dan tempelkan saja, beres.

Cara Memasang Google Maps di Blog AMP

Selanjutnya saya akan membahas bagaimana cara embed peta lokasi dari Google Maps ke halaman postingan Blogger AMP. Untuk kalian pengguna Template AMP, kalian tidak bisa sembarang memasang Embet Code Peta Lokasi seperti cara di atas. Dibutuhkan cara khusus agar nantinya halaman postingan kamu tidak terjadi yang namanya invalid AMP.

1. Langkah Pertama langsung saja kalian buka Google Maps menggunakan browser




2. Cari Lokasi yang ingin kamu sematkan ke postingan blogger. Ketikkan saja nama usaha atau nama tempat yang ingin kamu dapatkan peta lokasinya di kolom pencarian lokasi. 




3. Apabila sudah ditemukan, Klick Icon Menu Bagikan Lokasi
4. Pilih Opsi Sematkan Peta




5. Salin semua kode iFrame HTMLnya kemudian pastekan kode IFrame ke Dokumen Word atau NotePad.
6. Buka halaman postingan Blog Kalian yang ingin dipasang Ebed Peta Lokasi Google Maps
7. Biasanya dan pada umumnya format penulisan postingan adalah Mode Compose, ubah dan beralihlah ke mode HTML
8. Salin dan tempelkan Link yang ada di Kode IFrame yang saya beri warna merah ke area penempatan kode yang kamu inginkan menggunakan kode berikut ini:

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

Ganti teks Link-GMAPS dengan Link yang ada di Kode IFrame yang saya beri warna merah


9. Selesai, Publikasikan Postingan kalian

Demikianlah Panduan Tutorial Cara Embed Peta Lokasi Google Maps Blog AMP dan Non-AMP yang bisa kalian coba praktikkan. Selamat mencoba dan semoga berhasil.