Mengenal Google Maps API

Application Programming Interface (API) adalah sekumpulan komponen yang dibuat dalam kelas-kelas yang memiliki berbagai fungsi tertentu. Dengan demikian dapat disimpulkan Google Maps API merupakan sekumpulan komponen untuk melakukan berbagai fungsi  terkait aplikasi pemetaan. Google Maps API dibuat dengan Javascript, sehingga API ini akan lebih mudah dipelajari bagi orang yang sudah mengenal Javascript, khususnya lagi yang berpengalaman dengan pemograman berorientasi objek.

Google Maps adalah salah satu produk berbasis geospatial dari Google selain, Google Earth Engine dan Google Earth KML. Google Maps pertama kali didesain dan dibuat oleh dua programmer Denmark yaitu Lars Rasmussen dan Jeins Eilstrup, di Sydney, Australia pada perusahaan yang bernama Where 2 Technologies. Perusahaan ini kemudian diakuisisi oleh Google pada tahun 2004.  Google secara resmi mengumumkan Google Maps pada tahun 2005 melalui blog google. Sedangkan Google Maps API sendiri baru direlease pada bulan Juni 2005.

Ada dua lisensi dari Google Maps API yaitu standar dan bisnis. Untuk versi standar dibatasi maksimum 25000 akses. Pembatasan ini mulai dilakukan oleh Google pada   September 2013. Perbandingan antara lisensi standar dan bisnis dari google maps API dapat dilihat pada tabel 1.
Tabel 1. Perbandingan Maps API standar dan bisnis(sumber:https://developers.google.com/maps/)


API KEY
Google Maps API versi 3 tidak diperlukan kunci akses (Key), akan tetapi penggunaan key sangat dianjurkan untuk dapat mengetahui penggunaan API yang dipakai.

Untuk membuat key, dapat dilakukan dengan langkah-langkah berikut:
  1. Buka halaman API console di https://code.google.com/apis/console. Kemudian Log in dengan akun google.
  2. Pada menu di sebelah kiri, pilih Service dan hidupkan API google Maps.
  3. Kemudian pada menu di kiri pilih API Access. Pada halaman tersebut akan muncul API Key-nya seperti gambar 1.
  4. Gambar 1. API Key

Memulai Google Maps API
Seperti yang telah dijelaskan sebelumnya bahwa Google Maps API ditulis dengan bahasa Javascript. Untuk itu dalam setiap halaman aplikasi harus diinisiasi API tersebut, seperti berikut.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE"> </script>
Kode berikut adalah contoh untuk menampilkan peta google di halaman web. Hasil running kode ini dapat dilihat pada gambar 1.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
 src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script type="text/javascript">
   function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(4.027433,97.267278),
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map-canvas" style="width:700px;height:500px" />
</body>
</html>
Tampilan Google Map
Gambar 1. Tampilan Google Map
Penjelasan Kode
1. Inisiasi Google Maps API
<script type="text/javascript"
 src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>

2. Membuat Fungsi
<script type="text/javascript">
   function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(4.027433,97.267278),
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
</script>

Pada bagian ini dibuat sebuah fungsi dengan nama initialize. Pada fungsi ini di atur titik tengah peta, level zoom dan opsi-opsi lainnya.

3. Memanggil Fungsi
Fungsi yang telah dibuat dipanggil dengan google maps Document Object Model (DOM). Pemanggilan dilakukan dengan menambahkan DOM listener yang akan memanggil fungsi initialize ketika halaman web dibuka.
google.maps.event.addDomListener(window, 'load', initialize);

4. Kointaner Peta
<div id="map-canvas" style="width:700px;height:500px" />
Bagian ini adalah tempat dimana peta akan ditampilkan pada halaman web. Di sini dapat di atur ukuran tampilan peta.

Demikianlah sekilas mengenal Google Maps API. Anda dapat mempelajari lebih jauh di situs Google Developer

Related Posts

Disqus Comments