membuat peta pusat perbelanjaan dengan menggunakan google maps api v3.pdf

Click here to load reader

Post on 07-Dec-2015

46 views

Category:

Documents

20 download

Embed Size (px)

TRANSCRIPT

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

    html { height: 100% }

    body { height: 100%; margin: 0; padding: 0 }

    #map_canvas { height: 100% }

    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);

    }

  • 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 adala