Mengintegrasikan peta ke dalam aplikasi web modern telah menjadi aspek penting dalam menciptakan pengalaman pengguna yang menarik dan sadar lokasi. Dengan munculnya React dan perpustakaan seperti @react-google-maps/api, pengembang kini dapat dengan mudah menyematkan peta interaktif dalam aplikasi mereka. Dalam panduan komprehensif ini, kami akan memandu Anda melalui setiap langkah, mulai dari menyiapkan koneksi Google Cloud hingga memanfaatkan geolokasi, hingga membuat peta menakjubkan dalam proyek React Anda.

Bagian 1: Menyiapkan Koneksi Google Cloud Anda

  1. Kunjungi situs web Google Cloud Platform untuk memulai. Pengguna baru harus mendaftar; jangan khawatir tentang permintaan kartu kredit — tingkat gratis Google menawarkan akses ke layanan seperti Google Maps API.
  2. Masuk pada “Aktifkan Akun Penuh”
  3. Buka menu › Google Maps Platform › Kunci & Kredensial.
  4. Salin kuncinya dan simpan

Bagian 2: Memulai Proyek React Anda dan Menginstal Dependensi

Sekarang setelah Anda mengamankan kunci Google Cloud API, sekarang saatnya menyiapkan proyek React Anda dan mengintegrasikan perpustakaan yang diperlukan untuk membuat peta interaktif menggunakan @react-google-maps/api. Ikuti langkah-langkah berikut untuk memulai:
Langkah 1: Buat aplikasi reaksi baru:
Jika Anda belum melakukannya, pastikan Anda memiliki Node.js dan npm (Node Package Manager) diinstal pada sistem Anda. Buka terminal Anda dan jalankan perintah berikut untuk membuat aplikasi React baru:

npm create vite@latest

Langkah 2: Instal @react-google-maps/api

npm install @react-google-maps/api

Sekarang buka komponen baru untuk file peta dan css.

Langkah 3: Impor

import { GoogleMap, MarkerF, useLoadScript } from '@react-google-maps/api';
import './google-map.css'

const center = {
  lat: -3.745,
  lng: -38.523
};

Objek center mendefinisikan titik fokus peta. Nanti, kita akan mempelajari cara menyetel pusat ini secara dinamis menggunakan lokasi perangkat Anda.

Bagian 3: Menampilkan Peta Pertama Anda

Langkah 1: Tentukan Fungsi Map

Buat fungsi terpisah bernama Map untuk merangkum logika rendering peta. Fungsi ini akan berisi komponen <GoogleMap> dan komponen <MarkerF>.

function Map() {
  return (
    <GoogleMap zoom={16} center={center} mapContainerClassName="map-container">
      <MarkerF
        onClick={() => console.log("my location")}
        position={center}
      />
    </GoogleMap>
  );
}

Langkah 2: Tentukan Fungsi GoogleMapExample

Buat fungsi GoogleMapExample, yang berfungsi sebagai komponen utama Anda. Di dalam fungsi ini, gunakan kait useLoadScript untuk memuat Google Maps API. Jika API dimuat (isLoaded benar), render komponen Map. Jika API tidak dimuat, tampilkan pesan pemuatan.

function GoogleMapExample() {
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: "YOUR_API_KEY",
  });

  if (!isLoaded) return <div>Loading...</div>;

  return (
    <div>
      <div>
        <Map />
      </div>
    </div>
  );
}

export default GoogleMapExample

Langkah 3: CSS
Dalam file CSS Anda (misalnya google-map.css), tambahkan kode berikut untuk menentukan ukuran wadah peta:

.map-container {
  height: 60vh; /* Adjust the height as needed */
}

Ingatlah untuk menautkan file CSS ini dalam HTML Anda atau memasukkannya ke dalam komponen React jika Anda menggunakan CSS-in-JS atau pendekatan serupa.

Dan sekarang peta Anda siap digunakan!

Bagian 4: mengubah Ikon Penanda:

Meningkatkan estetika dan kejelasan visual peta Anda melibatkan penyesuaian penanda agar sesuai dengan tema aplikasi Anda. Di segmen ini, kami akan memandu Anda melalui proses mengubah ikon penanda default menjadi sesuatu yang lebih menarik perhatian. Mari kita mulai:

Langkah 1: Pilih Ikon
Navigasi ke sumber ikon yang memiliki reputasi baik, seperti Icon8 (https://www.icon8.com/), dan temukan ikon yang sesuai dengan konteks aplikasi Anda. Setelah Anda menemukan ikon yang sempurna, unduh ikon tersebut ke komputer Anda.

Langkah 2: Tambahkan Ikon ke Proyek Anda

Dalam direktori proyek Anda, buat folder bernama icons atau nama yang relevan untuk mengatur ikon khusus Anda. Pindahkan file ikon yang diunduh ke folder ini.

Langkah 3: Impor Ikon

Di file komponen React tempat Anda menggunakan komponen MarkerF, impor ikon khusus. Dengan asumsi file ikon khusus Anda diberi nama custom-icon.png dan terletak di folder icons, impornya akan terlihat seperti ini:

import customIcon from './icons/custom-icon.png'; // Update the path as needed

Langkah 4: Sesuaikan Ukuran Ikon

Di objek icon dalam komponen MarkerF, Anda dapat menyesuaikan properti scaledSize untuk mengatur ukuran ikon khusus yang diinginkan.

 <MarkerF
        onClick={() => console.log("my location")}
        position={center}
        icon={{
          url: customIcon,
          scaledSize: new window.google.maps.Size(30, 30) // Adjust the size as needed
        }}
      />

Bagian 5: Pemusatan Peta Dinamis dengan Geolokasi

Mengaktifkan peta Anda untuk terpusat secara dinamis berdasarkan lokasi pengguna akan menambahkan sentuhan yang dipersonalisasi pada aplikasi Anda. Di bagian ini, kami akan memandu Anda dalam menerapkan fungsi pemusatan dinamis ini menggunakan API Geolokasi. Mari selami:

Langkah 1: Impor Ketergantungan dan Atur Status

Pertama, impor dependensi yang diperlukan untuk mengelola status dan efek samping. Tambahkan baris berikut di bagian atas file komponen Anda:

import React, { useState, useEffect } from 'react';

Selanjutnya, siapkan variabel status untuk menampung koordinat pusat dinamis. Di komponen Map Anda, inisialisasi status center menggunakan kait useState:

function Map() {
  const [center, setCenter] = useState({
    lat: -3.745,
    lng: -38.523
  });

  // Rest of your Map component code...
}

Jangan lupa hapus center sebelumnya

Langkah 2: Terapkan Logika Geolokasi

Di dalam komponen Map, tambahkan kait useEffect untuk mengambil geolokasi pengguna saat ini dan perbarui status center sesuai dengan itu. Tempatkan kode ini tepat setelah baris const [center, setCenter] = useState(...):

useEffect(() => {
  const options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0,
  };

  function success(pos) {
    const crd = pos.coords;
    const coords = {
      lat: crd.latitude,
      lng: crd.longitude,
    };
    setCenter(coords);
  }

  function error(err) {
    console.warn(`ERROR(${err.code}): ${err.message}`);
  }

  navigator.geolocation.getCurrentPosition(success, error, options);
}, []);

Ringkasan:

Terima kasih telah menjelajahi contoh peta interaktif ini! Anda dapat menemukan kode lengkapnya di GitHub- klik di sini

Jika Anda mempunyai pertanyaan atau butuh bantuan, jangan ragu untuk menghubungi saya di LinkedIn. Saya di sini untuk membantu dan mendiskusikan aspek apa pun dari contoh ini.

Selamat membuat kode!