Halaman ini diterjemahkan oleh Cloud Translation API.

Menambahkan peta ke situs Anda (JavaScript)

1. Sebelum Memulai

Dalam codelab ini, Anda akan mempelajari semua yang dibutuhkan untuk mulai menggunakan Google Maps Platform untuk web. Anda akan mempelajari semua dasar-dasarnya, mulai dari melakukan persiapan hingga memuat Maps JavaScript API, menampilkan peta pertama Anda, menggunakan penanda dan pengelompokan penanda, menggambar di peta, dan menangani interaksi pengguna.

Yang akan Anda buat

Di codelab ini, Anda membuat aplikasi web sederhana yang melakukan hal berikut:

Memuat Maps JavaScript API
Menampilkan peta yang berpusat di Sydney, Australia
Menampilkan penanda kustom untuk atraksi populer di Sydney
Menerapkan pengelompokan penanda
Memungkinkan interaksi pengguna yang memusatkan kembali peta dan menggambar lingkaran pada peta saat penanda diklik

Yang akan Anda pelajari

Memulai Google Maps Platform
Memuat Maps API JavaScript secara dinamis dari kode JavaScript
Memuat peta
Menggunakan penanda, penanda kustom, dan pengelompokan penanda
Menggunakan sistem peristiwa Maps JavaScript API untuk menyediakan interaksi pengguna
Mengontrol peta secara dinamis
Menggambar pada peta

2. Prasyarat

Anda harus mempelajari item di bawah untuk menyelesaikan Codelab ini. Jika Anda sudah terbiasa menggunakan Google Maps Platform, langsung buka Codelab.

Produk Google Maps Platform yang Diperlukan

Dalam Codelab ini, Anda akan menggunakan produk Google Maps Platform berikut:

Maps JavaScript API
Library pengelompokan penanda open source MarkerClustererPlus

Persyaratan Lainnya untuk Codelab ini

Untuk menyelesaikan codelab ini, Anda memerlukan akun, layanan, dan alat berikut:

Akun Google Cloud Platform dengan penagihan diaktifkan
Kunci API Google Maps Platform dengan Maps JavaScript API diaktifkan
Pengetahuan dasar tentang JavaScript, HTML, dan CSS
Node.js terinstal di komputer Anda
Editor teks atau IDE pilihan Anda

Memulai Google Maps Platform

Jika Anda belum pernah menggunakan Google Maps Platform, ikuti panduan Memulai Google Maps Platform atau tonton playlist Memulai Google Maps Platform untuk menyelesaikan langkah-langkah berikut:

Membuat akun penagihan.
Membuat project.
Mengaktifkan API dan SDK Google Maps Platform (tercantum di bagian sebelumnya).
Membuat kunci API.

3. Memulai Persiapan

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 dan SDK Google Maps Platform yang diperlukan untuk codelab ini di Google Cloud Marketplace. 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.

Penyiapan Node.js

Jika Anda belum memilikinya, buka https://nodejs.org/ untuk mendownload dan menginstal runtime Node.js di komputer.

Node.js disertai dengan npm, sebuah pengelola paket yang Anda perlukan untuk menginstal dependensi untuk codelab ini.

Penyiapan template permulaan project

Sebelum memulai codelab ini, lakukan hal berikut untuk mendownload template project permulaan, serta kode solusi lengkap:

Download atau lakukan fork repo GitHub untuk codelab ini di https://github.com/googlecodelabs/maps-platform-101-js.

Project permulaan terletak di direktori /starter dan menyertakan struktur file dasar yang Anda butuhkan untuk menyelesaikan codelab. Semua yang Anda butuhkan ada di direktori /starter/src. 2. Setelah mendownload project permulaan, jalankan npm install di direktori /starter. Tindakan ini akan menginstal semua dependensi yang diperlukan yang tercantum di package.json. 3. Setelah dependensi diinstal, jalankan npm start di direktori.

Project permulaan telah disiapkan agar Anda dapat menggunakan webpack-dev-server, yang mengompilasi dan menjalankan kode yang Anda tulis secara lokal. webpack-dev-server juga otomatis memuat ulang aplikasi Anda di browser setiap kali Anda membuat perubahan kode.

Jika ingin melihat kode solusi lengkap berjalan, Anda dapat menyelesaikan langkah-langkah penyiapan di atas pada direktori /solution.

4. Memuat Maps JavaScript API

Sebelum memulai, pastikan Anda mengikuti langkah-langkah yang ada di Melakukan Persiapan. Selesai? Oke, kini saatnya membuat aplikasi web pertama Anda menggunakan Google Maps Platform.

Dasar penggunaan Google Maps Platform untuk web adalah Maps JavaScript API. API ini menyediakan antarmuka JavaScript untuk menggunakan semua fitur Google Maps Platform, termasuk peta, penanda, alat gambar, dan layanan Google Maps Platform lainnya, seperti Places.

Jika pernah menggunakan Maps JavaScript API sebelumnya, Anda mungkin terbiasa memuatnya dengan memasukkan tag script ke dalam file HTML seperti ini:

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

Ini masih menjadi cara yang sangat valid untuk memuat API, namun dalam JavaScript modern, dependensi biasanya disertakan secara dinamis dari kode. Untuk menyelesaikan tag script yang setara di atas dari kode, Anda akan menggunakan modul @googlemaps/js-api-loader. JS API Loader sudah disertakan dalam dependensi file package.json untuk project, sehingga library ini telah diinstal saat Anda menjalankan npm install sebelumnya.

Untuk menggunakan JS API Loader, lakukan hal berikut:

Buka /src/app.js. File ini adalah tempat Anda akan mengerjakan seluruh pekerjaan untuk codelab ini.
Impor class Loader dari @googlemaps/js-api-loader.

Tambahkan kode berikut ke bagian atas app.js:
```
 import { Loader } from '@googlemaps/js-api-loader';
```
Buat objek apiOptions.

Class Loader memerlukan objek JSON yang akan menentukan berbagai opsi untuk memuat Maps JavaScript API, termasuk kunci Google Maps Platform API, versi API yang ingin Anda muat, dan library tambahan yang disediakan oleh Maps JS API yang ingin Anda muat. Untuk tujuan codelab ini, Anda hanya perlu menentukan kunci API dengan menambahkan kode berikut ke app.js:
```
 const apiOptions = {
   apiKey: "YOUR API KEY"
 }
```
Buat instance Loader dan teruskan apiOptions Anda ke instance tersebut.
```
 const loader = new Loader(apiOptions);
```
Muat Maps JS API.

Untuk memuat API, panggil load() pada instance Loader. JS API Loader menampilkan promise yang diuraikan setelah API dimuat dan siap digunakan. Tambahkan stub berikut untuk memuat API dan menangani promise:
```
 loader.load().then(() => {
   console.log('Maps JS API loaded');
 });
```

Jika semuanya berhasil, Anda akan melihat pernyataan console.log di konsol browser:

Sebagai ringkasan, Anda sejauh ini telah memuat Maps JavaScript API dari kode secara dinamis dan menentukan fungsi callback yang dijalankan setelah Maps JavaScript API selesai dimuat.

File app.js Anda akan terlihat seperti ini:

    import { Loader } from '@googlemaps/js-api-loader';

    const apiOptions = {
      apiKey: "YOUR API KEY"
    }

    const loader = new Loader(apiOptions);

    loader.then(() => {
      console.log('Maps JS API Loaded');
    });

Setelah Maps JavaScript API dimuat, Anda akan memuat peta di langkah berikutnya.

5. Menampilkan peta

Kini saatnya untuk menampilkan peta pertama Anda.

Bagian yang paling umum digunakan pada Maps JavaScript API adalah google.maps.Map, yang merupakan class yang memungkinkan kita membuat dan memanipulasi instance peta. Lihat cara melakukannya dengan membuat fungsi baru yang disebut displayMap().

Definisikan setelan peta Anda.

Maps JavaScript API mendukung berbagai setelan untuk peta, tetapi hanya dua yang diperlukan:
- center: menetapkan garis lintang dan bujur untuk pusat peta.
- zoom: menetapkan tingkat zoom awal peta.
Gunakan kode berikut untuk memusatkan peta di Sydney, Australia, dan berikan tingkat zoom 14, yang merupakan tingkat zoom yang tepat untuk menampilkan pusat kota.
```
 function displayMap() {
   const mapOptions = {
     center: { lat: -33.860664, lng: 151.208138 },
     zoom: 14
   };
 }
```
Dapatkan div tempat peta akan dimasukkan ke DOM.

Sebelum dapat menampilkan peta, Anda harus memberi tahu Maps JavaScript API tempat tampilan peta di halaman. Jika melihat sekilas di index.html, Anda akan melihat bahwa sudah ada div yang terlihat seperti ini:
```
 <div id="map"></div>
```
Untuk memberi tahu Maps JavaScript API bahwa ini adalah tempat Anda ingin memasukkan peta, gunakan document.getElementById untuk mendapatkan referensi DOM-nya:
```
 const mapDiv = document.getElementById('map');
```
Buat instance google.maps.Map.

Untuk meminta Maps JavaScript API membuat peta baru yang dapat ditampilkan, buat instance google.maps.Map, lalu teruskan mapDiv dan mapOptions ke instance tersebut. Anda juga menampilkan instance Map dari fungsi ini sehingga Anda dapat melakukan lebih banyak hal dengan instance ini nantinya:
```
 const map = new google.maps.Map(mapDiv, mapOptions);
 return map;
```
Tampilkan peta.

Setelah menentukan semua logika untuk membuat instance peta, Anda tinggal memanggil displayMap() dari pengendali promise JS API agar dipanggil setelah Maps JavaScript API dimuat:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
 });
```

Sekarang, Anda akan melihat peta Sydney yang indah di browser Anda:

Sebagai ringkasan, pada langkah ini Anda telah menentukan opsi tampilan untuk peta, membuat instance peta baru, dan memasukkannya ke dalam DOM.

Fungsi displayMap() Anda akan terlihat seperti ini:

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14
  };
  const mapDiv = document.getElementById('map');
  const map = new google.maps.Map(mapDiv, mapOptions);
  return map;
}

6. Penataan gaya peta berbasis cloud (Opsional)

Anda dapat menyesuaikan gaya peta menggunakan Penataan gaya peta berbasis cloud.

Membuat ID Peta

Jika Anda belum membuat ID peta dengan gaya peta terkait, lihat panduan ID Peta untuk menyelesaikan langkah-langkah berikut:

Membuat ID peta.
Mengaitkan ID peta ke gaya peta.

Menambahkan ID Peta ke aplikasi Anda

Untuk menggunakan ID peta yang Anda buat, ubah fungsi displayMap pada file app.js dan teruskan ID peta di properti mapId untuk objek mapOptions.

app.js

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14,
    mapId: 'YOUR_MAP_ID'
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

Setelah menyelesaikannya, Anda akan melihat gaya yang dipilih di peta.

7. Menambahkan penanda ke peta

Ada banyak hal yang dilakukan developer dengan Maps JavaScript API, tetapi menempatkan penanda pada peta tentunya menjadi hal yang paling populer. Penanda memungkinkan Anda menampilkan titik tertentu pada peta, dan merupakan elemen UI yang umum untuk menangani interaksi pengguna. Jika pernah menggunakan Google Maps sebelumnya, Anda mungkin terbiasa dengan penanda default, yang terlihat seperti ini:

Pada langkah ini, Anda akan menggunakan google.maps.Marker untuk menempatkan penanda pada peta.

Tentukan objek untuk lokasi penanda Anda.

Untuk memulai, buat fungsi addMarkers() baru, dan deklarasikan objek locations yang memiliki kumpulan titik lintang/bujur berikut untuk tempat wisata populer di Sydney.

Selain itu, perhatikan bahwa Anda perlu meneruskan instance Map ke fungsi tersebut. Anda akan menggunakannya nanti saat membuat instance penanda.

 function addMarkers(map) {
   const locations = {
     operaHouse: { lat: -33.8567844, lng: 151.213108 },
     tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
     manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
     hyderPark: { lat: -33.8690081, lng: 151.2052393 },
     theRocks: { lat: -33.8587568, lng: 151.2058246 },
     circularQuay: { lat: -33.858761, lng: 151.2055688 },
     harbourBridge: { lat: -33.852228, lng: 151.2038374 },
     kingsCross: { lat: -33.8737375, lng: 151.222569 },
     botanicGardens: { lat: -33.864167, lng: 151.216387 },
     museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
     maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
     kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
     aquarium: { lat: -33.869627, lng: 151.202146 },
     darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
     barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
   }
 }

Buat instance google.maps.Marker untuk setiap penanda yang ingin Anda tampilkan.

Agar dapat membuat penanda, gunakan kode di bawah untuk melakukan iterasi melalui objek locations menggunakan loop for...in, buat kumpulan opsi terkait cara setiap penanda akan dirender, lalu buat instance google.maps.Marker untuk setiap lokasi.

Perhatikan properti icon untuk markerOptions. Masih ingat dengan pin peta default yang dibahas sebelumnya? Tahukah Anda bahwa Anda juga bisa menyesuaikan pin tersebut untuk menjadi gambar yang diinginkan? Anda bisa melakukannya.

Properti icon memungkinkan Anda menyediakan jalur ke setiap file gambar yang ingin digunakan sebagai penanda kustom. Jika Anda memulai codelab ini menggunakan template project kami, maka gambar sudah disertakan dalam /src/images.

Perhatikan juga bahwa Anda perlu menyimpan instance penanda dalam array dan menampilkannya dari fungsi agar dapat digunakan nanti.
```
 const markers = [];
 for (const location in locations) {
   const markerOptions = {
     map: map,
     position: locations[location],
     icon: './img/custom_pin.png'
   }
   const marker = new google.maps.Marker(markerOptions);
   markers.push(marker);
 }
 return markers;
```
Tampilkan penanda.

Maps JavaScript API akan otomatis membuat dan menampilkan penanda setiap kali instance google.maps.Marker yang baru dibuat, jadi sekarang Anda hanya perlu mengupdate pengendali promise JS API untuk memanggil addMarkers() dan meneruskan instance Map Anda ke fungsi tersebut:
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
 });
```

Sekarang, Anda akan melihat penanda kustom di peta:

Sebagai ringkasan, pada langkah ini, Anda telah menentukan sekumpulan lokasi penanda dan membuat instance google.maps.Marker dengan ikon penanda kustom untuk setiap lokasi.

Fungsi addMarkers() Anda akan terlihat seperti ini:

    function addMarkers(map) {
      const locations = {
        operaHouse: { lat: -33.8567844, lng: 151.213108 },
        tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
        manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
        hyderPark: { lat: -33.8690081, lng: 151.2052393 },
        theRocks: { lat: -33.8587568, lng: 151.2058246 },
        circularQuay: { lat: -33.858761, lng: 151.2055688 },
        harbourBridge: { lat: -33.852228, lng: 151.2038374 },
        kingsCross: { lat: -33.8737375, lng: 151.222569 },
        botanicGardens: { lat: -33.864167, lng: 151.216387 },
        museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
        maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
        kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
        aquarium: { lat: -33.869627, lng: 151.202146 },
        darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
        barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
      }
      const markers = [];
      for (const location in locations) {
        const markerOptions = {
          map: map,
          position: locations[location],
          icon: './img/custom_pin.png'
        }
        const marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
      }
      return markers;
    }

Pada langkah berikutnya, Anda akan melihat cara meningkatkan kualitas pengalaman pengguna terkait penanda yang menggunakan pengelompokan penanda.

8. Mengaktifkan pengelompokan penanda

Saat menggunakan banyak penanda atau penanda yang letaknya saling berdekatan, Anda mungkin mengalami masalah ketika penanda tumpang-tindih atau tampak bergerombol, yang menyebabkan pengalaman pengguna menjadi buruk. Misalnya, setelah membuat penanda di langkah terakhir, Anda mungkin melihat tampilan ini:

Di sinilah pengelompokan penanda diperlukan. Pengelompokan penanda adalah fitur lain yang umum diterapkan, yang mengelompokkan penanda yang letaknya berdekatan menjadi satu ikon, yang akan berubah bergantung pada tingkat zoom, seperti di bawah ini:

Algoritme untuk pengelompokan penanda membagi area peta yang terlihat menjadi sebuah petak, lalu mengelompokkan ikon yang berada di sel yang sama. Untungnya, Anda tidak perlu khawatir tentang hal tersebut karena tim Google Maps Platform telah membuat library utilitas open source yang berguna, yang disebut MarkerClustererPlus. Library ini akan melakukan semuanya untuk Anda secara otomatis. Anda dapat melihat sumber untuk MarkerClustererPlus di GitHub.

Impor MarkerCluster.

Untuk project template untuk codelab ini, library utilitas MarkerClustererPlus sudah disertakan dalam dependensi yang dideklarasikan dalam file package.json, sehingga Anda sudah menginstalnya saat menjalankan npm install di awal codelab ini.

Untuk mengimpor library, tambahkan kode berikut ke bagian atas file app.js Anda:
```
 import MarkerClusterer from '@google/markerclustererplus';
```
Buat instance MarkerClusterer yang baru.

Untuk membuat cluster penanda, Anda perlu melakukan dua hal, yaitu menyediakan ikon yang ingin Anda gunakan untuk cluster penanda dan membuat instance MarkerClusterer yang baru.

Pertama, deklarasikan objek yang menetapkan jalur ke ikon yang ingin Anda gunakan. Dalam project template, sudah ada kumpulan gambar yang disimpan di ./img/m. Perhatikan bahwa nama file gambar diberi nomor secara berurutan dengan awalan yang sama, yaitu m1.png, m2.png, m3.png, dan seterusnya.

Saat Anda menetapkan properti imagePath dalam opsi untuk pengelompok penanda, Anda cukup memberikan awalan file dan jalur, lalu pengelompok penanda ini akan otomatis menggunakan semua file dengan awalan tersebut dan menambahkan angka ke bagian akhir namanya.

Kedua, buat instance MarkerClusterer yang baru, lalu teruskan instance Map, tempat Anda ingin cluster penanda ditampilkan dan array instance Marker dikelompokkan, ke instance MarkerClusterer tersebut.
```
 function clusterMarkers(map, markers) {
   const clustererOptions = { imagePath: './img/m' }
   const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
 }
```
Tampilkan cluster penanda.

Panggil clusterMarkers() dari pengendali promise JS API. Cluster penanda akan otomatis ditambahkan ke peta saat instance MarkerClusterer dibuat di panggilan fungsi.
```
 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
 });
```

Sekarang Anda akan melihat beberapa cluster penanda pada peta.

Perhatikan bahwa jika Anda memperbesar atau memperkecil, MarkerClustererPlus akan otomatis mengubah nomor dan ukuran cluster untuk Anda. Anda juga dapat mengklik ikon cluster penanda untuk memperbesar dan melihat semua penanda yang disertakan dalam cluster tersebut.

Sebagai ringkasan, pada langkah ini Anda telah mengimpor library utilitas open source MarkerClustererPlus dan menggunakannya untuk membuat instance MarkerClusterer yang secara otomatis mengelompokkan penanda yang dibuat di langkah sebelumnya.

Fungsi clusterMarkers() Anda akan terlihat seperti ini:

    function clusterMarkers(map, markers) {
      const clustererOptions = { imagePath: './img/m' }
      const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
    }

Selanjutnya, Anda akan mempelajari cara menangani interaksi pengguna.

9. Menambahkan interaksi pengguna

Sekarang, Anda memiliki peta yang terlihat bagus yang menampilkan beberapa tujuan wisata paling populer di Sydney. Pada langkah ini, Anda akan menambahkan penanganan tambahan tertentu untuk interaksi pengguna menggunakan sistem peristiwa Maps JavaScript API untuk lebih meningkatkan kualitas pengalaman pengguna peta Anda.

Maps JavaScript API menyediakan sistem peristiwa komprehensif yang menggunakan pengendali peristiwa JavaScript agar Anda dapat menangani berbagai interaksi pengguna dalam kode. Misalnya, Anda dapat membuat pemroses peristiwa untuk memicu eksekusi kode untuk interaksi seperti pengguna mengklik peta dan penanda, menggeser tampilan peta, memperbesar dan memperkecil, dan lainnya.

Pada langkah ini, Anda akan menambahkan pemroses klik ke penanda Anda, lalu secara terprogram membuat peta bergeser untuk menempatkan penanda yang diklik pengguna di pusat peta.

Tetapkan pemroses klik pada penanda Anda.

Semua objek dalam Maps JavaScript API yang mendukung sistem peristiwa menerapkan sekumpulan fungsi standar untuk menangani interaksi pengguna, seperti addListener, removeListener, dan lainnya.

Untuk menambahkan pemroses peristiwa klik ke setiap penanda, lakukan iterasi array markers lalu panggil addListener pada instance penanda untuk melampirkan pemroses untuk peristiwa click:
```
 function addPanToMarker(map, markers) {
   markers.map(marker => {
     marker.addListener('click', event => {

     });
   });
 }
```
Geser ke penanda saat diklik.

Peristiwa click dipicu setiap kali pengguna mengklik atau mengetuk penanda, dan menampilkan peristiwa sebagai objek JSON dengan informasi tentang elemen UI yang diklik. Untuk meningkatkan kualitas pengalaman pengguna peta, Anda dapat menangani peristiwa click dan menggunakan objek LatLng untuk mendapatkan garis lintang dan bujur penanda yang diklik. Setelah Anda melakukannya, cukup teruskan ke fungsi panTo() bawaan instance Map untuk membuat peta bergeser kembali ke pusat dengan lancar pada penanda yang diklik dengan menambahkan kode berikut dalam fungsi callback pengendali peristiwa:
```
 const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
 map.panTo(location);
```

Tetapkan pemroses klik.

Panggil addPanToMarker() dari pengendali promise JS API, lalu teruskan peta dan penanda ke fungsi tersebut untuk menjalankan kode dan menetapkan pemroses klik.

 loader.then(() => {
   console.log('Maps JS API loaded');
   const map = displayMap();
   const markers = addMarkers(map);
   clusterMarkers(map, markers);
   addPanToMarker(map, markers);
 });

Sekarang, buka browser dan klik penanda Anda. Anda akan melihat peta bergeser kembali ke pusat secara otomatis saat penanda diklik.

Sebagai rangkuman, dalam langkah ini, Anda telah menggunakan sistem peristiwa Maps JavaScript API untuk menetapkan pemroses klik ke semua penanda pada peta, mengambil garis lintang dan garis bujur penanda dari peristiwa klik yang diaktifkan, dan menggunakannya untuk membuat peta kembali ke pusat setiap kali penanda diklik.

Fungsi addPanToMarker() Anda akan terlihat seperti ini:

    function addPanToMarker(map, markers) {
      markers = markers.map(marker => {
        marker.addListener('click', event => {
          const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
          map.panTo(location);
        });
      });
      return markers;
    }

Tinggal satu langkah lagi. Berikutnya, Anda akan lebih meningkatkan kualitas pengalaman pengguna peta menggunakan fitur gambar Maps JavaScript API.

10. Gambar di peta

Sejauh ini, Anda telah membuat peta Sydney yang menampilkan penanda untuk tujuan wisata yang populer dan menangani interaksi pengguna. Untuk langkah terakhir dalam codelab ini, Anda akan menggunakan fitur gambar Maps JavaScript API untuk menambahkan fitur tambahan yang berguna ke pengalaman peta Anda.

Bayangkan peta ini akan digunakan oleh pengguna yang ingin menjelajahi kota Sydney. Fitur yang berguna akan memvisualisasikan radius di sekeliling penanda saat diklik. Ini akan mempermudah pengguna memahami tujuan lain apa saja yang bisa ditempuh dengan berjalan kaki dari penanda yang diklik.

Maps JavaScript API mencakup sekumpulan fungsi untuk menggambar bentuk pada peta, seperti persegi, poligon, garis, dan lingkaran. Selanjutnya, Anda akan merender lingkaran untuk menampilkan radius 800 meter (sekitar setengah mil) di sekeliling penanda saat diklik.

Gambar lingkaran dengan google.maps.Circle.

Fungsi gambar di Maps JavaScript API memberi Anda berbagai opsi terkait cara objek yang digambar akan ditampilkan pada peta. Untuk merender radius lingkaran, deklarasikan sekumpulan opsi untuk lingkaran, seperti warna, ketebalan garis luar, tempat lingkaran akan dipusatkan dan radiusnya, lalu buat instance google.maps.Circle yang baru untuk membuat lingkaran baru:
```
 function drawCircle(map, location) {
   const circleOptions = {
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 1,
     map: map,
     center: location,
     radius: 800
   }
   const circle = new google.maps.Circle(circleOptions);
   return circle;
 }
```
Gambar lingkaran saat penanda diklik.

Untuk menggambar lingkaran saat pengguna mengklik penanda, Anda hanya perlu memanggil fungsi drawCircle() yang sudah Anda tulis di atas dari callback pemroses klik di addPanToMarker(), lalu meneruskan peta dan lokasi penanda ke fungsi tersebut.

Perhatikan bagaimana pernyataan kondisional juga ditambahkan, yang akan memanggil circle.setMap(null). Tindakan ini akan menghapus lingkaran yang sebelumnya dirender dari peta jika pengguna mengklik penanda lain, sehingga Anda tidak akan mendapatkan peta yang tertutup lingkaran saat pengguna menjelajahi peta.

Fungsi addPanToMarker() Anda akan terlihat seperti ini:
```
 function addPanToMarker(map, markers) {
   let circle;
   markers.map(marker => {
     marker.addListener('click', event => {
       const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
       map.panTo(location);
       if (circle) {
         circle.setMap(null);
       }
       circle = drawCircle(map, location);
     });
   });
 }
```

Selesai. Buka browser Anda, dan klik salah satu penanda. Anda akan melihat radius lingkaran yang dirender di sekelilingnya:

11. Selamat

Anda telah berhasil membuat aplikasi web pertama Anda menggunakan Google Maps Platform, termasuk memuat Maps JavaScript API, memuat peta, menggunakan penanda, mengontrol dan menggambar pada peta, dan menambahkan interaksi pengguna.

Untuk melihat kode yang sudah selesai, lihat project yang telah selesai di direktori /solutions.

Apa langkah selanjutnya?

Dalam codelab ini, Anda telah mempelajari apa saja yang dapat Anda lakukan dengan Maps JavaScript API. Selanjutnya, coba tambahkan beberapa fitur berikut ke peta:

Ubah jenis peta untuk menampilkan peta satelit, hibrid, dan medan.
Aktifkan pelokalan untuk memuat peta dalam berbagai bahasa.
Sesuaikan interaksi pengguna lainnya seperti zoom dan kontrol peta.
Tambahkan jendela info untuk menampilkan informasi saat penanda diklik.
Lihat library tambahan yang tersedia untuk Maps JavaScript API yang mengaktifkan fungsi tambahan, seperti Places, gambar, dan visualisasi.

Untuk terus mempelajari lebih lanjut cara menggunakan Google Maps Platform di web, buka link berikut: