Halaman ini diterjemahkan oleh Cloud Translation API.

Membangun perencana rute dengan Place Autocomplete dan Routes API

1. Ringkasan

Baik Anda sedang melakukan perjalanan darat, merencanakan perjalanan sehari-hari, atau menjelajahi kota yang ramai, perjalanan dari titik A ke titik B bukan hanya sekadar mengetahui tujuan Anda. Alat pembuatan rute yang andal sangat penting.

Dengan Google Maps Platform, Anda dapat menambahkan peta dinamis ke dalam aplikasi, memungkinkan pengguna memasukkan lokasi dengan cepat menggunakan fitur pelengkapan otomatis, dan menampilkan rute di peta.

Codelab ini memandu developer membuat aplikasi web menggunakan Maps JavaScript API, Place Autocomplete, dan Routes API. Anda akan mempelajari cara mengintegrasikan beberapa API Google Maps Platform melalui tutorial yang dapat disesuaikan.

Yang akan Anda build

Codelab ini akan memandu Anda membangun aplikasi web menggunakan HTML, CSS, JavaScript, dan backend Node.js.

Arsitektur aplikasi web perencana rute

Aplikasi web perencana rute

Yang akan Anda pelajari

Cara mengaktifkan API Google Maps Platform
Cara mengintegrasikan peta dinamis ke dalam aplikasi web
Cara mengintegrasikan layanan Place Autocomplete
Cara meminta rute melalui Routes API
Cara menampilkan rute di peta dinamis
Cara membuat ID Peta
Cara menambahkan Penanda Lanjutan ke peta dinamis

Yang Anda butuhkan

Project Google Cloud
Maps JavaScript API
Places API(Pelengkapan Otomatis Tempat)
Routes API
Pengetahuan dasar tentang HTML dan CSS
Memahami penggunaan Javascript/Node.js

Kode contoh

Solusi lengkap dan kode langkah demi langkah tersedia di GitHub. Kode tidak menyertakan paket Node yang diperlukan. Instal dependensi yang diperlukan sebelum mengeksekusi kode. Detail paket yang diperlukan dapat ditemukan di file package.json(dijelaskan di Langkah 3).

2. Menyiapkan project dan mengaktifkan API

Untuk langkah pengaktifan, Anda harus mengaktifkan Maps JavaScript API, Place Autocomplete, dan Routes API.

Menyiapkan Google Maps Platform

Jika Anda belum memiliki akun Google Cloud Platform dan project dengan penagihan diaktifkan, lihat panduan Memulai Google Maps Platform untuk membuat akun penagihan dan project.

Di Cloud Console, klik menu drop-down project, lalu pilih project yang ingin Anda gunakan untuk codelab ini.
Aktifkan API Google Maps Platform yang diperlukan untuk codelab ini di halaman Library Maps API. Untuk melakukannya, ikuti langkah-langkah dalam video ini atau dokumentasi ini.
Buat kunci API di halaman Kredensial di Cloud Console. Anda dapat mengikuti langkah-langkah dalam video ini atau dokumentasi ini. Semua permintaan ke Google Maps Platform memerlukan kunci API.

3. Menyiapkan project Node.js

Dalam lab ini, kita akan menggunakan Node.js untuk mengumpulkan asal dan tujuan dari web serta meminta rute melalui Routes API.

Dengan asumsi Anda telah menginstal Node.js, buat direktori yang akan Anda gunakan untuk menjalankan project ini:

$ mkdir ac_routes
$ cd ac_routes

Lakukan inisialisasi paket Node.js baru di direktori untuk aplikasi Anda:

$ npm init

Perintah ini akan meminta Anda memasukkan sejumlah hal, seperti nama dan versi aplikasi Anda. Untuk saat ini, Anda cukup menekan RETURN untuk menerima setelan default untuk sebagian besar opsi. Titik entri default adalah index.js, Anda dapat mengubahnya ke file utama. Dalam lab ini, file utamanya adalah function/server.js(detail selengkapnya di langkah 6).

Selain itu, Anda dapat menginstal framework dan modul pilihan Anda. Lab ini menggunakan framework web(Express) dan parser isi(body-parser). Temukan detail selengkapnya dalam file package.json.

4. Membuat peta dinamis

Setelah backend Node.js siap, mari kita pelajari langkah-langkah yang diperlukan untuk sisi klien.

Membuat halaman HTML untuk aplikasi
Membuat file CSS untuk gaya
Memuat Google Maps JavaScript API ke dalam halaman HTML
Tempelkan kunci API ke dalam tag skrip untuk mengautentikasi aplikasi Anda
Buat file JavaScript untuk menangani fungsi aplikasi

Membuat halaman HTML

Buat direktori baru di folder project Anda(dalam kasus ini ac_routes)
```
 $ mkdir public
 $ cd public
```
Di direktori publik, buat index.html

Salin kode berikut ke index.html

 <!DOCTYPE html>
 <html>
 <head>
   <title>GMP Autocomplete + Routes</title>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
   <div class="container">
     <!-- Start of the container for map -->
     <div class="main">
       <div id="map"></div>
     </div>
     <!-- End of the container for map -->
   </div>
   </body>
 </html>

Buat file CSS

Buat style.css di direktori publik

Salin kode berikut ke dalam style.css:

 html, body {height: 100%;}
 body {
   background: #fff;
   font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-style: normal;
   font-weight: normal;
   font-size:16px;
   line-height: 1.5;
   margin: 0;
   padding: 0;
 }
 .container {display:flex; width:90%; padding:100px 0; margin:0 auto;}
 .main {width:70%; height:800px;}
  #map {height:100%; border-radius:20px;}

Memuat Maps JavaScript API

Dalam lab ini, kita akan menggunakan impor library dinamis untuk memuat Maps JavaScript API. Lihat detail selengkapnya di sini.

Di index.html, salin kode berikut sebelum tag body penutup. Ganti "YOUR_API_KEY" dengan kunci API Anda sendiri.

<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({key: "YOUR_API_KEY", v: "weekly"});</script>

Membuat file JavaScript

Di direktori publik, buat app.js

Salin kode berikut ke app.js

 (function(){
   let map;

   async function initMap() {
       const { Map } = await google.maps.importLibrary('maps');
       map = new Map(document.getElementById('map'), {
           center: { lat: -34.397, lng: 150.644 },
           zoom: 8,
           mapId: 'DEMO_MAP_ID'
       });
   }

   initMap();
 }());

DEMO_MAP_ID adalah ID yang dapat digunakan untuk contoh kode yang memerlukan ID Peta. ID ini tidak ditujukan untuk digunakan dalam aplikasi produksi dan tidak dapat digunakan untuk fitur yang memerlukan gaya peta cloud. Di lab ini, kita memerlukan ID Peta untuk Penanda Lanjutan pada tahap selanjutnya. Temukan detail selengkapnya tentang membuat ID Peta untuk aplikasi Anda.

Tautkan file JavaScript

Di index.html, tautkan app.js sebelum tag body penutup dan setelah tag skrip yang memuat Maps JavaScript API.

<script type="text/JavaScript" src="app.js"></script>

Kode contoh lengkap

Kode lengkap hingga tahap ini tersedia di GitHub:step1_createDynamicMap

5. Masukkan alamat asal dan tujuan

Tambahkan dua kolom teks di index.html untuk input asal dan tujuan
Mengimpor library Autocomplete
Mengikat layanan Pelengkapan Otomatis ke kolom teks asal dan tujuan

Menambahkan kolom teks

Di index.html, tambahkan kode berikut sebagai turunan pertama dari div dengan class container.

<div class="aside">
  <div class="inputgroup">
    <label for="origin">Start</label>
    <input type="text" id="origin" name="origin" class="input-location" placeholder="Enter an address">
  </div>
  <div class="inputgroup">
    <label for="origin">End</label>
    <input type="text" id="destination" name="destination" class="input-location" placeholder="Enter an address">
  </div>
</div>

Mengimpor dan mengaktifkan Pelengkapan Otomatis

Class google.maps.places.Autocomplete adalah widget yang memberikan prediksi Tempat berdasarkan input teks pengguna. Objek ini dilampirkan ke elemen input jenis teks, dan memproses entri teks di kolom tersebut. Daftar prediksi ditampilkan sebagai daftar drop-down, dan diperbarui saat teks dimasukkan.

Di app.js, tambahkan kode berikut setelah inisialisasi peta:

let placeIds = [];
async function initPlace() {
  const { Autocomplete } = await google.maps.importLibrary('places');
  let autocomplete = [];
  let locationFields = Array.from(document.getElementsByClassName('input-location'));
  //Enable autocomplete for input fields
  locationFields.forEach((elem,i) => {
      autocomplete[i] = new Autocomplete(elem);
      google.maps.event.addListener(autocomplete[i],"place_changed", () => {
          let place = autocomplete[i].getPlace();
          if(Object.keys(place).length > 0){
              if (place.place_id){
                  placeIds[i] = place.place_id; //We use Place Id in this example
              } else {
                  placeIds.splice(i,1); //If no place is selected or no place is found, remove the previous value from the placeIds.
                  window.alert(`No details available for input: ${place.name}`);
                  return;
              }
          }
      });
  });
}
initPlace();

Setelah pengguna memilih tempat dari daftar prediksi pelengkapan otomatis, detail hasil tempat dapat diambil menggunakan metode getPlace(). Hasil tempat berisi banyak informasi tentang suatu Tempat. Di lab ini, kita akan menggunakan place_id untuk mengidentifikasi tempat yang dipilih. ID tempat secara unik mengidentifikasi tempat di database Google Places dan Google Maps. Temukan detail selengkapnya tentang ID Tempat.

Menambahkan gaya yang relevan

Di style.css, tambahkan kode berikut:

.aside {width:30%; padding:20px;}
.inputgroup {margin-bottom:30px;}
.aside label {display:block; padding:0 10px; margin-bottom:10px; font-size:18px; color:#666565;}
.aside input[type=text] {width:90%;padding:10px; font-size:16px; border:1px solid #e6e8e6; border-radius:10px;}

Kode contoh lengkap

Kode lengkap hingga tahap ini tersedia di GitHub:step2_inputAddress

6. Minta rute

Tambahkan tombol 'Dapatkan rute' ke index.html untuk memulai permintaan rute
Tombol ini memicu pengiriman data asal dan tujuan ke layanan Node.js
Layanan Node.js mengirimkan permintaan ke Routes API
Respons API ditampilkan ke sisi klien untuk ditampilkan

Setelah titik asal dan tujuan ditetapkan serta peta dinamis siap, saatnya mendapatkan rute. Routes API, versi generasi berikutnya yang performanya dioptimalkan untuk layanan rute dan matriks jarak, hadir untuk membantu Anda. Dalam lab ini, kita akan menggunakan Node.js untuk mengumpulkan asal dan tujuan dari web serta meminta rute melalui Routes API.

Di index.html, tambahkan tombol 'Dapatkan rute' sebelum tag penutup div dengan class aside :

<div class="inputgroup">
  <button id="btn-getroute">Get a route</button>
</div>

Di style.css, tambahkan baris berikut:

.aside button {padding:20px 30px; font-size:16px; border:none; border-radius:50px; background-color:#1a73e8; color:#fff;}

Di app.js, tambahkan kode di bawah untuk mengirim data asal dan tujuan ke layanan Node.js:

function requestRoute(){
  let btn = document.getElementById('btn-getroute');
  btn.addEventListener('click', () => {
    //In this example, we will extract the Place IDs from the Autocomplete response
    //and use the Place ID for origin and destination
    if(placeIds.length == 2){
        let reqBody = {
            "origin": {
                "placeId": placeIds[0]
            },
            "destination": {
                "placeId": placeIds[1]
            }
        }

        fetch("/request-route", {
            method: 'POST',
            body: JSON.stringify(reqBody),
            headers: {
                "Content-Type": "application/json"
            }
        }).then((response) => {
            return response.json();
        }).then((data) => {
            //Draw the route on the map
            //Details will be covered in next step
            renderRoutes(data);
        }).catch((error) => {
            console.log(error);
        });
    } else {
        window.alert('Location must be set');
        return;
    }
  });
}

requestRoute();

renderRoutes() adalah fungsi yang akan kita gunakan untuk menggambar rute di peta. Kita akan membahas detailnya di langkah berikutnya.

Membuat server

Di direktori project(dalam kasus ini ac_routes), buat folder baru bernama function. Di dalam folder ini, buat file bernama server.js. File ini bertindak sebagai titik entri project Anda yang dikonfigurasi saat menyiapkan project Node.js, yang menangani tiga fungsi utama:

Mengumpulkan data dari klien web
Mengirim permintaan ke Routes API
Menampilkan respons API ke sisi klien

Salin kode berikut ke server.js. Ganti 'YOUR_API_KEY' dengan kunci API Anda sendiri. Untuk meningkatkan keamanan kunci API, sebaiknya gunakan kunci yang berbeda untuk backend. Lihat Panduan keamanan.

const express = require('express');
const app = express();
const bodyParser = require('body-parser');

const port  = 8080;
const urlencodedParser = bodyParser.urlencoded({extended:true}); 

function main() {
  app.use('/', express.static('public'));
  app.use(urlencodedParser);
  app.use(express.json());

  app.post('/request-route', (req,res) => {    
    fetch("https://routes.googleapis.com/directions/v2:computeRoutes", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Goog-Api-Key": "YOUR_API_KEY",
        "X-Goog-FieldMask": "*"
      },
      body: JSON.stringify(req.body)
    }).then((response) => {
      return response.json();
    }).then((data) => {
      if('error' in data){
        console.log(data.error);
      } else if(!data.hasOwnProperty("routes")){
        console.log("No route round");
      } else {
        res.end(JSON.stringify(data));
      }
    }).catch((error) => {
      console.log(error)
    });
  });

  app.listen(port, () => {
      console.log('App listening on port ${port}: ' + port);
      console.log('Press Ctrl+C to quit.');
  });
}

main();

Temukan detail Routes API lainnya tentang mendapatkan rute dengan Routes API.

Menjalankan kode

Jalankan kode di bawah ini di command line:

$ node function/server.js

Buka browser dan buka http://127.0.0.1:8080/index.html. Anda akan melihat halaman aplikasi. Hingga tahap ini, respons API ditampilkan ke klien web. Mari kita lihat cara menampilkan rute di peta pada langkah berikutnya.

Kode contoh lengkap

Kode lengkap hingga tahap ini tersedia di GitHub:step3_requestRoute

7. Menampilkan rute di peta

Pada langkah sebelumnya, kita merujuk ke renderRoutes() saat berhasil menerima respons dari layanan Node.js. Sekarang mari kita tambahkan kode sebenarnya untuk menampilkan rute di peta.

Di app.js, tambahkan kode di bawah:

let paths = [];
async function renderRoutes(data) {
  const { encoding } = await google.maps.importLibrary("geometry");
  let routes = data.routes;
  let decodedPaths = [];

  ///Display routes and markers
  routes.forEach((route,i) => {
      if(route.hasOwnProperty('polyline')){
        //Decode the encoded polyline
        decodedPaths.push(encoding.decodePath(route.polyline.encodedPolyline));

        //Draw polyline on the map
        for(let i = decodedPaths.length - 1; i >= 0; i--){
            let polyline = new google.maps.Polyline({
                map: map,
                path: decodedPaths[i],
                strokeColor: "#4285f4",
                strokeOpacity: 1,
                strokeWeight: 5
            });
            paths.push(polyline);
        }
        
        //Add markers for origin/destination
        addMarker(route.legs[0].startLocation.latLng,"A");
        addMarker(route.legs[0].endLocation.latLng,"B");
        //Set the viewport
        setViewport(route.viewport);
      } else {
        console.log("Route cannot be found");
      }
  });
}

Routes API menampilkan polyline dalam format encodedPolyline(default) atau geoJsonLinestring. Dalam lab ini, kita akan menggunakan format encodedPolyline dan mendekodenya menggunakan library geometri Maps JavaScript.

Kita akan menggunakan addMarker() untuk menambahkan penanda lanjutan untuk asal dan tujuan. Di app.js, tambahkan kode berikut:

let markers = [];
async function addMarker(pos,label){
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const { PinElement } = await google.maps.importLibrary("marker");
  const { LatLng } = await google.maps.importLibrary("core");
  let pinGlyph = new PinElement({
      glyphColor: "#fff",
      glyph: label
  });
  let marker = new AdvancedMarkerElement({
      position: new LatLng({lat:pos.latitude,lng:pos.longitude}),
      gmpDraggable: false,
      content: pinGlyph.element,
      map: map
  });
  markers.push(marker);
}

Di sini kita membuat dua penanda lanjutan - A untuk asal dan B untuk tujuan. Temukan detail selengkapnya tentang penanda lanjutan.

Selanjutnya, kita akan memusatkan area tampilan peta pada rute yang diambil, menggunakan informasi area tampilan praktis yang disediakan oleh Routes API. Di app.js, tambahkan kode berikut:

async function setViewport(viewPort) {
  const { LatLng } = await google.maps.importLibrary("core");
  const { LatLngBounds } = await google.maps.importLibrary("core");
  let sw = new LatLng({lat:viewPort.low.latitude,lng:viewPort.low.longitude});
  let ne = new LatLng({lat:viewPort.high.latitude,lng:viewPort.high.longitude});
  map.fitBounds(new LatLngBounds(sw,ne));
}

Kode contoh lengkap Kode lengkap hingga saat ini tersedia di GitHub:step4_displayRoute

8. Menghapus elemen dari peta

Di sini kita ingin melangkah lebih jauh. Mari kita bersihkan peta sebelum menggambar penanda dan rute baru untuk menghindari kekacauan.

Di app.js, mari kita tambahkan satu fungsi lagi:

function clearUIElem(obj,type) {
  if(obj.length > 0){
      if(type == 'advMarker'){
          obj.forEach(function(item){
              item.map = null;
          });
      } else {
          obj.forEach(function(item){
              item.setMap(null);
          });
      }
  }
}

Tambahkan baris berikut di awal renderRoutes():

clearUIElem(paths,'polyline');

Tambahkan baris berikut di awal addMarker():

clearUIElem(markers,'advMarker');

Kode contoh lengkap

Kode lengkap hingga tahap ini tersedia di GitHub:step5_removeElements

9. Selamat

Anda telah berhasil membuat sesuatu.

Yang telah Anda pelajari

Mengaktifkan Google Maps Platform API
Memuat Google Maps JavaScript API ke dalam halaman HTML
Mengimpor Places Library, Maps JavaScript API
Mengikat layanan Place Autocomplete ke kolom teks
Meminta rute melalui Routes API
Menampilkan rute di peta dinamis
Membuat ID Peta
Membuat Penanda Lanjutan

Pelajari lebih lanjut

Pelajari lebih lanjut Google Maps Routes API
Jelajahi Google Maps JavaScript API lainnya
Pelajari lebih lanjut Google Maps Places API

Apa saja codelab lain yang ingin Anda lihat?

Visualisasi data pada peta

Selengkapnya tentang cara menyesuaikan gaya peta saya

Membuat interaksi 3D di peta

Apakah codelab yang Anda inginkan tidak tercantum di atas? Ajukan permintaan bersama masalah baru di sini.

Membangun perencana rute dengan Place Autocomplete dan Routes API Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

1. Ringkasan

Yang akan Anda build

Yang akan Anda pelajari

Yang Anda butuhkan

Kode contoh

2. Menyiapkan project dan mengaktifkan API

Menyiapkan Google Maps Platform

3. Menyiapkan project Node.js

4. Membuat peta dinamis

Membuat halaman HTML

Buat file CSS

Memuat Maps JavaScript API

Membuat file JavaScript

Tautkan file JavaScript

Kode contoh lengkap

5. Masukkan alamat asal dan tujuan

Menambahkan kolom teks

Mengimpor dan mengaktifkan Pelengkapan Otomatis

Menambahkan gaya yang relevan

Kode contoh lengkap

6. Minta rute

Membuat server

Menjalankan kode

Kode contoh lengkap

7. Menampilkan rute di peta

8. Menghapus elemen dari peta

Kode contoh lengkap

9. Selamat

Yang telah Anda pelajari

Pelajari lebih lanjut

Apa saja codelab lain yang ingin Anda lihat?

Membangun perencana rute dengan Place Autocomplete dan Routes API