1
Membuat Peta Pusat Perbelanjaan dengan
Menggunakan Google Maps API v3
sleepingtux.blogspot.com
Daftar Isi
1. Google Fusion Tables .......................................................................................... 2
2. Google Maps API V3 Hello World .............................................................................. 4
3. Fusion Table Layer ...................................................................................................... 7
4. Customize Peta ........................................................................................................... 8
Mengganti Marker Icon.................................................................................................. 9
Memodifikasi Konten InfoWindow ............................................................................. 10
5. Menggunakan Geocoding Service............................................................................ 11
6. Menggunakan Direction Service .............................................................................. 12
2
Dalam tutorial kali ini akan dibahas bagaimana menggunakan Fusion Tables
Layer di dalam Google Maps. Supaya lebih mudah untuk dipahami, maka kita akan
menggunakan contoh kasus membuat ”Peta Pusat Perbelanjaan di Jakarta”. Daripada
berlama-lama, mari kita buat langsung peta yang mau kita buat ini.
1. Google Fusion Tables
Langkah pertama dalam membuat peta dengan database dari Google Fusion
Tables tentunya adalah membuat File Fusion Tables itu sendiri. Untuk membuat File
Fusion Tables kita harus memiliki Google Account, jika kita sudah memiliki Google
Account maka kita tinggal mengakses http://drive.google.com.
Pilih Create->Fusion Table untuk membuat file Fusion Table, Untuk saat ini pilih Create
Empty Table lalu pilih Next.
3
Secara default, ketika kita menggunakan New Table diberikan 4 kolom yaitu Text,
Number, Location, dan Date. Dalam tutorial kali ini kita akan menggunakan 2 kolom saja
yaitu Name dan Location yang nantinya bisa di ubah sesuai dengan kebutuhan dan
keinginan. Untuk mengedit kolom yang ada kita pilih menu Edit Change Columns
4
Hapus kolom yang tidak dibutuhkan yaitu Text dan Date. Untuk data yang digunakan kita
bisa memasukkannya dengan mengimport dari berbagai tipe (csv, tsv, txt, kml, ataupun
dari Google Spreadsheet). Untuk saat ini data yang digunakan adalah data yang saya
input secara manual dan dapat diakses di
https://www.google.com/fusiontables/DataSource?docid=1H7xRXRgynAEuxPCAOrog4B
HsXBwD7QFLpiDeW08
Data yang akan digunakan dalam tutorial ini adalah 5 data pusat perbelanjaan di Jakarta
dengan masing-masing sudah mempunya data Location yang terdiri dari Latitude dan
Longitude.
2. Google Maps API V3 Hello World
Langkah berikutnya mari kita sedikit “ngoding” menggunakan Google Maps Javascript
API V3.
5
Ketika kita ingin menggunakan API dari Google Maps tentu saja kita harus mempunyai
akses key ke API google map itu sendiri, cara untuk memperolehnya adalah sebagai
berikut:
1. Kunjungi API Console di https://code.google.com/apis/console dan log in
menggunakan akun google.
2. Klik link Services di bagian menu sebelah kiri.
3. Aktifkan servis Google Maps API v3
4. Klik link API Access yang ada di menu sebelah kiri. API key berada pada halaman
API Access, pada bagian Simple API Access.
Berikut merupakan kode yang digunakan untuk membuat Hello World pada Google
Maps.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_
TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-6.224521,106.840553),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
6
Simpan kode PetaBelanja di atas di dalam browser, misal PetaBelanja.html
Untuk melihat hasilnya kita tinggal membuka browser kesayangan kita. Di dalam kode
diatas fungsi memanggil peta terdapat pada fungsi initialize().
Berikut beberapa keterangan dari kode diatas :
center: new google.maps.LatLng(-6.224521,106.840553)
angka pada kode diatas menunjukkan posisi default dari map yang kita load, yang
dimaksud posisi default disini adalah angka koordinat Latitude dan Longitude yang ada,
jadi jika kita ingin merubah posisi defaultnya kita tinggal mengganti angka tersebut
sesuai kebutuhan kita.
zoom: 8
kode di atas menunjukkan zoom level dari peta, nilai paling kecil dari zoom adalah 0 ,
semakin besar zoom level yang kita load, maka semakin detail pula informasi yang kita
dapat dari sebuah daerah, dan sebaliknya. Jika kita menggunakan zoom level 0 maka
yang terlihat adalah peta dari bumi ini.
mapTypeId: google.maps.MapTypeId.ROADMAP
kode diatas menunjukkan default jenis peta yang ditampilkan
1. MapTypeId.ROADMAP menampilkan road map view sebagai default
2. MapTypeId.SATELLITE menampilkan Google Earth satelite images
3. MapTypeId.HYBRID menampilkan gabungan dari normal dan satelite view
4. MapTypeId.TERRAIN menampilkan peta beserta terrain information
5. setTilt menampilkan 45 degree imagery
7
Berikut tampilan peta dari kode yang telah di buat.
3. Fusion Table Layer
Setelah kita mempunyai peta dasarnya, mari kita integrasikan antara data yang
sudah kita buat di Fusion Table tadi dengan peta yang telah kita buat, untuk
mengintegrasikan nya mari kita tambahkan kode berikut pada bagian bawah fungsi
initialize().
var PusatBelanja = new google.maps.FusionTablesLayer({ query : {
select : 'Location',
from : 'TableID'
},
});
PusatBelanja.setMap(map);
Pada kode diatas kita membuat variabel baru bernama PusatBelanja, variabel tersebut
digunakan untuk menyimpan layer Fusion Table. Untuk memanggil data yang ada pada
Fusion Table yang dibutuhkan dalam melakukan query adalah Location (data yang
menunjukkan lokasi geografis) dan kode ID dari File Fusion Table yang digunakan. Untuk
8
mendapatkan kode ID ini dapat dilihat pada FileAbout This Table di Fusion Table yang
dibuat sebelumnya. Sekarang mari kita lihat peta kita setelah ditambahkan kode diatas.
Pada peta diatas terdapat 5 titik posisi pusat perbelanjaan di Jakarta, setiap titik /
marker yang ada bisa di click dan memunculkan suatu InfoWindow. Naah, sampai disini
kita sudah melakukan integrasi antara Google Maps API V3 dengan data pada Fusion
Tables, mudah bukan? Tetapi jika kita lihat tampilan di atas sepertinya kurang menarik,
pada langkah berikutnya kita akan membuat tampilan peta menjadi sedikit lebih
menarik.
4. Customize Peta
Metode Customize peta yang ada disini bukanlah langkah yang wajib dilakukan,
ini hanyalah hal-hal biasa yang saya lakukan dalam membuat suatu peta menggunakan
Google Maps . Hal pertama yang biasa saya lakukan adalah mengganti marker dengan
icon yang lebih enak dilihat.
9
Mengganti Marker Icon
Kita bisa mengganti marker icon dengan menambahkan styles pada Fusion Table Layer
yang telah kita masukkan tadi. Maka kode yang ada jadi seperti berikut:
var PusatBelanja = new google.maps.FusionTablesLayer({
query : {
select : 'Location',
from : '1H7xRXRgynAEuxPCAOrog4BHsXBwD7QFLpiDeW08'
},
styles : [{
markerOptions : {
iconName: "buildings"
},
}],
});
PusatBelanja.setMap(map);
Styles digunakan untuk memodifikasi style dari Fusion Table layer yang dipanggil, pada
markerOptions kita diberi pilihan icon yang juga telah disediakan oleh Google, untuk
melihat icon yang disediakan kita bisa mengunjungi link berikut
https://www.google.com/fusiontables/DataSource?docid=1BDnT5U1Spyaes0Nj3DXciJKa
_tuu7CzNRXWdVA. Setelah kita menemukan icon yang cocok kita bisa mengganti
iconName sesuai dengan keinginan kita, pada tutorial ini yang saya gunakan adalah icon
“buildings”.
10
Memodifikasi Konten InfoWindow
Secara default infoWindow yang ditampilkan ketika suatu marker di klik adalah semua
data yang disimpan pada Fusion Table. Untuk mengganti konten dari InfoWindow yang
ada, pertama kita harus menghilangkan default infoWindow yang ada dengan
menambahkan options pada Fusion Table layer.
options: {
suppressInfoWindows:true
}
Setelah itu kita membuat InfoWindow kita sendiri dan juga menambahkan event ketika
suatu marker di klik dengan menambahkan kode berikut di bagian akhir dari fungsi
initialize():
google.maps.event.addListener(PusatBelanja,'click',
function(e){
infoWindow.setContent(e.row['Name'].value);
infoWindow.setPosition(e.latLng);
infoWindow.open(map);
});
Kode diatas merupakan suatu event listener ketika layer fusion table dengan nama
PusatBelanja di click, event yang muncul ketika layer di klik adalah suatu infoWindow
11
yang memiliki konten e.row[‘Name’].value (artinya mengambil nilai dari kolom Name
pada Fusion Table) pada lokasi yang telah diklik. Supaya fungsi diatas dapat berjalan
maka kita harus sebelumnya mendeklarasikan infoWindow itu sendiri dengan
menambahkan kode
var infoWindow=new google.maps.InfoWindow();
5. Menggunakan Geocoding Service
Pada tutorial kali ini kita akan menambahkan fitur Geocoding Service untuk
memberi informasi kepada sistem dimana posisi kita sekarang. Disini kita menambahkan
fungsi baru yaitu getLocation yang berfungsi untuk melakukan geocode terhadap posisi
yang di inputkan user dalam bentuk string lokasi.
function getLocation() {
var here;
var saya=document.getElementById('possaya').value;
geocoder.geocode({'address':saya},function(results, status){
if(status==google.maps.GeocoderStatus.OK){
here=results[0].geometry.location;
map.setCenter(here);
map.setZoom(13);
var posisiku = new google.maps.Marker({
position : here,
map : map,
12
});
}
});
}
Kode diatas setelah melakukan geocode terhadap alamat yang dimasukkan user akan
memindahkan titik tengah dari peta dengan lokasi hasil geocode dan menambahkan
suatu marker baru pada titik tengah peta.
6. Menggunakan Direction Service
Sekarang kita akan menambahkan navigasi pada peta kita menggunakan
Direction Service yang disediakan oleh Google Maps. Navigasi yang ada menunjukkan
suatu polyline jalan dan arahan rute yang harus ditempuh ketika ingin mengunjungi
suatu pusat perbelanjaan dari posisi kita sekarang.
function getDirection()
{
if(here==null){alert("dimana posisi anda?");}
else
{
var request={
origin:here,
destination:mypos,
travelMode:google.maps.DirectionsTravelMode.DRIVING
};
13
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
infoWindow.setMap(null);
}
Jangan lupa sebelumnya untuk melakukan deklarasi terhadap directionsSerrvice dan
directionsDisplay.
var directionsService=new google.maps.DirectionsService();
var directionsDisplay= new google.maps.DirectionsRenderer();
dan juga memanggil directionsDisplay untuk ditampilkan pada peta dan juga panel
navigasi yang memberikan pengarahan dalam bentuk text.
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
Sekian tutorial kali ini, e-book atau apalah ini akan terus di update selama saya ada
waktu kesempatan dan ilmu baru, sebenarnya masih banyak yang perlu di update
seperti memilih jenis transportasi, weather layer, traffic layer, alternative routes, routes
elevation, fitur searching, places API, autocomplete API, dll..
