Laman

24 Agu 2010

Step By Step Nambahin Google Map di Blog Agan..

Halo agan2 skalian, mmpung ga ada kerjaan, ane mw ksih tutorial buat nambahin aplikasi Google Map d Blog agan nih. Kali2 aja bermanfaat buat agan2 yg mw pamerin peta rumah agan ke temen2 agan, hehehe..

Tanpa basa-basi(cz ane udah basi), langsung aja gan ane ksih dah:

-Pertamax yg pasti agan harus login dlu k dalem blog agan(ya iyalah)
-Trus agan lngsung ngacir ke bagian pengaturan blog, trus pilih "rancangan".
-Nah, kan dsana ada sjenis form buat ngrancang blog. Trus ada pilihan utk "Tambah Gadget", agan plih deh yg ntu..
-Akan muncul sbuah form browser yg ngasih pilihan utk nambahin gadget apa. Dsitu ntar akan ada bnyak pilihan gadget. Nah, dari skian bnyak gadget, agan pilih yg gadget dg nama "HTML/Javascript"
-Stelah ntu akan muncul form yang minta anda msukkan "Judul" dan "Konten".
-Untuk judul ny gan boleh isi apa aja deh contoh:"Ni Google Map Ane"
-Nah buat yg konten agan msukin deh tulisan brikut:




Nah, trus simpen deh, slesai.... eeeeeeiiiiiiitttsss, jngan sneng dulu gan...
Ada bbrapa yang perlu d edit dari code d atas gan. Dikit kok gan... Kita bahas stelah ni ya gan..


1.


Kode di atas digunakan untuk manggil google map ke blog kita gan. Nah, untuk itu agan perlu punya key ny Google Map gan, dsana blum ada Key nya gan. Buat ngdapetinnya agan buka  http://code.google.com/apis/maps/signup.html. Nah, agan ikutin aja ptunjuk yang ada disana. Ntar agan dminta masukkin nama blog agan, trus baru deh si om Google ngasih code key nya ke agan.Stelah dapet code key ny, agan copy paste deh ke code di atas. Pertama, hapus tulisan "MASUKKIN KEY NYA DISINI GAN
" dan setelah itu ganti dg code key tadi gan..
2.




Nah, klo yang ni. Cuma buat ngeset besar apa kecil ny ukuran Google map di blog agan. Ni terserah agan mw drubah apa nggak. Klo agan mw ngrubah ukurannya, agan tinggal rubah angka 600px untuk panjang, n angka 300px untuk lebar nya gan.

3.[code]
map.centerAndZoom(new GPoint(106.87107,-6.230200), 2);
    [/code]

Nah, angka yang ada dalem kurung ntu buat ngeset koordinat nya gan. Klo agan berniat untuk nampilin koordinat wilayah rumah agan, agan tinggal buka google map gan, trus agan cari deh, koordinat rumah agan. Trus agan ganti dsana gan.

4.[code]
        var point = new GPoint(106.8710,-6.230295);
        address = "Ini Kontrakan Ane ganAl Kahfi";
        var marker = createInfoMarker(point, address);
[/code]

Nih code buat nampilin balon2/pnunjuk suatu tempat gan. Misal ny agan mw nunjukin posisi sekolah agan, rumah, dll..
Baris pertama, angka yg d dalem kurung nunjukin koordinat rumah agan. Sama kayak point3 gan. Koordinatny dcari d google map.Nah, bedanya dengen yg point 3, point 3 ntu buat ngeset koordinat wilayah ny, kalo yg ini, bner2 ngeset koordinat rumah ny gan.
Baris kedua. Ntu ada tulisan "Ini Kontrakan Ane ganAl Kahfi", nah ntu cuma buat nampilin tulisan apa yg akan muncul d peta klo kita ngklik posisi tersebut. Nah, ntu terserah mw agan isi apa aja, mw agan isi alamat, nama agan, dll. Terserah agan. tulisan "" ntu buat ngasih enter gan.


Udah deh, gan. Slsai sdah...
Tinggal d save, n google Map udah tampil d layar agan. Contoh output ny ada d blog ane, ntu d pojok kanan atas(kayak PKS aja). Ntu bukan foto ya gan, agan bisa coba klik2 deh. Ntu google map gan..

Hehe, skian dari ane gan..
Smoga bermanfaat ya gan...

3 komentar:

  1. bukannya 3 hari yang lalu tu masi ujian y gan??
    kagak belajar dunk berarti,,mantaph pisan agan yg satu ini..
    but, nice share gan,,patut dicoba..

    BalasHapus
  2. blajar gan. Tpi porsi ny rada bkurang gan.

    Tpi dcoba aja gan tuh cara ny. Kali aja bguna buat skripsi..

    BalasHapus