Suatu saat Anda ingin menampilkan peta di website, misalnya saja Anda ingin menampilkan suatu lokasi. Caranya cukup mudah, ikuti langkah berikut.

  • Buka Google Maps (maps.google.com) dan cari lokasi yang ingin Anda tampilkan. Ketikkan lokasi Anda di kolom [Search].
  • Setelah lokasi yang Anda maksudkan tertampil, klik menu [Link] yang berada di sudut kanan atas peta. Dari situ muncul jendela yang berisi link dan kode HTML, klik [Customize and preview embedded map].

Tutorial WordPress Tampilkan Peta

  • Pada jendela pengaturan peta yang muncul kemudian, pilih ukuran peta yang Anda inginkan. Pilihannya [Small], [Medium], [Large], atau isikan ukuran peta – dengan satuan pixel – pada pilihan [Custom].

 Tutorial WordPress Peta 1

  • Peta yang akan tertampil di website Anda terlihat di Preview. Pada Preview tersebut Anda dapat menggeser-geser peta agar lokasi tertampil sesusai dengan yang Anda kehendaki. Setelah Anda puas dengan ukuran dan tampilan petanya, copy-lah kode HTML yang berada di bawah Preview. (Caranya, klik kode tersebut sehingga terseleksi, klik-kanan, dan pilih [Copy].)

Tutorial WordPress Tampilkan Peta 2

  • Login-lah ke website WordPress Anda, dan pilih menu [Appearance][Widget]. Pilih widget Text dan paste kode HTML tadi. Isikan judul peta Anda pada kolom judul widget Text tersebut bila perlu. Klik [Save] untuk menyimpan kode tersebut pada widget Text.
  • Kini lihat website Anda, peta sudah tertampil di sidebar. Bila Anda kurang puas dengan ukuran peta, editlah kode HTML pada widget Text tadi, yaitu ubah angka pada “height” (tinggi) dan “width” (lebar). Ubah-ubahlah hingga Anda menemukan ukuran yang pas dengan sidebar Anda. Klik [Save] setiap Anda melakukan pengubahan.
  • Bila Anda ingin menyisipkan peta pada artikel Anda, bukan pada sidebar, sisipkan kode HTML di dalam artikel, tapi lebih dahulu Anda pilih mode edit [HTML].

Nah, tunjukkan lokasi pesta perkawinan, jalur bersepeda, atau tempat lainnya, dengan menampilkan peta seperti cara di atas. (Tutorial WordPress)

Tagged with:
 

3 Responses to Tampilkan Peta Google di WordPress

  1. kamal says:

    Terima kasih atas informasi tutorial nya… It’s helpfull for me…

  2. anak kecil says:

    gak berhasil,yang keliatan malahan kode htmlnya

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Set your Twitter account name in your settings to use the TwitterBar Section.