169593507 octav googlemapsapi

Komunitas eLearning IlmuKomputer.Com

Copyright © 2003-2012 IlmuKomputer.Com

1

GGooooggllee MMaappss AAPPII

M.Octaviano Pratama [email protected]

http://tavgreen.com

Saat ini, Google maps API banyak digunakan pada berbagai platform untuk menampilkan peta

dengan beragam atribut tertentu sesuai dengan keinginan dari programmer. API (Application

Programming Interface) menurut w3schools :

“An API is a specification used by software components to communicate with each other. An

API may describe the ways in which a particular task is performed.”

Salah satu API yang dapat kita manfaatkan adalah Google API untuk menampilkan peta pada

mobile platform,desktop atau web buatan programmer. Dalam tutorial ini hanya dibataskan pada

penggunaan API pada web based saja. Berikut contoh screenshot penggunaannya :

Lisensi Dokumen: Copyright © 2003-2012 IlmuKomputer.Com

Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan

disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat

tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang

disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,

kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.



2

Tahap Awal Kunjungi terlebih dahulu API Key , dengan mengakses link berikut :

https://code.google.com/apis/console

gunakan akun google anda untuk mengaksesnya, jika belum mempunyai google account

silahkan signup terlebih dahulu, setelah anda login dengan menggunakan google

account anda, anda dapat membuat project baru seperti berikut :

Buatlah project baru dengan cara menekan tombol ‘create project’

Banyak sekali API yang dapat anda manfaatkan setelah anda login. Namun karena

tujuan kita disini adalah untuk mengakses maps, maka centang Google maps API v3 :

Pada menu persetujuan penggunaan API ini, ceklist ‘I agree’ kemudian Accept.

Pada menu API Projects anda, silahkan kunjungi API Access.

Selamat anda telah dapat menggunakan API Google Maps V3

Simple Maps

Sebelum anda mempelajari lebih lanjut mengenai google maps, ada baiknya kita mengenal

istilah yang sering keluar didalam penggunaan google maps.

Latitude , merupakan garis lintang

Longitude , merupakan garis bujur

Marker, Penanda lokasi

Zoom, memperbesar / memperjauh lokasi

https://code.google.com/apis/console



3

Untuk membuat simple maps seperti gambar diatas, anda dapat membuat dengan script berikut :

<script

src="http://maps.googleapis.com/maps/api/js?key=Masukankey_anda&sensor=false">

</script>

<script>

function initialize()

{

var peta = {

center:new google.maps.LatLng(-6.9629731,107.577832),

zoom:17,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

var map=new google.maps.Map(document.getElementById("googleMap")

,peta);

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>

<body>

<div id="googleMap" style="width:100%;height:300px;"></div>

Keterangan :

- <script src=”http://maps.....”> digunakan untuk menggunakan API google Maps.

- Var peta digunakan untuk inisialisasi dari maps yaitu lokasi, zoom dan tipe

- Center merupakan lokasi spesifik yang ingin kita tampilkan

- Anda dapat merubah nilai zoom menjadi lebih besar untuk memperbesar kedalaman

peta atau menjadi lebih kecil untuk memperkecil kedalaman peta.

Agar inisialisasi tipe anda berubah menjadi bertipe lain, silahkan ubah TypeID.ROADMAP

menjadi salah satu dibawah :

- ROADMAP Tampilan Normal

- SATELLITE Tampilan Foto dari satelit

- Hybrid Tampilan Foto dari satelit tapi terdapat keterangan nama jalan dan info

lainnya



4

- TERRAIN Peta dengan gunung,sungai dll

Advance Maps

Setelah belajar bagaimana membuat basic maps yaitu menampilkan peta standard pada web kita,

pada bahasa advance maps, kita akan membuat ‘marker’ atau penanda lokasi secara detail.

Berikut cuplikannya :

Tambahkan baris kode berikut :



5

<script src="http://maps.googleapis.com/maps/api/js?key=Kode_ANDA&sensor=false">

</script>

<script>

var posisi=new google.maps.LatLng(LatitudeANDA,LongitudeANDA);


{

var mapProp = {

center:posisi,

zoom:15,


};

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({

position:posisi,

animation:google.maps.Animation.BOUNCE,

Title:"Lokasi Anda",

icon:'unpad.png'

});

marker.setMap(map);

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

<div id="googleMap" style="width:100%;height:420px;"></div>

Keterangan :

animation:google.maps.Animation.BOUNCE,merupakan tipe animasi pada marker anda,

yaitu BOUNCE. Terdapat beberapa pilihan dibawah untuk animasi :

- DROP

- BOUNCE

Title:"Lokasi Anda", merupakan hint yang akan muncul ketika anda melakukan hover

atau cursor anda melewati marker

icon:'unpad.png' merupakan gambar pada marker anda

anda dapat melakukan modifikasi seperti gambar berikut :



6

Selain menggunakan icon, anda juga dapat menggunakan info windows, yaitu suatu teks yang

dapat digabungkan dengan event, misalnya ketika anda menekan marker, akan muncul tulisan

yang menjelaskan info dari lokasi anda, seperti pada contoh berikut :

Berikut source codenya :




7

{

var mapProp = {

center:myCenter,

zoom:15,


};

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var contentString = '<div id="content">'+

'<div id="siteNotice">'+

'</div>'+

'<h2 id="firstHeading" class="firstHeading">Bandung</h2>'+

'<div id="bodyContent">'+

'<p>Posisi Anda saat ini menunjukan anda berada di Bandung</p>'+

'</div>'+

'</div>';

var infowindow = new google.maps.InfoWindow({

content: contentString

});

var marker=new google.maps.Marker({

position:myCenter,

animation:google.maps.Animation.BOUNCE,

Title:"Lokasi Anda",

icon:'<?php echo base_url()?>data_backend/images/unpad.png'

});

marker.setMap(map);

google.maps.event.addListener(marker, 'click', function() {

infowindow.open(map,marker);

});

}

Dengan menggunakan API Google Maps, anda dapat melakukan apapun yang anda inginkan,

atau anda pun dapat menggabungkan aplikasi anda dengan API Google Maps ini misalkan

informasi restaurant di suatu daerah, tempat wisata, sistem informasi, system akademik kampus

dll.



8

Penutup Dalam penyusunan E-book ini, penulis menyadari banyaknya kekurangan, oleh karena itu

penulis mengharapkan mendapat kritik dan saran agar penulis dapat menyusun E-book lainnya

dengan lebih baik lagi. Apabila pembaca terdapat kesulitan dalam mengaplikasikan

materi-materi yang telah diulas sebelumnya, silahkan menghubungi penulis di

http://tavgreen.com. Nantikan E-book selanjutnya yang sedang penulis selesaikan.

Referensi

http://www.w3schools.com/googleAPI/default.asp diakses pada tanggal 23 Januari

2013

https://developers.google.com/maps/documentation/javascript/tutorial diakses pada

tanggal 23 januari 2013

Biografi Penulis M.Octaviano Pratama . Alumni D3 Teknik Komputer Unpad, saat ini

sedang melanjutkan studi di D4 Teknik Informatika Kesehatan program

kerjasama Seamolec dan Institut Teknologi Bandung. Penulis menggeluti

beberapa bidang IT terutama di Pemprograman Java, Game, Interpreter

Language, Mikrokontroller, dll. Saat ini membuka startup IT

Midhighsolution yang dapat diakses di http://midhighsolution.com dan juga

Insanity-studio di http://insanity-studio.com

Anda dapat menghubungi penulis pada alamat dibawah untuk diskusi dan

projects :

http://www.tavgreen.com dan [email protected]

http://tavgreen.com/

http://www.w3schools.com/googleAPI/default.asp

https://developers.google.com/maps/documentation/javascript/tutorial

http://midhighsolution.com/

http://insanity-studio.com/

http://www.tavgreen.com/

169593507 octav googlemapsapi

Documents