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
- 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.
- Masuk pada “Aktifkan Akun Penuh”
- Buka menu › Google Maps Platform › Kunci & Kredensial.
- 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!