Pemrograman

Bahasa

Framework

Peralatan

Info

Tutorial Google Maps API - Menampilkan Peta di dalam Web

– 24 June 2016
Di tengah-tengah kesibukan mengerjakan proyek, akhirnya saya menyempatkan diri untuk mem-posting sesuatu. Pada kesempatan ini kita akan mempelajari Google Maps API. Karena kebetulan, pada proyek yang sedang saya kerjakan menggunakan Google Map. Saya akan menggunakan referensi yang sahih dan dapat dipercaya, W3Schools dan Google Developer. Baiklah mari kita mulai.

Apa itu Google Maps API?

Google Maps API (Application Programming Interface) merupakan sebuah API yang disediakan oleh Google untuk menggunakan peta Google (Google Map) dalam aplikasi yang kita bangun. Google Maps API memungkinkan kita memodifikasi peta dan informasi yang ada di dalamnya.

Google Maps API dikelompokkan berdasarkan platform: Web, Android, dan iOS. Pada kesempatan ini kita akan menggunakan Google Maps API untuk Web. Sedangkan untuk Android dan iOS, mungkin (insa'allah) saya akan bahas nanti.

Menampilkan Peta

Ada beberapa langkah yang dilakukan untuk menampilkan peta di dalam Web:
  1. Menyisipkan library API Google Map
    <script src="http://maps.googleapis.com/maps/api/js"></script>
  2. Membuat sebuah fungsi initialize() untuk mempersiapkan peta.
    function initialize() { ... }
  3. Membuat properti peta dalam bentuk objek
    var propertiPeta = {
        center:new google.maps.LatLng(-8.5830695,116.3202515),
        zoom:9,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    Letakkan kode di atas dalam fungsi initialize()
  4. Membuat objek Peta
    var peta = new google.maps.Map(document.getElementById("googleMap"), propertiPeta);
    Letakkan kode di atas dalam fungsi initialize()
  5. Menampilkan peta ketika jendela (window) di-load
    google.maps.event.addDomListener(window, 'load', initialize);
  6. Membuat tag div sebagai kontainer untuk menampilkan peta
    <div id="googleMap" style="width:100%;height:380px;"></div>
Kode Lengkapnya dan demo hasil:
Tutorial Google Map - Petani Kode on jsbin.com
Dalam pembuatan properti peta, kita bisa menentukan posisi peta atau titik koordinat mula-mula, skala (zoom), tipe peta, dsb. Sementara untuk tag <div> untuk menampilkan peta, atribut id-nya harus sesui dengan id yang dipilih saat pembuatan peta (nomer 4).

Ada baiknya juga kita perhatikan level zoom yang digunakan. Berdasarkan dokumentasi di Google Developer, berikut ini nilai level zoom dan kegunaanya.
  • 0: Bumi (smua peta ditampilkan)
  • 1: Peta Dunia
  • 5: Landmass/continent
  • 10: Kota
  • 15: Jalan
  • 20: Bangunan

Penutup

Sekian tutorial singkat Google Maps API ini, semoga bermanfaat dan mudah-mudahan saya diberikan kesehatan untuk melanjutkan tutorial ini.

No comments :

Post a Comment