Tutorial Google Maps API

T
TTu
uut
tto
oor
rri
iia
aal
ll D
DDa
aas
ssa
aar
rr
P
PPe
eem
mmr
rro
oog
ggr
rra
aam
mma
aan
nn
G
GGo
ooo
oog
ggl
lle
ee M
MMa
aap
pps
ss A
AAP
PPI
II

Amri Shodiq (amri.shodiq@gmail.com)
http://amrishodiq.blogspot.com

Latar belakang
Google Maps adalah layanan gratis Google yang cukup popular. Anda dapat menambahkan fitur Google
Maps dalam web Anda sendiri dengan Google Maps API. Google Maps API adalah library JavaScript.
Menggunakan/memprogram Google Maps API sangat mudah. Yand Anda butuhkan adalah pengetahuan
tentang HTML dan JavaScript, serta koneksi Internet. Dengan menggunakan Google Maps API Anda
dapat menghemat waktu dan biaya Anda untuk membangun aplikasi peta digital yang handal, sehingga
Anda dapat focus hanya pada data-data Anda. Biarkan data peta-peta dunia menjadi urusan Google saja.
Saat ini versi terakhir Google Map API adalah versi 3. Versi ini, katanya, akan tampil lebih cepat dari versi
sebelumnya khususnya untuk browser ponsel. Ya, ponsel, Anda bisa membangun situs web yang
dilengkapi peta untuk iPhone dan ponsel dengan system operasi Android.
Bagaimana memulainya?
Saya ingin menampilkan kota Depok di file HTML saya (di dalam komputer saya saja) pada tag div
berukuran 600 pixel x 600 pixel. Bagaimana melakukannya? Saya akan tunjukkan kepada Anda,
bagaimana menghasilkan peta seperti ini:

Menggunakan Google Maps API
Kita bisa mulai menulis program Google Map API dengan urutan sebagai berikut:
1. Memasukkan Maps API JavaScript ke dalam HTML kita.
2. Membuat element div dengan nama map_canvas untuk menampilkan peta.
3. Membuat beberapa objek literal untuk menyimpan property-properti pada peta.
4. Menuliskan fungsi JavaScript untuk membuat objek peta.
5. Meng-inisiasi peta dalam tag body HTML dengan event onload.
Beginilah kode program dasarnya:
<ht ml >
<head>
<met a name=" vi ewpor t " cont ent =" i ni t i al - scal e=1. 0, user - scal abl e=no" / >

<! - - Langkah 1 - - >
<scr i pt t ype=" t ext / j avascr i pt "
sr c=" ht t p: / / maps. googl e. com/ maps/ api / j s?sensor =t r ue& key=ABQI AAAA8t t 4eKTuB
ZMVnLJ f P2BZr BT2yXp_ZAY8_uf C3CFXhHI E1NvwkxS4Rz1LFzG0odNPt k8VLkdr QF5gr A" ></ scr i
pt >

<scr i pt t ype=" t ext / j avascr i pt " >

/ / Langkah 4
f unct i on i ni t i al i ze( ) {
var l at l ng = new googl e. maps. Lat Lng( - 6. 4, 106. 8186111) ;
var myOpt i ons = {
zoom: 13,
cent er : l at l ng,
mapTypeI d: googl e. maps. MapTypeI d. ROADMAP
};

/ / Langkah 3
var map = new googl e. maps. Map( document . get El ement ByI d( " map_canvas" ) ,
myOpt i ons) ;
}

</ scr i pt >
</ head>

<! - - Langkah 5 - - >
<body onl oad=" i ni t i al i ze( ) " >

<! - - Langkah 2 - - >
<di v i d=" map_canvas" st yl e=" wi dt h: 600px; hei ght : 600px" ></ di v>

</ body>
</ ht ml >
Perhatikan urutan langkah-langkahnya yang saya tuliskan dalam komentar HTML dan JavaScript kode
HTML di atas.
Google Maps API key
Perhatikan baris ini:
<scr i pt t ype=" t ext / j avascr i pt "
sr c=" ht t p: / / maps. googl e. com/ maps/ api / j s?sensor =true& key=ABQIAAAA8tt4eKTuB
ZMVnLJfP2BZrBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS4Rz1LFzG0odNPtk8VLkdrQF5grA" ></ scr i
pt >
Kode yang saya cetak tebal dan berwarna merah adalah Google Maps API key. Anda harus mendaftar
untuk mendapatkan key untuk website Anda, jika Anda ingin menampilkan peta untuk website Anda.
Setelah mendaftar, termasuk memberikan alamat website Anda, Google akan member Anda sebuah API
key. Bentuknya kurang lebih seperti ini (tentu saja milik Anda nantinya akan berbeda):
ABQIAAAA8tt4eKTuBZMVnLJfP2BZrBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS4Rz1LFzG0odNPtk8VL
kdrQF5grA
Key yang saya gunakan di atas digunakan untuk computer local (saya daftarkan untuk alamat situ
localhost). Jadi, jika Anda ingin mencoba menulis program untuk dijalankan di computer Anda sendiri,
sementara Anda bisa pakai key ini. Nanti kalau program Anda sudah siap, baru Anda perlu mendaftar
sendiri API key Anda, kemudian dipakai menggantikan API key contoh dari saya.
Parameter sensor berisi true (berwarna hijau) digunakan untuk menggunakan sensor lokasi , misalnya
GPS (jika ada, misalnya jika aplikasi web based kita diakses dengan ponsel tertentu yang memiliki GPS).
Elemen peta pada tag div
Pada baris ini:
<di v i d=" map_canvas" st yl e=" wi dt h: 600px; hei ght : 600px" ></ di v>
Kita menentukan lebar tag div adalah 600px, dan lebar juga 600px, dengan style CSS. Ukuran peta yang
ditampilkan akan selalu mengikuti ukuran yang Anda tentukan pada tag tersebut.
Setting peta
Kita menentukan setting peta pada baris program ini:
var l at l ng = new googl e. maps. Lat Lng( -6.4, 106.8186111) ;
var myOpt i ons = {
zoom: 13,
cent er : l at l ng,
mapTypeI d: googl e. maps. MapTypeI d. ROADMAP
};
Saya telah memberikan lokasi Latitude dan Longitude pusat kota Depok, yaitu -6,4 dan 106.8186111.
Tentu Anda tidak melupakan pelajaran Geografi selama SMP bukan? Ingat Lintang Utara/Selatan dan
Bujur Timur? Itulah dia. Untuk kota Depok, posisi dalam peta latitude dan longitude-nya adalah -6,4 dan
106.8186111. Jadi, jika Anda ingin menampilkan kota Anda, misalnya Jakarta Selatan atau Yogyakarta,
maka Anda harus cari dulu lokasi kota Anda berdasarkan Latitude dan Longitude. Anda bisa
menggunakan informasi dari situs ConvertUnits.com untuk mengetahui berapa latitude dan longitude
kota Anda.
Parameter zoom menentukan zoom level yang Anda inginkan. Semakin kecil nilainya, semakin jauh jarak
pandang Anda dari tanah. Nilai 0 akan menunjukkan peta seluruh dunia. Nilai maksimal adalah 19.
Parameter mapTypeId menentukan jenis peta yang akan ditampilkan. Pilihannya ada 4:
1. ROADMAP, ini yang saya pilih, untuk menampilkan peta biasa 2 dimensi
2. SATELLITE, untuk menampilkan foto satelit
3. TERRAIN, untuk menunjukkan relief fisik permukaan bumi dan menunjukkan seberapa tingginya
suatu lokasi, contohnya akan menunjukkan gunung dan sungai
4. HYBRID, akan menunjukkan foto satelit yang diatasnya tergambar pula apa yang tampil pada
ROADMAP (jalan dan nama kota)
Sebenarnya ada 3 kelompok lagi jenis peta yang bisa dipakai, tetapi pembahasannya di luar lingkup
ebook ini. Mereka adalah:
Kelompok Google Map Maker, peta-peta dalam kategori ini merupakan kontribusi dari seluruh
dunia
Kelompok peta Celestial, selain peta bumi, Google juga menyediakan peta bulan, dan Mars
Kelompok peta 3D, membutuhkan plugins Google Earth
Menampilkan peta pada tag div
Di atas, kita telah membuat fungsi initialize(). Fungsi ini menampilkan peta Google Maps pada tag div
dengan id map_canvas. Masalahnya adalah, peta tidak akan muncul jika fungsi ini tidak dipanggil. Maka,
fungsi ini akan dipangil pada event onload, ketika semua object sudah siap, termasuk JavaScript Google
Maps API sudah terdownload sepenihnya oleh browser. Pemanggilan tersebut terjadi pada baris ini:
<body onl oad=" i ni t i al i ze( ) " >
Interaksi dengan peta
Interaksi dengan peta Google Maps API bisa dilakukan dengan beberapa cara, diantaranya dengan
method-method seperti: setCenter(), panTo() dan zoomIn().
Selain method, Google Maps API juga mendukung event listener. Penjelasan tentang method dan event
tidak akan diberikan dalam ebook ini, tetapi Anda langsung dapat melihat bagaimana cara kerja dan
fungsinya melalui code snippet-code snippet yang ada di bagian berikutnya.
Code Snippet
Menampilkan peta sederhana
Berikut ini diberikan contoh, bagaimana menampilkan peta sederhana kota Palo Alto di mana Google
berada. Peta ini ditampilkan tanpa Control dan Marker. Hanya peta.

i f ( GBr owser I sCompat i bl e( ) ) {
var map = new GMap2( document . get El ement ByI d( " map_canvas" ) ) ;
map. set Cent er ( new GLat Lng( 37. 4419, - 122. 1419) , 13) ;
}
}

Menambahkan 10 Marker secara random di kota Depok
Berikut saya coba berikan contoh bagaimana menampilkan kota Depok dan menambahkan 10 Marker
yang lokasinya acak. Ini ditujukan agar Anda mendapat gambaran bagaimana menambahkan Marker
standar di atas peta.

map. set Cent er ( new GLat Lng( - 6. 4, 106. 8186111) , 13) ;

/ / Add 10 mar ker s t o t he map at r andoml ocat i ons
var bounds = map. get Bounds( ) ;
var sout hWest = bounds. get Sout hWest ( ) ;
var nor t hEast = bounds. get Nor t hEast ( ) ;
var l ngSpan = nor t hEast . l ng( ) - sout hWest . l ng( ) ;
var l at Span = nor t hEast . l at ( ) - sout hWest . l at ( ) ;
f or ( var i = 0; i < 10; i ++) {
var poi nt = new GLat Lng( sout hWest . l at ( ) + l at Span * Mat h. r andom( ) ,
sout hWest . l ng( ) + l ngSpan * Mat h. r andom( ) ) ;
map. addOver l ay( new GMar ker ( poi nt ) ) ;
}
}
}

Membuat peta yang berpindah dari Depok ke Palo Alto setelah 1 detik
Berikut ini contoh membuat peta yang dapat beranimasi, berpindah dari Depok kemudian pindah ke
Palo Alto. Ini bukanlah contoh yang baik. Untuk implementasi yang baik, sebaiknya pindah ke lokasi yang
dekat saja dan bertahap. Screenshot tidak diberikan karena tidak menggambarkan animasi.
wi ndow. set Ti meout ( f unct i on( ) {
map. panTo( new GLat Lng( 37. 4569, - 122. 1569) ) ;
}, 1000) ;
}
}

Menampilkan window info di atas peta

map. openI nf oWi ndow( map. get Cent er ( ) ,
document . cr eat eText Node( " Hel l o, wor l d" ) ) ;
}
}

Event: Menampilkan alert ketika user mengklik peta
Contoh program berikut ini menunjukkan bagaimana menangkap event click kemudian melakukan
proses sederhan, yaitu menampilkan alert.

GEvent . addLi st ener ( map, " cl i ck" , f unct i on( ) {
al er t ( " You cl i cked t he map. " ) ;
}) ;
}
}

Event: Menampilkan alert posisi tengah peta yang baru setelah drag
selesai
Contoh program berikut menunjukkan penggunaan event moveend. Ketika akhir drag, baru aksi tertentu
dijalankan.

GEvent . addLi st ener ( map, " moveend" , f unct i on( ) {
var cent er = map. get Cent er ( ) ;
al er t ( cent er . t oSt r i ng( ) ) ;
}) ;
}
}

Event: Menambahkan 5 titik di peta yang masing-masing menampilkan
potongan pesan rahasia jika diklik
Kode program berikut berfungsi menyimpan 5 potong pesan yang kemudian dipasang pada window
Info 5 buah Marker yang diletakkan secara acak.

var message = [ " Thi s" , " i s" , " t he" , " secr et " , " message" ] ;


/ / Cr eat es a mar ker at t he gi ven poi nt
/ / Cl i cki ng t he mar ker wi l l hi de i t
f unct i on cr eat eMar ker ( l at l ng, number ) {
var mar ker = new GMar ker ( l at l ng) ;
mar ker . val ue = number ;
GEvent . addLi st ener ( mar ker , " cl i ck" , f unct i on( ) {
var myHt ml = " #" + number + " " + message[ number - 1] ;
map. openI nf oWi ndowHt ml ( l at l ng, myHt ml ) ;
}) ;
r et ur n mar ker ;
}

/ / Not e t hat we don' t add t he secr et message t o t he mar ker ' s i nst ance
dat a
f or ( var i = 0; i < 5; i ++) {
var l at l ng = new GLat Lng( sout hWest . l at ( ) + l at Span * Mat h. r andom( ) ,
map. addOver l ay( cr eat eMar ker ( l at l ng, i + 1) ) ;
}
}
}

Event: Menampilkan window info berisi latitude, longitude dan zoom
level ketika peta diklik
Dalam program berikut, kita menangkap event klik pada peta, kemudian menampilkan window Info
berisi latitude, longitude dan zoom level pada lokasi tempat pengguna mengklik.


GEvent . addLi st ener ( map, " cl i ck" , f unct i on( over l ay, l at l ng) {
i f ( l at l ng) {
var myHt ml = " Lat i t ude & Longi t ude:
" +map. f r omLat LngToDi vPi xel ( l at l ng) + " , zooml evel " + map. get Zoom( ) ;
map. openI nf oWi ndow( l at l ng, myHt ml ) ;
}
}) ;
map. addCont r ol ( new GSmal l MapCont r ol ( ) ) ;
map. addCont r ol ( new GMapTypeCont r ol ( ) ) ;
}
}

Event: Menampilkan alert jumlah klik yang sudah dilakukan kepada
peta
Aplikasi Google Maps API juga bisa menyimpan counter, misalnya dalam program ini ditunjukkan untuk
menyimpan counter klik.

f unct i on MyAppl i cat i on( ) {
t hi s. count er = 0;
t hi s. map = new GMap2( document . get El ement ByI d( " map_canvas" ) ) ;
t hi s. map. set Cent er ( new GLat Lng( - 6. 4, 106. 8186111) , 13) ;
GEvent . bi nd( t hi s. map, " cl i ck" , t hi s, t hi s. onMapCl i ck) ;
}

MyAppl i cat i on. pr ot ot ype. onMapCl i ck = f unct i on( ) {
t hi s. count er ++;
al er t ( " Anda sudah mengkl i k " + t hi s. count er +
" kal i . " ) ;
}

var appl i cat i on = new MyAppl i cat i on( ) ;
}
}

Event: Menghapus event listener
Program berikut menunjukkan bagaimana cara menghilangkan event listener setelah klik 1 kali.
Sebelumnya, ketika event klik program ini menghapus Marker.
f unct i on MyAppl i cat i on( ) {
t hi s. count er = 0;
t hi s. map = new GMap2( document . get El ement ByI d( " map_canvas" ) ) ;
t hi s. map. set Cent er ( new GLat Lng( - 6. 4, 106. 8186111) , 13) ;
var myEvent Li st ener = GEvent . bi nd( t hi s. map, " cl i ck" , t hi s, f unct i on( over l ay,
l at l ng) {
i f ( t hi s. count er == 0) {
i f ( l at l ng) {
t hi s. map. addOver l ay( new GMar ker ( l at l ng) )
t hi s. count er ++;
} el se i f ( over l ay i nst anceof GMar ker ) {
/ / Thi s code i s never execut ed as t he event l i st ener i s
/ / r emoved t he second t i me t hi s event i s t r i gger ed
t hi s. r emoveOver l ay( mar ker )
}
} el se {
GEvent . r emoveLi st ener ( myEvent Li st ener ) ;
}
}) ;
}

var appl i cat i on = new MyAppl i cat i on( ) ;
}

Control: Menampilkan Control sederhana
GSmallMapControl menampilkan 4 tombol panah dan tombol zoom in dan zoom out saja dalam bentuk
yang kecil. GMapTypeControl adalah Control untuk menampilkan, defaultnya, 3 tipe peta: peta biasa,
foto satelit dan gabungan antara foto satelit yang ditimpa dengan peta.

var map = new GMap2( document . get El ement ByI d( " map_canvas" ) )
}
}

Control: Menampilkan posisi control di bagian kanan bawah peta setelah
peta di-double click
Kode program berikut member contoh bagaimana kita bisa mengatur letak Control. Selain itu juga
memperkenalkan event double click.

var mapTypeCont r ol = new GMapTypeCont r ol ( ) ;

var t opRi ght = new GCont r ol Posi t i on( G_ANCHOR_TOP_RI GHT, new GSi ze( 10, 10) ) ;

var bot t omRi ght = new GCont r ol Posi t i on( G_ANCHOR_BOTTOM_RI GHT, newGSi ze( 10, 1
0) ) ;
map. addCont r ol ( mapTypeCont r ol , t opRi ght ) ;
GEvent . addLi st ener ( map, " dbl cl i ck" , f unct i on( ) {
map. r emoveCont r ol ( mapTypeCont r ol ) ;
map. addCont r ol ( new GMapTypeCont r ol ( ) , bot t omRi ght ) ;
}) ;
}
}

Control: Menampilkan bentuk Control yang tidak biasa
Kita bisa menggunakan bentuk Control yang tidak standar, tetapi dengan kemampuan yang sama.
Contohnya adalah dengan menampilkan dua tombol, untuk zoom in dan zoom out.

/ / A Text ual ZoomCont r ol i s a GCont r ol t hat di spl ays t ext ual " ZoomI n"
/ / and " ZoomOut " but t ons ( as opposed t o t he i coni c but t ons used i n
/ / Googl e Maps) .
f unct i on Text ual ZoomCont r ol ( ) {
}
Text ual ZoomCont r ol . pr ot ot ype = new GCont r ol ( ) ;

/ / Cr eat es a one DI V f or each of t he but t ons and pl aces t hemi n a cont ai ner
/ / DI V whi ch i s r et ur ned as our cont r ol el ement . We add t he cont r ol t o
/ / t he map cont ai ner and r et ur n t he el ement f or t he map cl ass t o
/ / posi t i on pr oper l y.
Text ual ZoomCont r ol . pr ot ot ype. i ni t i al i ze = f unct i on( map) {
var cont ai ner = document . cr eat eEl ement ( " di v" ) ;

var zoomI nDi v = document . cr eat eEl ement ( " di v" ) ;
t hi s. set But t onSt yl e_( zoomI nDi v) ;
cont ai ner . appendChi l d( zoomI nDi v) ;
zoomI nDi v. appendChi l d( document . cr eat eText Node( " ZoomI n" ) ) ;
GEvent . addDomLi st ener ( zoomI nDi v, " cl i ck" , f unct i on( ) {
map. zoomI n( ) ;
}) ;

var zoomOut Di v = document . cr eat eEl ement ( " di v" ) ;
t hi s. set But t onSt yl e_( zoomOut Di v) ;
cont ai ner . appendChi l d( zoomOut Di v) ;
zoomOut Di v. appendChi l d( document . cr eat eText Node( " ZoomOut " ) ) ;
GEvent . addDomLi st ener ( zoomOut Di v, " cl i ck" , f unct i on( ) {
map. zoomOut ( ) ;
}) ;

map. get Cont ai ner ( ) . appendChi l d( cont ai ner ) ;
r et ur n cont ai ner ;
}

/ / By def aul t , t he cont r ol wi l l appear i n t he t op l ef t cor ner of t he
/ / map wi t h 7 pi xel s of paddi ng.
Text ual ZoomCont r ol . pr ot ot ype. get Def aul t Posi t i on = f unct i on( ) {
r et ur n new GCont r ol Posi t i on( G_ANCHOR_TOP_LEFT, new GSi ze( 7, 7) ) ;
}

/ / Set s t he pr oper CSS f or t he gi ven but t on el ement .
Text ual ZoomCont r ol . pr ot ot ype. set But t onSt yl e_ = f unct i on( but t on) {
but t on. st yl e. t ext Decor at i on = " under l i ne" ;
but t on. st yl e. col or = " #0000cc" ;
but t on. st yl e. backgr oundCol or = " whi t e" ;
but t on. st yl e. f ont = " smal l Ar i al " ;
but t on. st yl e. bor der = " 1px sol i d bl ack" ;
but t on. st yl e. paddi ng = " 2px" ;
but t on. st yl e. mar gi nBot t om= " 3px" ;
but t on. st yl e. t ext Al i gn = " cent er " ;
but t on. st yl e. wi dt h = " 6em" ;
but t on. st yl e. cur sor = " poi nt er " ;
}

map. addCont r ol ( new Text ual ZoomCont r ol ( ) ) ;
}
}

Control: Menampilkan Local Search


/ / Cr eat e and Cent er a Map
map. addCont r ol ( new GLar geMapCont r ol ( ) ) ;

/ / bi nd a sear ch cont r ol t o t he map, suppr ess r esul t l i st

map. addCont r ol ( new googl e. maps. Local Sear ch( ) , newGCont r ol Posi t i on( G_ANCHOR_
BOTTOM_RI GHT, new GSi ze( 10, 20) ) ) ;
}
}
GSear ch. set OnLoadCal l back( i ni t i al i ze) ;

Control: Menampilkan Control tipe peta
Kode program berikut menunjukkan kepada Anda bagaimana menampilkan control Map Type tanpa tipe
Hybrid.


var map = new googl e. maps. Map( document . get El ement ByI d( " map_canvas" ) ,
{ si ze: new GSi ze( 640, 320) }) ;

map.removeMapType(G_HYBRID_MAP);

var mapCont r ol = new GMapTypeCont r ol ( ) ;
map. addCont r ol ( mapCont r ol ) ;

}
}

Control: Menampilkan label dengan check box untuk menampilkan atau
menyembunyikan nama kota,dan jalan
Dalam aplikasi, kadang kita ingin menunjukkan atau menyembunyikan nama-nama kota atau jalan. Ini
bisa kita lakukan dalam contoh program berikut. Dalam contoh berikut, Anda dapat melihat bagaimana
penampilan nama jalan dan kota dapat dikendalikan dengan sebuah check box (dan label) yang
menempel pada control Map Type.

/ / def i ne t he cr osshai r t i l e l ayer and i t s r equi r ed f unct i ons
var cr ossLayer = new GTi l eLayer ( new GCopyr i ght Col l ect i on( " " ) , 0, 15) ;
cr ossLayer . get Ti l eUr l = f unct i on( t i l e, zoom) {
r et ur n " . / i ncl ude/ t i l e_cr osshai r s. png" ;
}
cr ossLayer . i sPng = f unct i on( ) {r et ur n t r ue; }

/ / Cr eat e a new map t ype i ncor por at i ng t he t i l e l ayer
var l ayer Ter Cr oss = [ G_PHYSI CAL_MAP. get Ti l eLayer s( ) [ 0] ,
cr ossLayer ] ;
var mt Ter Cr oss = new GMapType( l ayer Ter Cr oss,
G_PHYSI CAL_MAP. get Pr oj ect i on( ) , " Ter +" ) ;

var map = new GMap2( document . get El ement ByI d( " map_canvas" ) ,
{ si ze: new GSi ze( 640, 320) } ) ;
map. addMapType( G_PHYSI CAL_MAP) ;
map. addMapType( mt Ter Cr oss) ;
map. addCont r ol ( new GLar geMapCont r ol ( ) )

var mapCont r ol = new GHi er ar chi cal MapTypeCont r ol ( ) ;

/ / Set up map t ype menu r el at i onshi ps
mapCont r ol . cl ear Rel at i onshi ps( ) ;

mapCont r ol . addRel at i onshi p( G_SATELLI TE_MAP, G_HYBRI D_MAP, " Label s" , f al se) ;
mapCont r ol . addRel at i onshi p( G_PHYSI CAL_MAP, mt Ter Cr oss, " Cr osshai r s" ) ;

/ / Add cont r ol af t er you' ve speci f i ed t he r el at i onshi ps
map. addCont r ol ( mapCont r ol ) ;
}
}

Marker: Menampilkan Marker sederhana
Sedikit mengulang yang sudah-sudah. Dalam contoh berikut, Anda akan melihat bagaimana
menambahkan beberapa Marker sederhana di atas kota Depo.


f or ( var i = 0; i < 10; i ++) {
map. addOver l ay( new GMar ker ( l at l ng) ) ;
}
}
}

Marker: Menampilkan Marker yang bisa dipindah
Saya tidak bisa menunjukkan screenshot untuk kode berikut karena tidak akan banyak menggambarkan
kondisinya. Intinya, dengan kode program berikut Anda bisa membuat Marker yang dapat dipindahkan.
Caranya adalah dengan mendefinisikan sebuah Marker dengan option draggable bernilai true, kemudian
menggunakan event listener dragstart dan event dragend.
var cent er = new GLat Lng( - 6. 4, 106. 8186111) ;
map. set Cent er ( cent er , 13) ;

var mar ker = new GMar ker ( cent er , {dr aggabl e: t r ue}) ;

GEvent . addLi st ener ( mar ker , " dr agst ar t " , f unct i on( ) {
map. cl oseI nf oWi ndow( ) ;
}) ;

GEvent . addLi st ener ( mar ker , " dr agend" , f unct i on( ) {
mar ker . openI nf oWi ndowHt ml ( " J ust bounci ng al ong. . . " ) ;
}) ;

map. addOver l ay( mar ker ) ;

}
}

Marker: Menampilkan Marker dalam bentuk lain, misalnya gambar dari
URL tertentu
Jika bosan dengan Marker yang begitu-begitu saja, maka dalam contoh berikut, Anda bisa saja
menampilkan Marker dalam bentuk lain, yaitu gambar/ikon dari sebuah URL.
Baris ini:
var bl ueI con = new GI con( G_DEFAULT_I CON) ;
bl ueI con. i mage = " ht t p: / / maps. googl e. com/ mapf i l es/ ms/ mi cons/ cabs. png" ;

membuat sebuah instance class GIcon, kemudian mengubah properties image menjadi gambar yang
sudah kita sediakan, misalnya di sini gambar mobil.
Langkah berikutnya adalah mengatur agar markerOptions menggunakan icon yang sudah kita siapkan.
/ / Set up our GMar ker Opt i ons obj ect
mar ker Opt i ons = { i con: bl ueI con };

Langkah terakhir adalah menampilkan Marker dengan opsi di atas:
map. addOver l ay( new GMar ker ( l at l ng, mar ker Opt i ons) ) ;


/ / Cr eat e our " t i ny" mar ker i con
var bl ueI con = new GI con( G_DEFAULT_I CON) ;
bl ueI con. i mage = " ht t p: / / maps. googl e. com/ mapf i l es/ ms/ mi cons/ cabs. png" ;

/ / Set up our GMar ker Opt i ons obj ect
mar ker Opt i ons = { i con: bl ueI con };

f or ( var i = 0; i < 10; i ++) {
map. addOver l ay( new GMar ker ( l at l ng, mar ker Opt i ons) ) ;
}
}
}

Icon marker bisa didapat dari http://abeliantechnologies.com/google_map_marker.php atau Anda buat
sendiri.
Marker: Menampilkan contoh perkiraan cuaca
Fitur ini berjalan lancar ketika peta saya arahkan ke Eropa. Tetapi saya belum berhasil menggunakan
fitur ini untuk Indonesia. Saya terus terang belum tahu sebabnya.

var I MAGES = [ " sun" , " r ai n" , " snow" , " st or m" ] ;
var I CONS = [ ] ;
var map = nul l ;
var mgr = nul l ;

f unct i on set upMap( ) {
map = new GMap2( document . get El ement ByI d( " map" ) ) ;
map. set Cent er ( new GLat Lng( 48. 25, 11. 00) , 4) ;
map. enabl eDoubl eCl i ckZoom( ) ;
wi ndow. set Ti meout ( set upWeat her Mar ker s, 0) ;
}
}

f unct i on get Weat her I con( ) {
var i = Mat h. f l oor ( I MAGES. l engt h*Mat h. r andom( ) ) ;
i f ( ! I CONS[ i ] ) {
var i con = new GI con( ) ;
i con. i mage = " ht t p: / / gmaps- ut i l i t y-
l i br ar y. googl ecode. com/ svn/ t r unk/ mar ker manager / r el ease/ exampl es/ i mages/ "
+ I MAGES[ i ] + " . png" ;
i con. i conAnchor = new GPoi nt ( 16, 16) ;
i con. i nf oWi ndowAnchor = new GPoi nt ( 16, 0) ;
i con. i conSi ze = new GSi ze( 32, 32) ;
i con. shadow = " ht t p: / / gmaps- ut i l i t y-
l i br ar y. googl ecode. com/ svn/ t r unk/ mar ker manager / r el ease/ exampl es/ i mages/ "
+ I MAGES[ i ] + " - shadow. png" ;
i con. shadowSi ze = new GSi ze( 59, 32) ;
I CONS[ i ] = i con;
}
r et ur n I CONS[ i ] ;
}

f unct i on get RandomPoi nt ( ) {
var l at = 48. 25 + ( Mat h. r andom( ) - 0. 5) *14. 5;
var l ng = 11. 00 + ( Mat h. r andom( ) - 0. 5) *36. 0;
r et ur n new GLat Lng( Mat h. r ound( l at *10) / 10, Mat h. r ound( l ng*10) / 10) ;
}

f unct i on get Weat her Mar ker s( n) {
var bat ch = [ ] ;
f or ( var i = 0; i < n; ++i ) {
bat ch. push( new GMar ker ( get RandomPoi nt ( ) , { i con: get Weat her I con( ) }) ) ;
}
r et ur n bat ch;
}

f unct i on set upWeat her Mar ker s( ) {
mgr = new Mar ker Manager ( map) ;
mgr . addMar ker s( get Weat her Mar ker s( 20) , 3) ;
mgr . r ef r esh( ) ;
}

Service: Contoh Service sederhana mencari lokasi berdasarkan input
Google Maps sudah memiliki fitur yang cukup lengkap, termasuk mencari lokasi kota pada peta. Dalam
contoh berikut, kita menggunakan class GClientGeocoder untuk mendapatkan lokasi alamat yang kita
berikan. Class ini akan menanyakan langsung kepada server Google tentang lokasi tersebut.
GClientGeocoder termasuk dalam Google Maps API versi 2. Class ini memiliki method-method yang
canggih seperti getLatLng() untuk mendapatkan Latitude dan Longitude dari input berupa String alamat.
Method inilah yang kita gunakan dalam contoh program di bawah ini.

var map = nul l ;
var geocoder = nul l ;

map = new GMap2( document . get El ement ByI d( " map_canvas" ) ) ;
geocoder = new GCl i ent Geocoder ( ) ;
}
}

f unct i on showAddr ess( addr ess) {
i f ( geocoder ) {
geocoder . get Lat Lng(
addr ess,
f unct i on( poi nt ) {
i f ( ! poi nt ) {
al er t ( addr ess + " not f ound" ) ;
} el se {
map. set Cent er ( poi nt , 13) ;
var mar ker = new GMar ker ( poi nt ) ;
mar ker . openI nf oWi ndowHt ml ( addr ess) ;
}
}
) ;
}
}

Service: Mencari alamat tertentu dengan Geolocation

var map;
var geocoder ;

map. set Cent er ( new GLat Lng( 34, 0) , 1) ;
}

/ / addAddr essToMap( ) i s cal l ed when t he geocoder r et ur ns an
/ / answer . I t adds a mar ker t o t he map wi t h an open i nf o wi ndow
/ / showi ng t he ni cel y f or mat t ed ver si on of t he addr ess and t he count r y code.
f unct i on addAddr essToMap( r esponse) {
map. cl ear Over l ays( ) ;
i f ( ! r esponse | | r esponse. St at us. code ! = 200) {
al er t ( " Sor r y, we wer e unabl e t o geocode t hat addr ess" ) ;
} el se {
pl ace = r esponse. Pl acemar k[ 0] ;
poi nt = new GLat Lng( pl ace. Poi nt . coor di nat es[ 1] ,
pl ace. Poi nt . coor di nat es[ 0] ) ;
mar ker = new GMar ker ( poi nt ) ;
mar ker . openI nf oWi ndowHt ml ( pl ace. addr ess + ' ' +
' Count r y code: ' + pl ace. Addr essDet ai l s. Count r y. Count r yNameCode) ;
}
}

/ / showLocat i on( ) i s cal l ed when you cl i ck on t he Sear ch but t on
/ / i n t he f or m. I t geocodes t he addr ess ent er ed i nt o t he f or m
/ / and adds a mar ker t o t he map at t hat l ocat i on.
f unct i on showLocat i on( ) {
var addr ess = document . f or ms[ 0] . q. val ue;
geocoder . get Locat i ons( addr ess, addAddr essToMap) ;
}

/ / f i ndLocat i on( ) i s used t o ent er t he sampl e addr esses i nt o t he f or m.
f unct i on f i ndLocat i on( addr ess) {
document . f or ms[ 0] . q. val ue = addr ess;
showLocat i on( ) ;
}

Service: Mendapatkan alamat dari lokasi yang di-klik di peta
Anda penasaran dengan alamat suatu tempat yang Anda temukan? Coba cara ini. Kita bisa mendapatkan
alamat dari suatu titik di peta. Meskipun tidak begitu lengkap. Coba test kode program ini.

var map;
var geocoder ;
var addr ess;

map. addCont r ol ( new GLar geMapCont r ol ) ;
GEvent . addLi st ener ( map, " cl i ck" , get Addr ess) ;
}

f unct i on get Addr ess( over l ay, l at l ng) {
i f ( l at l ng ! = nul l ) {
addr ess = l at l ng;
geocoder . get Locat i ons( l at l ng, showAddr ess) ;
}
}

f unct i on showAddr ess( r esponse) {
i f ( ! r esponse | | r esponse. St at us. code ! = 200) {
al er t ( " St at us Code: " + r esponse. St at us. code) ;
} el se {
pl ace = r esponse. Pl acemar k[ 0] ;
poi nt = new GLat Lng( pl ace. Poi nt . coor di nat es[ 1] ,
mar ker = new GMar ker ( poi nt ) ;
mar ker . openI nf oWi ndowHt ml (
' or i g l at l ng: ' + r esponse. name + ' ' +

' l at l ng: ' + pl ace. Poi nt . coor di nat es[ 1] + " , " +pl ace. Poi nt . coor di nat e
s[ 0] + ' ' +
' St at us Code: ' + r esponse. St at us. code + ' ' +
' St at us Request : ' + r esponse. St at us. r equest + ' ' +
' Addr ess: ' + pl ace. addr ess + ' ' +
' Accur acy: ' + pl ace. Addr essDet ai l s. Accur acy + ' ' +
' Count r y code: ' + pl ace. Addr essDet ai l s. Count r y. Count r yNameCode) ;
}
}

Service: Menampilkan lokasi-lokasi yang telah disimpan
Dalam contoh berikut, kita akan coba menyimpan Latitude, Longitude dan data-data lainnya tentang
kota-kota besar di dunia ke dalam array. Kemudian memerintahkan peta untuk menuju lokasi kota yang
dipilih oleh pengguna mengunakan tag Select.

/ / Bui l ds an ar r ay of geocode r esponses f or t he 5 ci t i es.
var ci t y = [
{
name: " Washi ngt on, DC" ,
St at us: {
code: 200,
r equest : " geocode"
},
Pl acemar k: [
{
addr ess: " Washi ngt on, DC, USA" ,
popul at i on: " 0. 563M" ,
Poi nt : {
coor di nat es: [ - 77. 036667, 38. 895000, 0]
},
Addr essDet ai l s: {
Count r y: {
Count r yNameCode: " US" ,
Admi ni st r at i veAr ea: {
Admi ni st r at i veAr eaName: " DC" ,
Local i t y: {Local i t yName: " Washi ngt on" }
}
}
}
}
]
},
{
name: " Tokyo, J apan" ,
St at us: {
code: 200,
},
Pl acemar k: [
{
addr ess: " Tokyo, J apan" ,
popul at i on: " 12. 527M" ,
Poi nt : {
coor di nat es: [ 139. 770004, 35. 669998, 0]
},
Count r y: {
Count r yNameCode: " US" ,
Admi ni st r at i veAr ea: {
Admi ni st r at i veAr eaName: " CA" ,
Local i t y: {Local i t yName: " Los Angel es" }
}
}
}
}
]
},
{
name: " Par i s, Fr ance" ,
St at us: {
code: 200,
},
Pl acemar k: [
{
addr ess: " Par i s, Fr ance" ,
Poi nt : {
coor di nat es: [ 2. 351019, 48. 856662, 0]
},
Count r y: {
Count r yNameCode: " FR" ,
Local i t y: {Local i t yName: " Par i s" }
}
}
}
]
},
{
name: " Rome, I t al y" ,
St at us: {
code: 200,
},
Pl acemar k: [
{
addr ess: " Rome, I t al y" ,
Poi nt : {
coor di nat es: [ 12. 482181, 41. 895431, 0]
},
Count r y: {
Count r yNameCode: " I T" ,
Local i t y: {Local i t yName: " Roma" }
}
}
}
]
},
{
name: " Ber l i n, Ger many" ,
St at us: {
code: 200,
},
Pl acemar k: [
{
addr ess: " Ber l i n, Ger many" ,
Poi nt : {
coor di nat es: [ 13. 411895, 52. 523781, 0]
},
Count r y: {
Count r yNameCode: " DE" ,
Local i t y: {Local i t yName: " Ber l i n" }
}
}
}
]
},
{
name: " Madr i d, Spai n" ,
St at us: {
code: 200,
},
Pl acemar k: [
{
addr ess: " Madr i d, Spai n" ,
Poi nt : {
coor di nat es: [ - 3. 703270, 40. 416712, 0]
},
Count r y: {
Count r yNameCode: " ES" ,
Local i t y: {Local i t yName: " Madr i d" }
}
}
}
]
}
] ;

var map;
var geocoder ;

/ / Capi t al Ci t i esCache i s a cust omcache t hat ext ends t he st andar d
GeocodeCache.
/ / We cal l appl y( t hi s) t o i nvoke t he par ent ' s cl ass const r uct or .
f unct i on Capi t al Ci t i esCache( ) {
GGeocodeCache. appl y( t hi s) ;
}

/ / Assi gns an i nst ance of t he par ent cl ass as a pr ot ot ype of t he
/ / chi l d cl ass, t o make sur e t hat al l met hods def i ned on t he par ent
/ / cl ass can be di r ect l y i nvoked on t he chi l d cl ass.
Capi t al Ci t i esCache. pr ot ot ype = new GGeocodeCache( ) ;

/ / Over r i de t he r eset met hod t o popul at e t he empt y cache wi t h
/ / i nf or mat i on f r omour ar r ay of geocode r esponses f or capi t al s.
Capi t al Ci t i esCache. pr ot ot ype. r eset = f unct i on( ) {
GGeocodeCache. pr ot ot ype. r eset . cal l ( t hi s) ;
f or ( var i i n ci t y) {
t hi s. put ( ci t y[ i ] . name, ci t y[ i ] ) ;
}
}

geocoder . set Cache( new Capi t al Ci t i esCache( ) ) ;
}

f unct i on addAddr essToMap( r esponse) {

i f ( r esponse && r esponse. St at us. code ! = 200) {
al er t ( " Unabl e t o l ocat e " + decodeURI Component ( r esponse. name) ) ;
} el se {
var pl ace = r esponse. Pl acemar k[ 0] ;
var poi nt = new GLat Lng( pl ace. Poi nt . coor di nat es[ 1] ,
map. set Cent er ( poi nt , 6) ;
map. openI nf oWi ndowHt ml ( poi nt , " Ci t y: " + pl ace. addr ess
+ " Popul at i on: " + pl ace. popul at i on) ;
}
}

f unct i on f i ndCi t y( whi ch) {
i f ( whi ch ! = 0) {
geocoder . get Locat i ons( ci t y[ whi ch - 1] . name, addAddr essToMap) ;
}
}

Service: Menampilkan titik-titik berdasarkan RSS
Kita juga dapat menyimpan titik-titik atau data lain yang dibutuhkan dalam bentuk layanan RSS,
kemudian meminta Google Maps API untuk menampilkannya.

var map;
var geoXml ;
var t oggl eSt at e = 1;


geoXml = new GGeoXml ( " ht t p: / / api . f l i ckr . com/ ser vi ces/ f eeds/ geo/ ?g=322338@N2
0&l ang=en- us&f or mat =f eed- geor ss" ) ;
map. addOver l ay( geoXml ) ;
}
}

f unct i on t oggl eMyKml ( ) {
i f ( t oggl eSt at e == 1) {
map. r emoveOver l ay( geoXml ) ;
t oggl eSt at e = 0;
} el se {
}
}

Jika RSS-nya ditampilkan dalam Browser Safari, hasilnya sebagai berikut:

Service: Menampilkan lokasi-lokasi berdasarkan KML

var map;
var geoXml ;
var t oggl eSt at e = 1;

geoXml = new GGeoXml ( " ht t p: / / mapgadget s. googl epages. com/ ct a. kml " ) ;
}
}

f unct i on t oggl eMyKml ( ) {
i f ( t oggl eSt at e == 1) {
map. r emoveOver l ay( geoXml ) ;
} el se {
}
}
Tutorial tentang KML bisa dilihat di sini.

Map Direction: Menampilkan bagaimana menuju suatu tempat dari
suatu tempat lain
Kita bisa pula menampilkan bagaimana menuju suatu tempat dari tempat lain dalam peta. Contohnya
berikut ini kita coba menampilkannya untuk lokasi di Boston.

/ / Cr eat e a di r ect i ons obj ect and r egi st er a map and DI V t o hol d t he
/ / r esul t i ng comput ed di r ect i ons

var map;
var di r ect i onsPanel ;
var di r ect i ons;

di r ect i onsPanel = document . get El ement ByI d( " r out e" ) ;
di r ect i ons = new GDi r ect i ons( map, di r ect i onsPanel ) ;
di r ect i ons. l oad( " f r om: 500 Memor i al Dr i ve, Cambr i dge, MA t o: 4 Yawkey Way,
Bost on, MA 02215 ( Fenway Par k) " ) ;
}

Map Direction: Menampilkan jalan dari ke secara lebih detil
Jika sebelumnya kita melihat data-data untuk kota Boston, mari kita coba lihat untuk kota yang lebih
dekat dengan kita. Arah dari Bogor menuju Depok. Contoh programnya bisa Anda lihat berikut ini.
Sayang petunjuk-petunjuknya (sebelah kiri) tertulis dalam bahasa Inggris saat ini. Tetapi, ada solusinya
agar petunjuk tersebut menggunakan Bahasa Indonesia.

var map;
var gdi r ;
var geocoder = nul l ;
var addr essMar ker ;

gdi r = new GDi r ect i ons( map, document . get El ement ByI d( " di r ect i ons" ) ) ;
GEvent . addLi st ener ( gdi r , " l oad" , onGDi r ect i onsLoad) ;
GEvent . addLi st ener ( gdi r , " er r or " , handl eEr r or s) ;

set Di r ect i ons( " San Fr anci sco" , " Mount ai n Vi ew" , " en_US" ) ;
}
}

f unct i on set Di r ect i ons( f r omAddr ess, t oAddr ess, l ocal e) {
gdi r . l oad( " f r om: " + f r omAddr ess + " t o: " + t oAddr ess,
{ " l ocal e" : l ocal e }) ;
}

f unct i on handl eEr r or s( ) {
i f ( gdi r . get St at us( ) . code == G_GEO_UNKNOWN_ADDRESS)
al er t ( " No cor r espondi ng geogr aphi c l ocat i on coul d be f ound f or one of t he
speci f i ed addr esses. Thi s may be due t o t he f act t hat t he addr ess i s
r el at i vel y new, or i t may be i ncor r ect . \ nEr r or code:
" +gdi r . get St at us( ) . code) ;
el se i f ( gdi r . get St at us( ) . code == G_GEO_SERVER_ERROR)
al er t ( " A geocodi ng or di r ect i ons r equest coul d not be successf ul l y
pr ocessed, yet t he exact r eason f or t he f ai l ur e i s not known. \ n Er r or code:
" + gdi r . get St at us( ) . code) ;

el se i f ( gdi r . get St at us( ) . code == G_GEO_MI SSI NG_QUERY)
al er t ( " The HTTP q par amet er was ei t her mi ssi ng or had no val ue. For
geocoder r equest s, t hi s means t hat an empt y addr ess was speci f i ed as i nput .
For di r ect i ons r equest s, t hi s means t hat no quer y was speci f i ed i n t he
i nput . \ n Er r or code: " + gdi r . get St at us( ) . code) ;

/ / el se i f ( gdi r . get St at us( ) . code == G_UNAVAI LABLE_ADDRESS) <- - - Doc
bug. . . t hi s i s ei t her not def i ned, or Doc i s wr ong
/ / al er t ( " The geocode f or t he gi ven addr ess or t he r out e f or t he gi ven
di r ect i ons quer y cannot be r et ur ned due t o l egal or cont r act ual r easons. \ n
Er r or code: " + gdi r . get St at us( ) . code) ;

el se i f ( gdi r . get St at us( ) . code == G_GEO_BAD_KEY)
al er t ( " The gi ven key i s ei t her i nval i d or does not mat ch t he domai n f or
whi ch i t was gi ven. \ n Er r or code: " + gdi r . get St at us( ) . code) ;

el se i f ( gdi r . get St at us( ) . code == G_GEO_BAD_REQUEST)
al er t ( " A di r ect i ons r equest coul d not be successf ul l y par sed. \ n Er r or
code: " + gdi r . get St at us( ) . code) ;

el se al er t ( " An unknown er r or occur r ed. " ) ;
}

f unct i on onGDi r ect i onsLoad( ) {
/ / Use t hi s f unct i on t o access i nf or mat i on about t he l at est l oad( )
/ / r esul t s.

/ / e. g.
/ / document . get El ement ByI d( " get St at us" ) . i nner HTML =
gdi r . get St at us( ) . code;
/ / and yada yada yada. . .
}

Karena arah ini ditunjukkan dalam bahasa English, ada baiknya kita menggunakan Google Translate API
untuk menerjemahkannya. Hasilnya pun lumayan. Contoh bagaimana menggunakan Google Translate
API. Kebetulan contohnya adalah menerjemahkan bahasa Spanyol ke Inggris. Tapi, saya juga sudah coba
menerjemahkannya ke dalam bahasa Indonesia. Hasilnya cukup memuaskan.
/ *
* How t o t r ansl at e t ext .
*/

googl e. l oad( " l anguage" , " 1" ) ;

var cont ent = document . get El ement ByI d( ' cont ent ' ) ;
/ / Set t i ng t he t ext i n t he di v.
cont ent . i nner HTML = ' <di v i d=" t ext " >Hol a, me al egr o mucho de
ver t e. <\ / di v><di v i d=" t r ansl at i on" / >' ;

/ / Gr abbi ng t he t ext t o t r ansl at e
var t ext = document . get El ement ByI d( " t ext " ) . i nner HTML;

/ / Tr ansl at e f r omSpani sh t o Engl i sh, and have t he cal l back of t he r equest
/ / put t he r esul t i ng t r ansl at i on i n t he " t r ansl at i on" di v.
/ / Not e: by put t i ng i n an empt y st r i ng f or t he sour ce l anguage ( ' es' ) t hen
t he t r ansl at i on
/ / wi l l aut o- det ect t he sour ce l anguage.
googl e. l anguage. t r ansl at e( t ext , ' es' , ' i d' , f unct i on( r esul t ) {
var t r ansl at ed = document . get El ement ByI d( " t r ansl at i on" ) ;
i f ( r esul t . t r ansl at i on) {
t r ansl at ed. i nner HTML = r esul t . t r ansl at i on;
}
}) ;
}
googl e. set OnLoadCal l back( i ni t i al i ze) ;

Penutup
Google Maps API muncul dengan berbagai fitur yang menakjubkan. Kita bisa memanfaatkan API ini
untuk keperluan development aplikasi-aplikasi kita yang membutuhkan kemampuan standar sebuah
peta. Dengan Google Maps API, kita tak perlu lagi repot-repot membangun system peta apalagi (dan ini
yang paling sulit) mendapatkan data peta-peta yang luar biasa besar.
Tantangan sebenarna saat ini adalah, bagaimana memanfaatkan apa yang ada di depan mata kita
(Google Maps API) untuk menghasilkan sesuatu yang lebih berarti lagi. Saya telah menunjukkan dasar-
dasar pemrograman Google Maps API. Sekarang, terserah Anda bagaimana memanfaatkannya.
Referensi
1. Website resmi Google Maps versi 3
2. Referensi API
3. Static Maps
4. Contoh implementasi
5. Beberapa artikel tentang Google Maps API
Tentang penulis
Idealisme saya sebagai mantan dosen memancing saya untuk terus menulis. Ebook
pertama yang saya release sekitar seminggu yang lalu, Ebook Tutorial J2ME Client
Server Database
Riwayat pekerjaan:
, terbilang cukup sukses. Inilah yang membuat saya semakin
semangat untuk menulis dan menulis. Saya yakin, sesederhana apapun isi tulisan
saya, pasti ada juga orang lainyang bisa mendapatkan manfaatnya.
Programmer di Bidang Perangkat Lunak, Deputi Pengkajian Persandian,
Lembaga Sandi Negara
Dosen mata kuliah Rekayasa Perangkat Lunak di Sekolah Tinggi Sandi Negara
Java Developer dan konsultan keamanan di PT. Artajasa Pembayaran Elektronik
ERP Developer di PT. Saptaindra Sejati

Tutorial Google Maps API

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tutorial Google Maps API

Diunggah oleh

Hak Cipta:

Format Tersedia

T

Anda mungkin juga menyukai