Wordpress: Menambahkan peta wikimapia menggunakan Custom Field

Wikimapia.org merupakan perpaduan dari Google Maps dan Wikipedia. Artinya, pengunjung selain bisa melihat peta lokasi suatu tempat, juga bisa menandai tempat-tempat tersebut. Asyiknya lagi, tempat yang ditandai tersebut tetap bisa dilihat oleh orang lain. Hal ini tentunya sangat memudahkan bagi semua orang yang ingin menunjukkan lokasi suatu tempat kepada orang lain secara online. Mereka tidak perlu mencari di peta manual. Bahkan, dengan Wikimapia, kita bisa mendapatkan koordinat suatu lokasi dengan mudah.

Untuk itu, pada artikel kali ini, saya akan menunjukkan sebuah trik "maksa" untuk mengintegrasikan Wikimapia ke dalam blog kita. Saya sebut maksa, karena mungkin banyak plugin yang bisa memudahkan kita memasukkan peta ke dalam blog. Saya juga menyebutnya menyusahkan diri sendiri, karena saya harus menambahkan Custom Field secara manual, kemudian menampilkan field tersebut menggunakan kode PHP. Tapi, pepatah mengatakan, bahwa hidup harus terus berjalan :D.

Langkah pertama, kita lihat contoh kode HTML untuk menampilkan peta dari Wikimapia ke dalam blog kita. Caranya, bukalah Wikimapia, kemudian pilihlah sebuah lokasi secara acak. Selanjutnya, dari menu Login, pilih Map on your page. Akan tampil baris kode HTML sebagai berikut:

<iframe src="http://wikimapia.org/#lat=-7.7288882&lon=109.0097901&z=19&l=0&ifr=1&m=b" width="250" height="250" frameborder="0"></iframe>

Dari kode di atas, kita mendapatkan dua variable penting, yaitu lat dan lon (latitude dan longitude). Angka-angka tersebut merupakan koordinat suatu tempat. Coba saja, saat Anda mencoba tempat yang berbeda, Anda akan mendapatkan nilai yang berbeda pula.

Selanjutnya, saat Anda posting artikel menggunakan Wordpress, tambahkan dua buah custom field untuk mencatat nilai-nilai tersebut.

Sebagai contoh, saya menggunakan 2 buah custom field, yaitu lat dan long. Silahkan pelajari artikel berikut mengenai bagaimana cara kita mendapatkan koordinat tersebut.

Langkah selanjutnya adalah menambahkan kode PHP untuk menampilkan peta berdasarkan variabel tersebut di atas. Untuk itu, editlah file Single.php dari menu Appearance - Editor. Kemudian, tentukan lokasi yang Anda inginkan. Misal, di bawah post, sebelum komentar, atau ditempat yang lain.

Jika sudah, tambahkan kode-kode berikut ini:

<iframe src="http://wikimapia.org/#lat=<?php echo get_post_meta($post->ID, 'lat', true); ?>&lon=<?php echo get_post_meta($post->ID, 'long', true); ?>&z=19&l=0&ifr=1&m=b&v=8" width="450" height="300" frameborder="0"></iframe> 

Kemudian, simpan perubahan yang telah Anda lakukan dengan menekan tombol Update File.


Penjelasan program:

Sangat simpel, kita hanya cukup mengganti nilai lat dan lon menggunakan kode html untuk mengambil nilai custom field-nya.

<?php echo get_post_meta($post->ID, 'lat', true); ?>

Untuk selanjutnya, Anda bisa bervariasi dengan kode di atas. Misal, Anda bisa menggabungkan kode di atas menggunakan fungsi IF, supaya kode tersebut tidak ditampilkan jika ternyata koordinat peta belum diinputkan.

$test= get_post_meta($post->ID, 'lat', true);
if( $test ) { ?>
<div style="border: 2px gray solid; width: 450px; margin: 0 auto;">
<iframe src="http://wikimapia.org/#lat=<?php echo get_post_meta($post->ID, 'lat', true); ?>&lon=<?php echo get_post_meta($post->ID, 'long', true); ?>&z=19&l=0&ifr=1&m=b&v=8" width="450" height="300" frameborder="0"></iframe>
</div>
<?php } else { ?>
         Maaf, peta belum tersedia
<?php } ?>

Sangat mudah bukan?