cara membuat webgis dengan google maps api

Cara Mudah Membuat WebGIS dengan Google Maps API

August 11, 2017 4310 7

Peta berbasis website atau online tidak hanya bisa dibuat dengan memanfaatkan perangkat lunak khusus WebGIS, semacam Alov, OpenGeo Suite, ArcGIS Server, atau yang lainnya. Peta berbasis web (WebGIS) juga bisa dihasilkan dengan menggunakan Application programming interface (API), misalnya saja Google Maps API. Sebelum melangkah lebih jauh, mari kita pahami dulu apa itu Google Maps dan API.

Google Maps

Google Maps adalah aplikasi layanan peta online gratis yang cukup popular. Layanan peta Google Maps dapat diakses melalui berbagai piranti elektronik asalkan terhubung dengan jaringan internet di laman http://maps.google.com. Google Map dibuat dengan menggunakan kombinasi dari gambar peta, database, serta obyek-obyek interaktif yang didesain menggunakan HTML, serta bahasa pemrograman Javascript, AJAX, dan lainnya. Gambar yang muncul pada peta merupakan hasil komunikasi dengan database pada web server Google untuk menampilkan gabungan dari potongan-potongan gambar yang diminta. Keseluruhan citra yang ada diintegrasikan ke dalam database pada Google Server, yang dapat dipanggil sesuai kebutuhan permintaan. Bagian-bagian gambar map merupakan gabungan dari potongan gambar berekstensi PNG yang disebut tile yang berukuran 256 x 256 pixel (Setiabudi, dkk, 2014).

API (Application Programming Interface)

API (Application Programming Interface) merupakan suatu dokumentasi yang terdiri dari antarmuka, fungsi, kelas, struktur dan sebagainya untuk membangun sebuah perangkat lunak. Dengan adanya API, maka memudahkan programmer untuk “membongkar” suatu software/aplikasi untuk kemudian dapat dikembangkan atau diintegrasikan dengan perangkat lunak yang lain. Keunggulan dari API ini adalah memungkinkan suatu aplikasi dengan aplikasi lainnya saling berhubungan dan berinteraksi (Siswanto, 2012).

READ  Cara Mengubah Gambar/Foto Bergeotag Menjadi Points (shp, kml, dll)

Layanan Google Maps API memungkinkan para pengembang untuk mengintegrasikan Google Maps ke dalam website masing‐masing dengan menambahkan sendiri beberapa data. Meski awalnya hanya JavaScript API, Maps API diperluas untuk menyertakan sebuah API pada aplikasi Adobe Flash. Keberhasilan Google Maps API telah melahirkan sejumlah pesaing antara lain Yahoo! Maps API, Bing Maps Platforn, MapQuest Development Platform dan OpenLayers (Pramartha, 2012). Agar aplikasi Google Maps dapat muncul di website/webgis, diperlukan adanya API key. API key merupakan kode unik yang diberikan oleh Google yang diantaranya untuk webgis, agar server Google Maps dapat mengenali (Siswanto, 2012). Adapun untuk mendapatkan Google Maps API Key bisa melalui laman Google ini. Detail langkah-langkahnya kurang lebih sebagaimana berikut ini:

Pemograman Google Map API pada dasarnya tidak sulit dilakukan mengingat sudah ada acuan dan tutorial yang sangat jelas sebagaimana terdapat di laman w3schools.com/graphics dan developers.google.com/maps. Pada laman w3schools dijelaskan berbagai langkah pemetaan yang dibagi menjadi beberapa menu utama, yakni map basic, map overlays, map events, map control, map types, dan map reference. Setiap tool (mulai dari pembuatan marker animation, polygon, hingga info window) bisa dicoba dan dilihat hasilnya (preview) secara langsung. Sedangkan pada laman Google Developers dijabarkan cara membuat markers, klaster marker, dan visualisasi data.

READ  Tutorial WebGIS Animasi 3 Dimensi dengan QGIS2ThreeJS

Terdapat setidaknya dua software pendukung, yakni Google Earth dan notepad++ untuk mempermudah proses pembuatan peta berbasis Google Map API ini. Google Earth (bisa digantikan dengan Google Maps) digunakan untuk membantu menemukan lokasi koordinat dari suatu obyek. Sedangkan notepad++ dimanfaatkan untuk mempermudah melakukan coding secara baik dan benar.

Contoh hasil dari WebGIS Google Maps API bisa dilihat di github (link di bawah ini). Di dalamnya meliputi fungsi marker, control, serta obyek titik, poligon, dan area.

Klik untuk melihat contoh hasil di GitHub Pageshttps://rifkifau.github.io/webgis-googlemap-api

Atau bisa juga lihat detail code (baris-baris kode HTML, javascript, dan CSS) dan preview dari Web GIS Google Maps API di CodePen, berikut ini:

See the Pen Web GIS Google Maps API by Spasialkan.com | Peta Digital & WebGIS (@spasialkan) on CodePen.

READ  2. Tutorial Visualisasi Data Corona (COVID19) Indonesia dengan ArcGIS Online (Organization)

Pemetaan menggunakan Google Maps API pada prinsipnya sangat beragam. Dengan kata lain, tidak hanya sebatas pembuatan marker, batas area, maupun rute jalan, melainkan juga bisa dalam bentuk pembuatan aplikasi mobile ataupun tracking. Namun demikian, untuk melakukan hal seperti itu, dibutuhkan keahlihan yang cukup dalam terkait bahasa pemograman. Karena dengan Bahasa pemogramanlah segala bentuk fungsi dan perintah di buat pada peta berbasis Google Map API ini.

Google Maps API memiliki beberapa keunggulan, selain aksesnya yang gratis, yakni kemampuannya untuk di masukkan dalam sebuah website atau blog serta tampilan yang cukup lengkap. Mengapa tampilannya terbilang lengkap adalah karena basemapnya yang bisa diatur-atur, mulai dari ‘RoadMap’, ‘Terrain’, ‘Satellite’, dan ‘hybrid’.

Referensi:

Pramartha, I Made Andi. 2012. Implementasi Aplikasi SIG dalam Pengolahan Data Jumlah Penduduk Berbasis Web. Jurnal Elektronik Ilmu Komputer JELIKU Vol 1 No. 2 Nopember 2012. Universitas Udayana

Setiabudi, D. H., Silvia R., dan Lady Joanne Tj. 2014. Sistem Informasi Geografis dengan Fitur Peta dan Rute Perjalanan Studi Kasus di Kabupaten Malang. Surabaya: Universitas Kristen Petra.

Siswanto. 2012. Sistem Informasi Geografis Objek Wisata Menggunakan Google Maps API Studi Kasus Kabupaten Mojokerto. Surabaya: Politeknik Elektronika Negeri Surabaya

Tags: google maps, map api, webgis Categories: Map API, Tutorial, Tutorial WebGIS, WebGIS, WebGIS Indonesia
share TWEET PIN IT share share
identicon Rifki Fauzi

Alumni kampus biasa-biasa saja, yang mulai menemukan minatnya di dunia pemetaaan, khususnya WebGIS.

Related Posts
Comments
  1. -

    Salam kenal gan, klo boleh request buatin tutorial web gis pakai heron bisa ga gan? Hehe

    1. identicon

      -

      Salam kenal juga Gan,
      Ane belum pernah nyoba langsung pake Heron sih gan. Pernah nyoba Geonode tapi, yang user interfacenya pake GeoExt & Openlayer juga.
      Mungkin kapan2 ane coba. Soalnya, ini aja banyak tutorial yg belum kelar nulisnya gan (termasuk yg google map api ini), kebanyakan baru diisi teorinya. hehe.

  2. -

    Terima kasih gan untuk referensinya cara membuat WebGIS dengan Google Maps API semoga bermanfaat

    1. identicon

      -

      Oke, sama-sama gan,
      Senang bisa membantu.

  3. -

    Sangat membantu,
    Oh ya mas..buat bikin API..berbayar yah ?
    Ada tutornya ngga mas Rizki..

    Makasih

    1. identicon

      -

      Masih ada yang versi gratis kok Mas, hanya saja setahu Saya sekarang untuk mendapatkan API Key perlu credit card (kata Google sih “…untuk memastikan Anda bukan robot. Anda tidak akan dikenakan biaya kecuali melakukan upgrade manual ke akun berbayar”).

      Untuk caranya sudah saya tambahkan screenshot di atas Mas.

      1. -

        Terima Kasih,..Pak Rifki
        Sukses..Salam 🙂

Leave a reply

Leave a Reply

Your email address will not be published. Required fields are marked *