Selasa, 30 Agustus 2011

Tutorial Google Map API : Membuat Peta lokasimu sendiri

7 comments
Google Map API merupakan aplikasi interface yang dapat diakses lewat javascript agar Google Map dapat ditampilkan pada halaman web yang akan dibangun. Untuk dapat mengakses dan menampilkan Google Map pada web maka dibutuhkan sebuah API Key terlebih dahulu, dimana API Key ini didapatkan dengan cara login/signup terlebih dahulu dan menggunakan akun di Google/Gmail untuk mendaftarkan alamat web yang akan dibangun sebagai tempat ditampilkannya peta dari Google Map tersebut.



Untuk mencoba tutorial berikut yang harus kamu siapkan adalah :
  • 1.       Sebuah Akun google (gmail)
  • 2.       Pengetahuan dasar html
  • 3.       Pengetahuan dasar JavaScript

Setelah memiliki sebuah akun google/gmail (tentunya) yang pertama kita mesti lakukan adalah mendapatkan  Google Map API Key , dimana Map API adalah berisi sebaris kode yang nantinya akan kita gunakan untuk menampilkan peta google di halaman web yang kita buat. Untuk mendapatkan API Key tsb kamu harus login terlebih dahulu menggunakan akun google melalui gmail setelah itu Gnerate API KEYmu  melalui link berikut http://www.google.com/apis/maps/signup.html  .

 
Pada My web site URL isikan URL web yang akan kita daftarkan (alamat web kita yang akan kita gunakana untuk menampilkan peta),  oiya ingat satu API Key hanya dapat digunakan pada satu URL web jadi API Key yang sudah kita daftarkan di suatu URL web tidak akan dapat kita pindahkan ke URL atau alamat web lainya.

Setelah kita masukan alamat web kita pada kotak my web site URL dan klik generate API Key maka API Key yang kita butuhkan akan muncul. Akan muncul 3 macam API KEY yakni :
  • 1.       JavaScript Maps API Example
  • 2.       Maps API for Flash Example
  • 3.       HTTP Service Example
Karena kita akan membuat sebuah halaman web maka API KEY yang akan kita gunakan adalah API KEY yang pertama “JavaScript Maps API” kemudian kopi APY key tersebut dan taruh di halaman web kita beserta kode program untuk menampilkan petanya (google map api).

Contoh API KEY yang saya dapatkan adalah
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQ6f9Y9CoQLM6VWsH3nUSZMbXzTABT_N_xWHEj5W3IG7a02rRAUMmH33A"
      type="text/javascript"></script>

Dan berikut ini adalah scripts (sederhana) program Google Map API untuk menampilkan peta google di web kita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQ6f9Y9CoQLM6VWsH3nUSZMbXzTABT_N_xWHEj5W3IG7a02rRAUMmH33A"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(-7.797224,110.368797), 17);
map.setMapType(G_HYBRID_MAP);

map.addControl(new GSmallMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());

var marker = new GMarker(new GLatLng(-7.797224,110.368797));
map.addOverlay(marker);
marker.openInfoWindowHtml("<img src='http://static.kaskus.us/images/smilies/cystg.gif' width='70' height='50'/> <br/> Kota Yogyakarta<br/>titik koordinat latitude/longitude yang kamu masukan disini ");
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>


Kemudian Simpan script tersebut ke dalam format html atau php kemudian upload ke web hosting kamu.. setelah itu buka web tersebut secara online dan lihat hasilnya , peta rumah kamu sudah ditandai dan ditampilkna dalam bentuk peta google .

Keterangan Script:
1.    Google Map API Key
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQ6f9Y9CoQLM6VWsH3nUSZMbXzTABT_N_xWHEj5W3IG7a02rRAUMmH33A"
      type="text/javascript"></script>
    <script type="text/javascript">

Script diatas adalah google Map API Key nya.

2.    Titik tengah koordinat :
map.setCenter(new GLatLng(-7.797224,110.368797), 17);
Script diatas berarti saat peta pertama kali dibuka titik tengah peta akan berada di koordinat  -7.797224,110.368797 (Koordinate kota Yogyakarta) dengan zoom 17.

Bagaimana cara mendapatkan koordinat rumah saya?
  1. buka saja http://maps.google.com.
  2.  Klik my place
  3. Dibawahnya akan muncul alamat lokasi kamu (pilih lokasi tsb dan peta akan mengarah ke lokasi tsb)
  4.  Pada pojok kanan atas klik icon link
  5.  Lihat link yang diatas akan muncul   :                                                                           http://maps.google.com/maps/myplaces?hl=en&ll=-7.811153,110.363846&spn=0.010672,0.01929&sll=37.0625,-95.677068&sspn=23.875,57.630033&vpsrc=0&ctz=-420&z=16&iwloc=A
  6.  Pada script diatas Koordinat lokasinya adalah -7.811153,110.36384
 
3.       Komponen-komponen dalam peta :
map.setMapType(G_HYBRID_MAP); 
artinya >> pertama kali map dibuka akan ditampilkan dalam mode hybrid (citrasatelit)
map.addControl(new GSmallMapControl());
>> Map control diaktifkan (tanda untuk menggeser-geser peta)
map.addControl(new GScaleControl());
>> Scale control diaktifkan (tanda untuk zoom in / zoom out peta)
map.addControl(new GMapTypeControl());
>> Map type control diaktifkan (pilihan untuk menampilkan peta dalam mode hybrid, satelit, atau map2d)
map.addControl(new GOverviewMapControl());
>> Mapp overview diaktifkan untuk melihat peta dari jarak lebih jauh (ada dibagian pojok kanan bawah)

4.       Letak Marker
       var marker = new GMarker(new GLatLng(-7.797224,110.368797));
       >> Sebuah marker terletak di titik -7.797224,110.368797
marker.openInfoWindowHtml("<img src='http://static.kaskus.us/images/smilies/cystg.gif' width='70' height='50'/> <br/> Kota Yogyakarta<br/>titik koordinat latitude/longitude yang kamu masukan disini ");
>> Script diatas untuk menambahkan Info marker berupaa gambar dan teks


5.       Ukuran Peta
<div id="map" style="width: 800px; height: 600px"></div>
>> Ukuran peta 800x600px

Hasilnya akan terlihat seperti pada link berikut :
http://fbox.freetzi.com/files/mappost13.html



Coming Soon !
Tutorial Google Map API ( SQL / PHP ): mengambil data dari  database dan menampilkan sebagai marker .
Continue reading →
Selasa, 09 Agustus 2011

5 Aplikasi SMS terkeren Versi Blognetizen (Symbian s60v3-s60v5)

4 comments


SMS Forwarder
dari namanya saja sudah jelas SMS Forwarder atau SMS Penerus (Maksudnya meneruskan) SMS yang masuk ke nomer HP kita dan aplikasi dengan otomatis akan meneruskan sms ke nomer yang sudah kita tentukan. Dari aspek Kebutuhan Fungsional aplikasi ini sangat cocok bagi kamu yang merasa orang-orang sibuk (atau sok sibuk mungkin :p) yang punya banyak hp dengan nomer hp berbeda-beda. maka dengan menggunakan aplikasi ini kita tidak perlu membawa semua hp kita tersebut cukup pasangin aja aplikasi ini di setiap hp kita yng kita tinggal di rumah. [ download ]

SMS Auto Reply
SMS Auto Reply atau kalo bahasa indonesia sms membalas otomtis, nah seperti namanya aplikasi ini akan membalas sms yang masuk secara otomatis, menarik bukan kalo kamu lagi sibuk atau lagi gak mau nerima sms, aktifkan saja sms ini.
Facebook sms trik "like": aplikasi SMS Auto Reply dapat kita terapkan juga dalam facebook mobile(sms) misal kita mendaftar facebook sms, nah semisalkan kita berlangganan status fb orang lain lewat sms maka kita cukup ketik like (format setiap operator berbeda) maka apabila si orang2 tersebut yang kita berlangganan status fbnya lewat sms update status, maka kita akan selalu ngelike statusnya secara otomatis. [ download ]


SMS Scheduler
SMS Scheduler Yang ini lebih hebat lagi gan, seperti nama sms scheduler atau sms terjadwal, jadi fungsi aplikasi ini adalah membuat sms yang udah kita persiapkan secara terjadwal. SMS yang sudah kita tentukan kapan sms tersebut akan dikirim maka pada waktunya (yangtelah ditentukan) sms tersebut akan terkirim secara otomatis..
Facebook sms trik "Status terjadwal": aplikasi ini dapat kita terapkan juga untuk update otomatis status fb kita secara terjadwal kalo kita menggunakan facebook seluler(sms). [ download ]


SMS Exports
SMS Eksport adalah aplikasi untuk mengeksport sms yang ada diinbox kita kedalam format txt. mungkin bagi kita sms2 yang ada diinbox tidak penting dan kita hapus kapanpun kita mau . tapi bagi kamu yang suka mengumpulkan sms di inbox sampai ribuan alangkah lebih baik kalo kamu segera membackup sms tersebut dengan sms exsport dan kita simpan dimanapun kita mau (simpan di 4shared,ziddu,atau email qta biar aman :D) [ download ]


SMS Talk
SMS Talk atau SMS berbicara adalah sms yang dapat membacakan sms kita. aplikasi ini dapat kita set agar sms langsung otomatis dibacakan apabila ada sms masuk tanpa kita menyentuh ponsel kita (maksudnya apabila ada sms masuk sms tersebut langsung dibacakan oleh si aplikasi), atau dapat juga kita set membacakan sms2 tertentu saja yang ada di inbok. fitur seperti ini sebenernya sudah ada di semua handphone nokia Symbian hanya saja fitur bawaan nokia tidak mampu membacakan sms secara langsung apabila ada sms masuk, kemudian kekurangan kedua dari fitur bawaan nokia adalah system akan membacakan dalam pengucapan bahasa inggris sedangkan sms talk sudah mampu membacakan dalam pengucapan bahasa indonesia. misal smsnya "one" maka sms talk akan membacakan "o ne" kalau fitur bawaan nokia akan membcakan "wan" .. donk kan maksudnya :p . [ download ]

Continue reading →