Pengantar Google Maps API

Mulai hari ini dan beberapa hari kedepan, saya akan membuat panduan tentang materi yang berhubungan dengan Google maps API. Rencana materi yang akan disampaikan adalah sbb:

  1.  Pengantar Google Maps API
  2.  Dasar Dasar Google Maps API
  3.  Marker dan InfoWindows
  4.   Multiple Marker
  5. Integrasi Google Maps API+PHP+MySQL

Artikel ini adalah bagian pertama dari lima materi yang akan disampaikan. Agar lebih mudah memahami Google maps api, saya akan menulis dengan format pertanyaan dan jawaban sepereti FAQ sehingga tidak terkesan formal.

Apa sih Google maps API? 

Sebelum membahas Google Maps API, kita harus paham dulu dengan API. API adalah kependekan dari Application programming interface. Dengan bahasa yang lebih sederhana, API adalah fungsi fungsi  pemrograman yang disediakan oleh aplikasi atau layanan agar layananan tersebut bisa di integrasikan dengan aplikasi yang kita buat.

Jadi Google maps API adalah fungsi fungsi pemrograman yang disediakan oleh Google maps agar Google maps bisa di integrasikan kedalam Web atau aplikasi yang sedang buat. Contoh sederhanya misalkan anda ingin membuat Sistem informasi Geografis kampus di jogja, dengan memanfaatkan Google Maps API anda bisa membuat GIS tanpa perlu memikirkan Peta Jogja, anda tinggal pake Google maps dan memanggil fungsi fungsi yang dibutuhkan seperti menampilkan peta, menempatkan marker dan sabagainya.

Google maps API sendiri menyediakan fungsi yang sangat banyak, berikut ini adalah pembagiannya

Google maps Javascript API v3

ini adalah google maps API yang akan kita pelajari. embel embel javascript menunjukan API ini tersedia dalam bahasa javascript.

Google Maps API Webservice

Layanan Google maps API untuk fungsi lanjutan seperti direction, Geocoding, Distance Matrix API dan elevation API.

Google Place API

Ini adalah API wajib yang harus dikuasai untuk membuat aplikasi Location based service .
Tiga API diatas adalah API yang paling penting untuk anda pelajari, sebenarnya masih ada beberapa API lain seperti Google Earth API dan Google Maps Image API namun untuk saat ini API ini tidak kita pelajari.

Aplikasi jenis apa yang bisa kita buat dengan Google Maps API?

Semua aplikasi yang membutuhkan layanan peta. Aplikasi tidak terbatas pada website, namun juga bisa aplikasi desktop ataupun aplikasi di smartphone bahkan aplikasi di embeded sistem misalkan aplikasi avigasi di mobil.

Berikut ini adalah gambaran ide yang bisa diterapkan diterapkan

1. Anda ingin membuat website review Kuliner, user bisa memasukan nama rumah makan, merating kualitas makanannya dan menginput lokasinya di peta.

2. Anda bisa membuat aplikasi GIS berbasis Deskop dan dengan mudah mengintegrasikan dengan Google maps api untuk memvisualisasikan data, misalkan visualisasi peta kemiskinan di propinsi X.

3. Anda bisa membuat aplikasi di Mobile (Android) untuk menampilkan informasi  hotel diurutkan berdasarkan lokasi terdekat dengan anda dan petunjuk jalan menuju Hotel tersebut.

4. Anda bisa membuat aplikasi tracking taksi sehingga manager perusahaan taksi bisa melihat secara realtime posisi setiap taksi yang  beroperasi.

Dan ide ide lain yang masih berhubungan dengan lokasi, tempat atau peta bisa memanfaatkan Google Maps API untuk meralisasikannya.

Apakah Google Maps API gratis?

Google maps API bisa anda pakai secara gratis, anda tidak perlu mengeluarkan biaya untuk lisensi. Hanya saja, request peta maksimal  yang diperbolehkan hanya 2500 request/perhari. Jika lebih dari itu, anda harus membeli lisensi Google Maps API for Bisnis.

Apa Ilmu dasar yang harus saya kuasai?

Untuk belajar Google maps API anda minimal harus tahu HTML dan javascript dasar. Jika anda belum tahu website w3schools.com adalah tempat yang tepat untuk belajar.

OS &Sotware apa yang saya butuhkan?

karena Google maps API berbasis Web, maka anda bisa membuat aplikasi berbasis Google maps api disembarang OS. Tool yang dibutuhkan hanya Text Edior , Browser dan koneksi internet.

Sampai sini dulu, kita akan membahas dasar dasar Google maps (termasuk coding) di materi selanjutnya. Selamat belajar!

Cara membuat grafik Pie Chart berbasis Web

ini adalah tutorial ketiga tentang cara membuat grafik chart menggunakan Highchart. Highchart adalah library javascript untuk membuat grafik berbasis web dengan cara yang sangat mudah.Pembahasan kali ini akan membuat grafik pie chart. Jika grafik batang lebih fokus pada perbandingan antar item, grafik linier lebih fokus pada tingkat pertumbuhan item (misal penjualan) maka grafik pie lebih fokus pada prosentase suatu item terhadap item secara keseluruhan. Item disini bisa berupa produk, orang, anggota dan sebagainya.

Pada contoh kali ini, kita akan membuat grafik pie chart menggunakan data fiktif berupa prosentase penjualan smartphone dari toko candraphone. Data prosentasi adalah sebagai berikut

  • Android =45.0 %
  • Blackberry =35.0%
  • iPhone=15.0 %
  • Windows Phone=5.0%

Bagaimana jika data belum dalam bentuk persen? anda harus membuat fungsi sendiri untuk mengkonversi array data asli kedalam format persen.

Langkah untuk membuat pie chart ada 3 yaitu

1. Include file jquery dan highchart

	<!--1) include file jquery.min.js dan higchart.js-->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="js/highcharts.js"></script>

2. Buat script pie chart

$(function () {
    var chart;
    
    $(document).ready(function () {
        
        // Build the chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Penjualan smartphone bulan september 2012'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
//data prosentasi penjualan di letakan disini!
            series: [{
                type: 'pie',
                name: 'Presentase penjualan',
                data: [
                    ['Android',   45.0],
                    ['Blackberry',35.0],
                    
                    ['iPhone',    15.0],
                    ['Windowphone',     5.0]
                ]
            }]
        });
    });
    
});

3. Tentukan dimana lokasi piechart akan digambarkan.

<!--grafik akan ditampilkan disini -->
<div id="container" style="min-width: 400px;
 height: 400px; margin: 0 auto"></div>

Hasil grafik

Grafik piechart penjalan smartphone

Source code dan demo
Untuk melihat demonya, silahkan klik linknya disini. Untuk melihat source codenya, anda cukup klik kanan dan view source code. Jangan lupa, jika anda ingin membuat grafik ini di lokalhost, anda harus medownload juga file jquery.js dan highchart.js