Anda di halaman 1dari 8
G G o o o o g g l l e e M M a

GGooooggllee MMaappss AAPPII

M.Octaviano Pratama

tavgreen008@gmail.com

http://tavgreen.com

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.

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 :

web based saja. Berikut contoh screenshot penggunaannya : Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2012

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2012 IlmuKomputer.Com

1

Tahap Awal  Kunjungi terlebih dahulu API Key , dengan mengakses link berikut : https://code.google.com/apis/console

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 :

anda, anda dapat membuat project baru seperti berikut : Buatlah project baru dengan cara menekan tombol

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 :

untuk mengakses maps, maka centang Google maps API v3 :  Pada menu persetujuan penggunaan API

Pada menu persetujuan penggunaan API ini, ceklist I agreekemudian 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

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2012 IlmuKomputer.Com

2

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

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

- 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.

>

digunakan untuk menggunakan API google Maps.

Agar inisialisasi tipe anda berubah menjadi bertipe lain, silahkan ubah TypeID.ROADMAP menjadi salah satu dibawah :

- ROADMAP Tampilan Normal

- SATELLITETampilan Foto dari satelit

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

3

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2012 IlmuKomputer.Com

- TERRAIN  Peta dengan gunung,sungai dll Advance Maps Setelah belajar bagaimana membuat basic maps
- TERRAIN  Peta dengan gunung,sungai dll Advance Maps Setelah belajar bagaimana membuat basic maps

- 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 markeratau penanda lokasi secara detail. Berikut cuplikannya :

atau penanda lokasi secara detail. Berikut cuplikannya : Tambahkan baris kode berikut : Komunitas eLearning

Tambahkan baris kode berikut :

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2012 IlmuKomputer.Com

4

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

<script src="http://maps.googleapis.com/maps/api/js?key=Kode_ANDA&sensor=false"> </script> <script> var posisi=new google.maps.LatLng(LatitudeANDA,LongitudeANDA);

function initialize()

{

var mapProp = { center:posisi,

zoom:15,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

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 :

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2012 IlmuKomputer.Com

5

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

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 :

info dari lokasi anda, seperti pada contoh berikut : Berikut source codenya : function initialize() Komunitas

Berikut source codenya :

function initialize()

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2012 IlmuKomputer.Com

6

{ var mapProp = { center:myCenter, zoom:15, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new

{

var mapProp = { center:myCenter,

zoom:15,

mapTypeId:google.maps.MapTypeId.ROADMAP

};

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.

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2012 IlmuKomputer.Com

7

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

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

2013

diakses pada tanggal 23 Januari

Biografi Penulis

diakses pada tanggal 23 januari 2013 Biografi Penulis M.Octaviano Pratama . Alumni D3 Teknik Komputer Unpad,

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 tavgreen008@gmail.com

Komunitas eLearning IlmuKomputer.Com Copyright © 2003-2012 IlmuKomputer.Com

8