Menambahkan peta Google ke aplikasi React

1. Sebelum memulai

Dalam codelab ini, Anda akan mempelajari semua yang diperlukan untuk mulai menggunakan library vis.gl/react-google-map untuk Google Maps JavaScript API, yang memungkinkan Anda menambahkan peta Google ke aplikasi React. Anda akan mempelajari cara melakukan penyiapan, memuat Maps JavaScript API, menampilkan peta pertama, menggunakan penanda dan pengelompokan penanda, menggambar di peta, dan menangani interaksi pengguna.

Prasyarat

  • Pengetahuan dasar tentang JavaScript, HTML, dan CSS

Yang Anda pelajari

  • Cara memulai library vis.gl/react-google-map untuk Google Maps Platform.
  • Cara memuat Maps JavaScript API secara deklaratif.
  • Cara memuat peta di aplikasi React.
  • Cara menggunakan penanda, penanda kustom, dan pengelompokan penanda.
  • Cara menggunakan sistem peristiwa Maps JavaScript API untuk menyediakan interaksi pengguna.
  • Cara mengontrol peta secara dinamis.
  • Cara menggambar di peta.

Yang Anda perlukan

  • Akun Google Cloud dengan penagihan diaktifkan.
  • Kunci API Google Maps Platform dengan Maps JavaScript API diaktifkan.
  • Node.js terinstal di komputer Anda.
  • Editor teks atau IDE pilihan Anda.
  • Library vis.gl/react-google-map untuk Google Maps JavaScript API.
  • Koleksi googlemaps/markerclusterer

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.

  1. Di Cloud Console, klik menu drop-down project lalu pilih project yang ingin Anda gunakan untuk codelab ini.

  1. 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.
  2. 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.

2. Memulai persiapan

Download project awal

Untuk mendownload template project awal dan kode solusi, ikuti langkah-langkah berikut:

  1. Download atau buat fork repositori GitHub. Project permulaan berada di direktori /starter dan menyertakan struktur file dasar yang Anda butuhkan untuk menyelesaikan codelab. Anda melakukan semua pekerjaan di direktori /starter/src.
git clone https://github.com/googlemaps-samples/codelab-maps-platform-101-react-js.git

Atau, klik tombol ini untuk mendownload kode sumber.

  1. Buka direktori /starter dan instal npm. Tindakan ini akan menginstal semua dependensi yang diperlukan yang tercantum dalam file package.json.
cd starter && npm install
  1. Saat masih berada di direktori /starter:
npm start

Project permulaan telah disiapkan agar Anda dapat menggunakan server pengembangan Vite, yang mengompilasi dan menjalankan kode yang Anda tulis secara lokal. Server pengembangan Vite juga otomatis memuat ulang aplikasi Anda di browser setiap kali Anda membuat perubahan kode. Jika Anda mengikuti link yang diberikan di akhir proses build, Anda akan menemukan halaman web yang bertuliskan: "Hello, world!"

  1. Jika Anda ingin menjalankan kode solusi lengkap, buka direktori /solution dan selesaikan langkah-langkah penyiapan yang sama.

3. Memuat Maps JavaScript API

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.

Untuk memuat Maps JavaScript API dengan framework React, Anda perlu menggunakan komponen APIProvider yang merupakan bagian dari library vis.gl/react-google-map. Komponen ini dapat ditambahkan di tingkat aplikasi mana pun, biasanya di bagian atas, dan merender semua komponen turunan tanpa diubah. Selain menangani pemuatan Maps JavaScript API, komponen ini juga menyediakan informasi dan fungsi konteks untuk komponen dan hook lain dari library ini. APIProvider disertakan dalam library vis.gl/react-google-map, sehingga library ini telah diinstal saat Anda menjalankan npm install sebelumnya.

Untuk menggunakan komponen APIProvider, ikuti langkah-langkah berikut:

  1. Buka file /src/app.tsx. Di file ini, Anda akan melakukan semua pekerjaan untuk codelab ini.
  2. Di bagian atas file, impor class APIProvider dari library @vis.gl/react-google-maps:
import {APIProvider} from '@vis.gl/react-google-maps';
  1. Dalam definisi fungsi App, tetapkan parameter apiKey komponen APIProvider dengan Kunci API yang dibuat pada langkah sebelumnya dan properti onLoad dengan pesan log konsol:
<APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>

Komponen APIProvider mengambil serangkaian properti yang menentukan berbagai opsi untuk memuat Maps JavaScript API, termasuk kunci API Google Maps Platform, versi API yang ingin Anda muat, dan library tambahan yang disediakan oleh Maps JavaScript API yang ingin Anda muat.

Kunci Google Maps API adalah satu-satunya properti yang diperlukan agar APIProvider berfungsi, dan kami menyertakan properti onLoad untuk tujuan demonstrasi. Untuk mengetahui informasi selengkapnya, lihat Komponen <APIProvider>.

File app.tsx Anda seharusnya terlihat seperti ini:

import React from 'react';
import {createRoot} from "react-dom/client";
import {APIProvider} from '@vis.gl/react-google-maps';

const App = () => (
 <APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>
   <h1>Hello, world!</h1>
 </APIProvider>
);

const root = createRoot(document.getElementById('app'));
root.render(<App />);

export default App;

Jika semuanya berhasil, Anda akan melihat pernyataan console.log di konsol browser. Setelah Maps JavaScript API dimuat, Anda dapat merender peta dinamis di langkah berikutnya.

4. 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 Anda membuat dan memanipulasi instance peta. Library vis.gl/react-google-map membungkus class ini dalam komponen Map. Pertama, impor class Map dan MapCameraChangedEvent.

import {APIProvider, Map, MapCameraChangedEvent} from '@vis.gl/react-google-maps';

Komponen Map mendukung berbagai setelan yang berbeda untuk peta. Untuk codelab ini, Anda menggunakan setelan berikut:

  • defaultCenter, yang menetapkan garis lintang dan bujur untuk pusat peta.
  • defaultZoom, yang menetapkan tingkat zoom awal peta.
  • Untuk menampilkan peta, tempatkan kode berikut dalam tag APIProvider untuk memusatkan peta di Sydney, Australia, dan berikan tingkat zoom 13, yang merupakan tingkat zoom yang tepat untuk menampilkan pusat kota:
 <Map
      defaultZoom={13}
      defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
      onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
      }>
</Map>

Sekarang Anda akan melihat peta Sydney di browser Anda:

761c8c51c6631174.png

Sebagai ringkasan, di bagian ini Anda telah menampilkan peta dengan komponen <Map> dan menetapkan status awalnya dengan properti. Anda juga menggunakan peristiwa untuk merekam saat kamera berubah.

File app.tsx Anda akan terlihat seperti ini:

import React from 'react';
import {createRoot} from "react-dom/client";
import {APIProvider, Map, MapCameraChangedEvent} from '@vis.gl/react-google-maps';

const App = () => (
 <APIProvider apiKey={'Your API key here'} onLoad={() => console.log('Maps API has loaded.')}>
   <Map
      defaultZoom={13}
      defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
      onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
      }>
   </Map>
 </APIProvider>
);

const root = createRoot(document.getElementById('app'));
root.render(<App />);

export default App;

5. Menambahkan gaya visual peta berbasis cloud

ID peta diperlukan untuk menggunakan Penanda Lanjutan, yang Anda gunakan untuk menandai lokasi menarik di peta Sydney. ID peta juga digunakan untuk gaya visual peta berbasis cloud.

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:

  1. Membuat ID peta.
  2. Mengaitkan ID peta ke gaya peta.

Untuk menggunakan ID peta yang Anda buat, tetapkan properti mapId komponen <Map>:

<Map
    defaultZoom={13}
    defaultCenter={ { lat: -33.860664, lng: 151.208138 } }
    mapId='DEMO_MAP_ID'
    onCameraChanged={ (ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
    }>
</Map>

Anda akan melihat gaya yang dipilih di peta.

6. 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:

d9a6513b82a2f1e1.png

Untuk menggunakan komponen AdvancedMarker guna menempatkan penanda pada peta, ikuti langkah-langkah berikut:

  1. Buat daftar objek untuk merepresentasikan tempat menarik di area Sydney, tempatkan tepat di bawah impor Anda, di luar definisi App:
type Poi ={ key: string, location: google.maps.LatLngLiteral }
const locations: Poi[] = [
  {key: 'operaHouse', location: { lat: -33.8567844, lng: 151.213108  }},
  {key: 'tarongaZoo', location: { lat: -33.8472767, lng: 151.2188164 }},
  {key: 'manlyBeach', location: { lat: -33.8209738, lng: 151.2563253 }},
  {key: 'hyderPark', location: { lat: -33.8690081, lng: 151.2052393 }},
  {key: 'theRocks', location: { lat: -33.8587568, lng: 151.2058246 }},
  {key: 'circularQuay', location: { lat: -33.858761, lng: 151.2055688 }},
  {key: 'harbourBridge', location: { lat: -33.852228, lng: 151.2038374 }},
  {key: 'kingsCross', location: { lat: -33.8737375, lng: 151.222569 }},
  {key: 'botanicGardens', location: { lat: -33.864167, lng: 151.216387 }},
  {key: 'museumOfSydney', location: { lat: -33.8636005, lng: 151.2092542 }},
  {key: 'maritimeMuseum', location: { lat: -33.869395, lng: 151.198648 }},
  {key: 'kingStreetWharf', location: { lat: -33.8665445, lng: 151.1989808 }},
  {key: 'aquarium', location: { lat: -33.869627, lng: 151.202146 }},
  {key: 'darlingHarbour', location: { lat: -33.87488, lng: 151.1987113 }},
  {key: 'barangaroo', location: { lat: - 33.8605523, lng: 151.1972205 }},
];

const App = () => (
  ...
);
  1. Sesuaikan pin Anda dengan elemen <Pin>:
<Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
  1. Buat komponen kustom untuk merender daftar Anda dengan Penanda Lanjutan, tempatkan ini di bawah definisi App:
const App = () => (
  ...
);

const PoiMarkers = (props: {pois: Poi[]}) => {
  return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}>
        <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};
  1. Tambahkan komponen PoiMarkers sebagai turunan komponen Map:
<Map
  ... map properties ...
>
  <PoiMarkers pois={locations} />
</Map>
  1. Terakhir, tambahkan Pin dan AdvancedMarker ke impor Anda.
import {
  APIProvider,
  Map,
  AdvancedMarker,
  MapCameraChangedEvent,
  Pin
} from '@vis.gl/react-google-maps';

Anda akan melihat Penanda Lanjutan yang disesuaikan di peta:

98d12a994e12a2c1.png

7. 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:

98d12a994e12a2c1.png

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:

3da24a6b737fe499.png

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 library MarkerClustererPlus di GitHub.

Untuk mengaktifkan pengelompokan penanda, ikuti langkah-langkah berikut:

  1. Di bagian atas file app.tsx, perbarui dan tambahkan impor library dan jenis pendukung.
import React, {useEffect, useState, useRef, useCallback} from 'react';
import {createRoot} from "react-dom/client";
import {
    APIProvider,
    Map,
    AdvancedMarker,
    MapCameraChangedEvent,
    useMap,
    Pin
  } from '@vis.gl/react-google-maps';
  import {MarkerClusterer} from '@googlemaps/markerclusterer';
  import type {Marker} from '@googlemaps/markerclusterer';

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.

  1. Buat variabel untuk elemen MarkerClusterer dan pendukung di komponen PoiMarkers.

Anda memerlukan instance peta untuk menginisialisasi MarkerClusterer. Dapatkan instance tersebut dari hook useMap():

const map = useMap();
  1. Buat daftar penanda yang disimpan dalam variabel status:
const [markers, setMarkers] = useState<{[key: string]: Marker}>({});
  1. Simpan pengelompok sebagai referensi:
const clusterer = useRef<MarkerClusterer | null>(null);
  1. Selain itu, di komponen PoiMarkers, buat instance MarkerClusterer dan teruskan instance Map, tempat Anda ingin cluster penanda ditampilkan:
 useEffect(() => {
    if (!map) return;
    if (!clusterer.current) {
      clusterer.current = new MarkerClusterer({map});
    }
  }, [map]);
  1. Buat efek yang memperbarui pengelompok saat daftar penanda berubah:
useEffect(() => {
    clusterer.current?.clearMarkers();
    clusterer.current?.addMarkers(Object.values(markers));
  }, [markers]);
  1. Buat fungsi untuk mencetak referensi untuk penanda baru:
const setMarkerRef = (marker: Marker | null, key: string) => {
    if (marker && markers[key]) return;
    if (!marker && !markers[key]) return;

    setMarkers(prev => {
      if (marker) {
        return {...prev, [key]: marker};
      } else {
        const newMarkers = {...prev};
        delete newMarkers[key];
        return newMarkers;
      }
    });
  };
  1. Gunakan metode ini di elemen AdvancedMarker untuk membuat referensi bagi setiap penanda.
<AdvancedMarker
  key={poi.key}
  position={poi.location}
  ref={marker => setMarkerRef(marker, poi.key)}
  >
    <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
</AdvancedMarker>

Sekarang Anda akan melihat cluster penanda di peta:

3da24a6b737fe499.png

Jika Anda memperbesar dan 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.

d5e75480e9abd3c7.png

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

Komponen PoiMarkers Anda akan terlihat seperti ini:

const PoiMarkers = (props: { pois: Poi[] }) => {
  const map = useMap();
  const [markers, setMarkers] = useState<{[key: string]: Marker}>({});
  const clusterer = useRef<MarkerClusterer | null>(null);

  // Initialize MarkerClusterer, if the map has changed
  useEffect(() => {
    if (!map) return;
    if (!clusterer.current) {
      clusterer.current = new MarkerClusterer({map});
    }
  }, [map]);

  // Update markers, if the markers array has changed
  useEffect(() => {
    clusterer.current?.clearMarkers();
    clusterer.current?.addMarkers(Object.values(markers));
  }, [markers]);

  const setMarkerRef = (marker: Marker | null, key: string) => {
    if (marker && markers[key]) return;
    if (!marker && !markers[key]) return;

    setMarkers(prev => {
      if (marker) {
        return {...prev, [key]: marker};
      } else {
        const newMarkers = {...prev};
        delete newMarkers[key];
        return newMarkers;
      }
    });
  };

  return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}
          ref={marker => setMarkerRef(marker, poi.key)}
          >
            <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};

Selanjutnya, Anda akan mempelajari cara menangani interaksi pengguna.

8. Menambahkan interaksi pengguna

Sekarang, Anda memiliki peta yang terlihat bagus yang menampilkan beberapa tujuan wisata paling populer di Sydney. Di bagian ini, Anda akan menambahkan penanganan tambahan tertentu untuk interaksi pengguna dengan 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.

Untuk menambahkan pemroses click ke penanda Anda, lalu secara terprogram membuat peta bergeser sehingga penanda yang diklik muncul di tengah peta, ikuti langkah-langkah berikut:

  1. Buat callback handler click.

Dalam komponen PoiMarkers, tentukan pengendali click dengan useCallback() React.

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 lintang dan bujur penanda yang diklik.

Setelah Anda memiliki garis lintang dan bujur, 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 PoiMarkers = (props: { pois: Poi[] }) => {
...
const handleClick = useCallback((ev: google.maps.MapMouseEvent) => {
    if(!map) return;
    if(!ev.latLng) return;
    console.log('marker clicked:', ev.latLng.toString());
    map.panTo(ev.latLng);
  });
...
};
  1. Tetapkan pengendali click ke penanda.

Elemen AdvancedMarker dari library vis.gl/react-google-map mengekspos dua properti yang berguna untuk menangani klik:

  • clickable: Jika benar, AdvancedMarker akan dapat diklik dan memicu peristiwa gmp-click, serta akan interaktif untuk tujuan aksesibilitas. Misalnya, pengguna akan dapat melakukan navigasi keyboard dengan tombol panah.
  • onClick: Fungsi callback yang akan dipanggil saat peristiwa click terjadi.
  1. Perbarui rendering PoiMarkers untuk menetapkan pengendali click ke setiap penanda:
return (
    <>
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          ... other properties ...
          clickable={true}
          onClick={handleClick}
          >
           ...
        </AdvancedMarker>
      ))}
    </>
  );
  1. Buka browser dan klik penanda Anda. Anda akan melihat peta bergeser kembali ke pusat secara otomatis saat penanda diklik.

Sebagai ringkasan, di bagian ini, Anda telah menggunakan sistem peristiwa React untuk menetapkan pengendali click ke semua penanda di peta, mengambil garis lintang dan garis bujur penanda dari peristiwa click yang diaktifkan, dan menggunakannya untuk memusatkan kembali peta setiap kali penanda diklik.

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

9. 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 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. Hal 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. Library vis.gl/react-google-map menyediakan kemampuan ini untuk Anda di React.

Selanjutnya, Anda merender lingkaran untuk menampilkan radius 800 meter (sekitar setengah mil) di sekeliling penanda saat diklik.

Repositori awal berisi komponen kustom untuk elemen circle. Anda dapat menemukannya di file src/components/circle.tsx.

Untuk mengizinkan pengguna menggambar di peta, ikuti langkah-langkah berikut:

  1. Perbarui impor Anda untuk menyertakan komponen Circle yang disediakan.
import {Circle} from './components/circle'
  1. Buat variabel status untuk pusat lingkaran.

Ambil status bagian tengah lingkaran Anda dalam komponen PoiMarkers. Anda menetapkan status awal ke null, dan mengandalkan fakta bahwa lingkaran tidak akan dirender kecuali jika memiliki lokasi tengah (dan radius) yang valid.

const PoiMarkers = (props: { pois: Poi[] }) => {
...
  const [circleCenter, setCircleCenter] = useState(null)
...
};
  1. Perbarui pusat lingkaran saat peristiwa click ditangani.

Panggil setCircleCenter dengan lokasi yang ditemukan dalam objek acara:

const handleClick = useCallback((ev: google.maps.MapMouseEvent) => {
    ...
    setCircleCenter(ev.latLng);
  });

Fungsi gambar di Maps JavaScript API memberi Anda berbagai opsi tentang bagaimana objek yang digambar akan muncul pada peta. Untuk merender radius lingkaran, tetapkan properti elemen lingkaran, seperti warna dan ketebalan garis luar, tempat lingkaran akan dipusatkan dan radiusnya.

  1. Tambahkan lingkaran ke rendering dan ikat pusat ke variabel status Anda. Rendering Anda akan terlihat seperti ini:
return (
    <>
      <Circle
          radius={800}
          center={circleCenter}
          strokeColor={'#0c4cb3'}
          strokeOpacity={1}
          strokeWeight={3}
          fillColor={'#3b82f6'}
          fillOpacity={0.3}
        />
      {props.pois.map( (poi: Poi) => (
        <AdvancedMarker
          key={poi.key}
          position={poi.location}
          ref={marker => setMarkerRef(marker, poi.key)}
          clickable={true}
          onClick={handleClick}
          >
            <Pin background={'#FBBC04'} glyphColor={'#000'} borderColor={'#000'} />
        </AdvancedMarker>
      ))}
    </>
  );
};

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

d243587f4a9ec4a6.png

10. Selamat

Anda telah membuat aplikasi web pertama dengan library vis.gl/react-google-map untuk Google Maps Platform, termasuk memuat Maps JavaScript API, memuat peta, menggunakan penanda, mengontrol dan menggambar pada peta, serta menambahkan interaksi pengguna.

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

Pelajari lebih lanjut