Tutorial Instalasi Google Maps di Wordpress

Sebuah lokasi tempat kita melakukan bisnis dapat kita tempatkan di halaman wordpress yang kita miliki. Hal ini tentunya akan menjadi sebuah keuntungan untuk para pencari informasi di dunia internet.

Salah satu aplikasi yang sudah terkenal dalam layanannya menampilkan maps adalah Google Maps. Salah satu aplikasi penyedia informasi lokasi yang dimiliki oleh Google. Aplikasi satu ini tersedia dalam versi personal computer (PC) dan juga dalam versi mobile.

Cara-Cara Memasukkan Google Maps di Wordpress

Setidaknya ada beberapa cara untuk menambahkan Google Maps di wordpress.

  1. Dengan memasang plugin Google Maps di wordpress.
  2. Dengan menambahkan HTML Embed Google Map.

Dengan cara pertama, kita diharuskan untuk mendaftarkan akun wordpress kita menjadi dengan versi berbayar. Harga yang ditawarkan oleh wordpress mulai dari USD 8 per bulan untuk itu.

Namun, wordpress masih menyediakan fasilitas Embed Google Map bagi Anda yang masih dalam tahap belajar dan belum memiliki budget untuk memulai akun berbayar. Fitur ini dengan copy-paste HTML yang telah disediakan oleh fungsi Embed Google Map. Setelah HTML yang telah di-generate kita masukkan ke block HTML maka Google Maps otomatis akan muncul.

HTML Code untuk Membuat Google Maps di Wordpress

Di dalam artikel kali ini, kita akan memasukkan lokasi dari Alun-Alun Kidul Yogyakarta yang terkenal dengan dua beringin besarnya dan menjadi salah satu tujuan wisata favorit jika kita berkunjung ke Yogyakarta.

Langkah awal adalah dengan mengunjungi website Embed Google Maps. Lalu kita masukkan nama tempat yang ingin kita tuju. Setelah keluar lokasinya, kita dapat mengatur penampilan Google Maps tersebut dengan mengatur width dan height. Kita juga dapat mengatur zoom dari lokasi itu. Lalu akan muncul HTML untuk kita copy-paste ke block HTML di wordpress.

Note: jika wordpress tidak bisa menampilkan maps, maka code di bawah dijadikan satu baris tanpa adanya Enter dan Tab. Penulisan di bawah hanyalah untuk menunjukkan bagaimana struktur HTML.

<div class="mapouter">
    <div class="gmap_canvas">
        <iframe width="726" height="408" id="gmap_canvas"src="https://maps.google.com/maps?q=alkid%20jogja&t=&z=17&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
        </iframe>

        <a href="https://www.crocothemes.net"></a>
    </div>

    <style>.mapouter{position:relative;text-align:right;height:408px;width:726px;}.gmap_canv    as {overflow:hidden;background:none!important;height:408px;width:726px;}
    </style>
</div>

Hasil Akhir

Jika HTML yang Anda masukkan sudah benar, maka tampilannya akan tampil seperti gambar di bawah ini.

Jika di wordpress Anda masih belum dapat memunculkan gambar di atas, ada beberapa kemungkinan penyebabnya:

  • HTML yang Anda gunakan ada yang salah.
  • HTML yang Anda gunakan tidak lengkap.
  • Block yang gunakan di wordpress kurang tepat.

Semoga dengan memperhatikan faktor-faktor terseut, Google Maps akan tampil di halaman website Anda.

Baca Juga:

Hosting Unlimited SSD

Sumber CPU dan alokasi memory lebih besar sehingga Anda lebih leluasa mengembangkan bisnis.

Promo Diskon 50%