Menyuruh AI untuk Menggunakan Google Maps API di VS Code

Visual Studio Code (VS Code) telah menjadi editor kode pilihan banyak developer karena fleksibilitas dan ekosistem ekstensinya yang kaya. Salah satu ekstensi yang menarik adalah Cline, yang memungkinkan interaksi berbasis AI dan otomatisasi tugas langsung di dalam editor. Untuk memperluas kemampuannya, Cline dapat memanfaatkan Model Context Protocol (MCP) Servers.

Selain Cline, juga ada ekstensi lain seperti Roo yang juga mendukung MCP. Roo adalah fork dari Cline, dibuat karena netizen menganggap Cline terlalu lama dalam merilis versi baru. Roo juga memiliki beberapa fitur tambahan yang tidak ada di Cline, seperti misalnya Boomerang Task yang memungkinkan dia membuat subtask yang berjalan paralel dengan task utama. Namun, di artikel ini kita akan fokus pada Cline saja.

Artikel ini akan membahas secara lengkap cara menginstal, mengonfigurasi, dan menggunakan MCP Server khusus untuk Google Maps di dalam VS Code melalui ekstensi Cline. Setelah instalasi MCP server di Cline sukses, kita dapat melakukan copy paste untuk memindahkan konfigurasinya ke Roo, jika kita ingin menggunakan Roo.

1. Apa itu MCP?

Model Context Protocol (MCP) adalah bahasa yang digunakan supaya model AI (misalnya ChatGPT, Gemini, Claude, dll.) untuk bisa berkomunikasi dengan aplikasi lain, yang disebut dengan MCP Server. MCP Server ini bisa berupa aplikasi yang kita buat sendiri, atau bisa juga menggunakan aplikasi yang sudah ada, seperti Google Maps MCP Server yang akan kita bahas di artikel ini.

Sebenarnya model AI tidak memanggil langsung MCP server, tapi menggunakan MCP client (misalnya Cline atau Roo) sebagai perantara. MCP Client ini yang akan memanggil MCP server, dan mengembalikan hasilnya ke model AI. Dari hasil tersebut, model AI bisa melakukan tindakan lebih lanjut, seperti menggunakan MCP server lain yang bisa menulis ke file, mengakses API eksternal, atau mencari informasi di browser.

2. Mengenal Google Maps MCP Server

Google Maps MCP Server adalah implementasi MCP Server yang dirancang untuk menjembatani interaksi antara Cline dan berbagai API Google Maps. Server ini mengekspos fitur-fitur Google Maps sebagai tools yang bisa dipanggil oleh Cline atau Roo. Berikut adalah screenshot dari repositori GitHub yang menjelaskan cara kerja dan fitur-fitur yang tersedia di Google Maps MCP Server:

Github Google Maps MCP Server

Berdasarkan dokumentasi dan contoh penggunaan, beberapa tools utama yang disediakan oleh server ini antara lain:

  • maps_geocode: Mengubah alamat (misalnya, “Jl. Sudirman No. 1, Jakarta”) menjadi koordinat geografis (latitude, longitude).
  • maps_reverse_geocode: Mengubah koordinat geografis (misalnya, latitude -6.20, longitude 106.8) menjadi alamat yang paling mendekati.
  • maps_search_places: Mencari tempat berdasarkan query teks (misalnya nama tempat “Harris Hotel Cibinong”, kategori “restoran dekat sini”, dll.). Mengembalikan daftar tempat beserta informasi dasar dan Place ID.
  • maps_place_details: Mendapatkan informasi detail tentang suatu tempat spesifik menggunakan Place ID-nya (ID unik yang diberikan Google untuk setiap tempat). Ini bisa mencakup alamat lengkap, nomor telepon, rating, ulasan, jam buka, foto, dll., tergantung pada field yang diminta dan ketersediaan data.

Dengan server ini terinstal dan terkonfigurasi, kita bisa melakukan tugas-tugas terkait lokasi langsung dari VS Code hanya dengan memberikan instruksi dalam bahasa percakapan ke Cline.

Lebih lanjut tentang fitur dan cara kerja Google Maps MCP Server dapat ditemukan di repositori GitHubnya

3. Instalasi Google Maps MCP Server via Cline Marketplace (VS Code)

Proses instalasi MCP Server di Cline kini menjadi lebih mudah berkat adanya Cline Marketplace. Kita tidak perlu lagi mengedit file konfigurasi secara manual dari awal. Ikuti langkah-langkah berikut:

3.1. Buka Cline Marketplace

Akses Marketplace langsung dari dalam ekstensi Cline di VS Code. Klik ikon Marketplace di sidebar Cline (biasanya terletak di bagian bawah sidebar) untuk membuka daftar server yang tersedia.

03a-cline-marketplace

3.2. Cari Server Google Maps

Gunakan fitur pencarian di Marketplace untuk menemukan “Google Maps MCP Server”. Pastikan server tersebut berasal dari sumber tepercaya, misalnya github.com/modelcontextprotocol/servers/....

3.3. Klik Instal

Setelah menemukan server yang benar, klik tombol “Install”.

3.4. Cline Menyiapkan Konfigurasi

Setelah kita mengklik “Install”, Cline akan secara otomatis membuatkan prompt untuk melakukan instalasi. Kita akan melihat jendela konfirmasi yang menunjukkan bahwa server Google Maps MCP sedang diinstal. Cline juga akan menambahkan struktur dasar ke dalam file konfigurasi cline_mcp_settings.json kita.

03b-cline-install-google-maps-mcp

Contoh struktur dasar yang ditambahkan Cline ke cline_mcp_settings.json:

// ... (bagian lain dari file json)
{
  "servers": [
    // Server lain yang mungkin sudah ada sebelumnya...
    {
      "name": "github.com/modelcontextprotocol/servers/tree/main/src/google-maps",
      "config": {
        // API Key perlu ditambahkan di sini nanti
      }
    }
    // Mungkin ada server lain lagi...
  ]
}

3.5. Konfigurasi API Key (Langkah Krusial)

Pada waktu instalasi, Cline akan meminta kita untuk memasukkan API Key Google Maps. Jika kita tidak memasukkan API Key pada saat instalasi, kita bisa menambahkannya secara manual ke dalam file cline_mcp_settings.json.

Temukan entri untuk server "github.com/modelcontextprotocol/servers/tree/main/src/google-maps".

Di dalam objek config untuk server tersebut, tambahkan field apiKey dengan nilai API Key kita yang sebenarnya:

// ... (di dalam file cline_mcp_settings.json, bagian servers)
{
  "name": "github.com/modelcontextprotocol/servers/tree/main/src/google-maps",
  "config": {
    "apiKey": "AIzaSyXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" // <-- GANTI DENGAN API KEY ANDA YANG VALID
  }
}
// ...

Simpan file cline_mcp_settings.json.

3.6. Restart (Opsional tapi Direkomendasikan)

Untuk memastikan Cline memuat konfigurasi terbaru beserta API Key dan server berjalan dengan baik, me-restart VS Code seringkali merupakan langkah yang baik setelah melakukan perubahan konfigurasi.

Metode Marketplace ini menyederhanakan penambahan server, namun langkah penting untuk mendapatkan API Key tetap perlu dilakukan secara manual.

4. Setup API di Google Cloud Platform (GCP)

Agar Google Maps MCP Server bisa berfungsi, Anda perlu mengaktifkan API yang relevan di Google Cloud Platform (GCP) dan memastikan API Key Anda memiliki izin untuk menggunakannya.

4.1. Buka Google Cloud Console:

Masuk ke Google Cloud Console dengan akun Google kita.

4.2. Pilih atau Buat Proyek:

Di bagian atas konsol, pilih proyek GCP yang ingin Anda gunakan. Jika belum punya, buatlah proyek baru.

4.3. Aktifkan API yang Dibutuhkan:

  • Di menu navigasi (biasanya ikon hamburger ☰ di kiri atas), pilih APIs & Services > Library.
  • Cari API berikut satu per satu dan klik Enable untuk mengaktifkannya pada proyek Anda:
    • Geocoding API: Diperlukan untuk tool maps_geocode dan maps_reverse_geocode.
    • Places API: Diperlukan untuk tool maps_search_places dan maps_place_details. (Screenshot error menunjukkan API ini seringkali perlu diaktifkan secara eksplisit). error-api-not-enabled
  • Anda bisa memverifikasi API yang sudah aktif di APIs & Services > Enabled APIs & services.

01-gcp-console

4.4. Siapkan Billing (Penting):

Sebagian besar Google Maps Platform API, terutama Places API, memerlukan akun Billing yang aktif dan tertaut ke proyek kita. Google biasanya memberikan kredit gratis bulanan, tetapi penggunaan di atas batas memerlukan pembayaran. Pastikan kita telah mengaktifkan billing untuk proyek kita. Kunjungi bagian Billing di GCP console untuk memeriksa atau mengaturnya.

4.5. Dapatkan atau Konfigurasi API Key:

  • Navigasi ke APIs & Services > Credentials.
  • Kita bisa menggunakan API Key yang sudah ada atau membuat yang baru dengan mengklik Create credentials > API key.
  • Sangat Penting (Keamanan): Klik pada nama API Key kita untuk mengeditnya. Di bagian API restrictions, pilih “Restrict key” dan pilih hanya API yang kita aktifkan (Geocoding API dan Places API). Ini mencegah key kita disalahgunakan untuk layanan Google Cloud lainnya. Kita juga bisa menambahkan pembatasan aplikasi (misalnya berdasarkan alamat IP jika server berjalan di IP statis) untuk keamanan ekstra.
  • Salin API Key: Setelah dibuat dan dibatasi, salin nilai API Key ini. Inilah yang akan Anda masukkan ke dalam file cline_mcp_settings.json pada langkah instalasi sebelumnya.

5. Contoh Penggunaan Google Maps MCP Server di Cline

Setelah instalasi dan konfigurasi (termasuk penambahan API Key dan pengaktifan API di GCP) selesai, kita bisa mulai menggunakan tools Google Maps melalui Cline dengan instruksi bahasa alami.

Kita bisa menyuruh Cline untuk memastikan bahwa MCP server sudah terinstal dan berjalan dengan baik. Misalnya, kita bisa meminta Cline untuk menjalankan skenario berikut:

verify-install-result

Contoh Skenario: Mencari Detail Hotel (berdasarkan screenshot)

1. Permintaan Awal ke Cline/Roo:

“Please test get user prices, reviews, rating, and photos from Harris Hotel Cibinong using google maps mcp server”

2. Langkah 1: Mencari Tempat (maps_search_places)

Cline/Roo memahami bahwa ia perlu ID tempat terlebih dahulu. Ia akan memanggil tool maps_search_places pada server google-maps dengan argumen:

{
  "query": "Harris Hotel Cibinong"
}

Screenshotnya seperti ini:

Search Place Name

3. Penanganan Error (Jika API Belum Aktif/Diizinkan):

Jika Places API belum diaktifkan di GCP atau API Key tidak diizinkan menggunakannya, server akan mengembalikan error:

“Error: Place search failed: This API project is not authorized to use this API…”

Tampilannya seperti ini:

06-error-api-not-enabled

Kita harus mengaktifkan Places API di GCP. Cline/Roo akan memberikan instruksi untuk mengaktifkan API tersebut. Misalnya, ia bisa memberikan tautan ke dokumentasi Google Maps API atau langkah-langkah untuk mengaktifkannya di GCP.

Tampilan instruksi yang diberikan Cline/Roo seperti ini:

07-fixing-instruction

Setelah kita mengikuti instruksi tersebut dan mengaktifkan API, kita klik di tampilan tersebut untuk memberitahu Roo bahwa kita sudah melakukan instruksi.

4. Langkah 2: Mendapatkan Place ID

Setelah API aktif, maps_search_places berhasil. Responsnya akan berisi daftar tempat yang cocok.

08-place-search-result

5. Langkah 3: Mendapatkan Detail Tempat (maps_place_details)

Karena hasil pencarian kita sukses, kita bisa meminta Cline/Roo untuk mendapatkan detail lebih lanjut tentang tempat tersebut. Biasanya kita ingin tahu rating, ulasan, nomor telepon, dan website dari tempat tersebut. Kita bisa meminta Cline/Roo untuk mendapatkan detail tersebut dengan cara yang sama seperti kita meminta detail sebelumnya.

09-check-reviews

Cline/Roo akan mengambil Place ID dari hasil pencarian. Dalam contoh ini, Place ID untuk Harris Hotel Cibinong adalah ChIJx0pAanfBaS4RmeMKGBuYNhI. Kita bisa melihat Place ID di bagian paling bawah dari hasil pencarian, di dalam field place_id.

Catatan: Kita juga bisa meminta field spesifik seperti rating, reviews, formatted_phone_number, website, price_level, photos, dll. Cukup kita sebutkan dalam instruksi kita. Misalnya, kita bisa meminta Cline/Roo untuk mendapatkan rating dan ulasan dari tempat tersebut. Cline/Roo akan mengonversi permintaan tersebut menjadi argumen yang sesuai untuk tool maps_place_details. Misalnya seperti ini:

{
  "place_id": "CHIJx0pAanfBaS4RmeMKGBuYNhI",
  "fields": [
    "rating",
    "reviews",
    "formatted_phone_number",
    "website"
  ]
}

6. Hasil Akhir dan Ringkasan:

Google akan mengembalikan detail yang diminta (atau yang bisa didapatkannya). Cline/Roo kemudian merangkum hasilnya:

  • Berhasil Didapat: Rating (4.9), Reviews (disebutkan 5 ulasan), Nama, Alamat, Koordinat, Nomor Telepon, Website.
  • Tidak Didapat (dalam contoh ini): Tingkat Harga (Price Level) dan Referensi Foto (Photo references). Ini bisa disebabkan karena:
    • Tool maps_place_details di server MCP tidak dikonfigurasi untuk meminta field price_level atau photos.
    • API Key atau paket Places API yang digunakan tidak mencakup akses ke data tersebut (misalnya, Basic Data vs Contact Data vs Atmosphere Data).
    • Data tersebut memang tidak tersedia untuk tempat spesifik itu di Google Maps.

10-hasil-check-review

Kesimpulan

Dengan menggunakan MCP server, kita dapat menambahkan kemampuan ke AI model yang tersedia di pasaran. Biasanya AI model seperti ChatGPT, Gemini, Claude, dll. tidak memiliki kemampuan untuk baca tulis file, mengakses API eksternal, mencari informasi di browser, dan . Dengan menggunakan MCP server, kita dapat menambahkan kemampuan tersebut ke dalam AI model yang kita gunakan.

Google Maps MCP server ini hanyalah salah satu contoh dari sekian banyak MCP server yang ada. kita bisa membuat MCP server sendiri sesuai dengan kebutuhan kita. Misalnya, kita bisa membuat MCP server untuk mengakses API internal perusahaan kita, atau mengakses database yang ada di perusahaan kita.

Bila Anda menggunakan stack pemrograman Spring Boot, sudah ada starter untuk membuat MCP server, bisa diakses di website resminya.

Selamat mencoba dan semoga bermanfaat!

Tags: