Pada tulisan kali ini bertujuan untuk mengintegrasikan Google Maps API ke aplikasi ReactJs dan memungkinkan Kita untuk menampilkan peta di situs web atau aplikasi yang dikembangkan menggunakan ReactJs.
# Persiapan
Laptop yang sudah terinstall nodejs dan ReactJs. Untuk mendownload dan menginstall nodejs dapat dilihat dalam website-nya di nodejs.org https://nodejs.org/ dan Untuk ReactJs dapat dilihat pada website-nya di ReactJS https://reactjs.org/docs/getting-started.html , Jangan lupa juga Secangkir Kopi ☕ 😁.
# Coding Time
Setelah nodejs dan ReactJS telah terinstall, langkah pertama adalah membuat project baru dengan perintah di bawah.
npx create-react-app react-gmaps
Selanjutnya , masuk ke directory project yang telah dibuat:
cd react-gmaps
Sebelum menjalankan atau menuliskan kode program , kita install terlebih dahulu dependensi Google mapsnya:
npm i @react-google-maps/api atau yarn add @react-google-maps/api
Pada saat ini, Kita telah memiliki aplikasi React dengan package react-google-maps. Sekarang Kita dapat menggunakan gmaps di aplikasi reactjs. Selanjutnya, Kita perlu mengedit file App.js mengganti kode untuk menggunakan package Google Map yang telah diinstall.
buka src/App.js dan ikuti code di bawah:
// Import Package google-maps yang telah diinstall import { GoogleMap, LoadScript } from "@react-google-maps/api"; function App() { // Atur LongLat Focus map disini saya mengatur LongLat yang mengarah ke Jakarta const center = { lat: -6.2269976, lng: 106.7848748, }; // ContainerStyle Berfungsi Untuk Mengatur StyleContainer Untuk google maps const containerStyle = { width: '800px', height: '800px' }; return ( <> <LoadScript googleMapsApiKey={GOOGLE_APIKEY_KAMU}> <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={12} /> </LoadScript> </> ); } export default App;
Ganti GOOGLE_APIKEY_KAMU Google maps dengan apikey yang dimiliki , Untuk mendapatkan Apikey Gmaps dapat dilihat pada developer.google.com
Jalankan program untuk melihat hasil dari gmaps dengan perintah:
npm start atau yarn start
Contoh, akses dengan url localhost:3000 :
- Menggunakan Marker
Import terlebih Marker terlebih dahulu untuk menggunakan marker pada gmaps api, dan untuk contoh penggunaan marker bisa di lihat pada codingan dibawah:
// Import Package google-maps yang telah diinstall import { GoogleMap, LoadScript, Marker, // Import Marker } from "@react-google-maps/api"; function App() { // Atur LongLat Focus map disini saya mengatur LongLat yang mengarah ke Jakarta const center = { lat: -6.2269976, lng: 106.7848748, }; // ContainerStyle Berfungsi Untuk Mengatur StyleContainer Untuk google maps const containerStyle = { width: '800px', height: '800px' }; return ( <> <LoadScript googleMapsApiKey={process.env.REACT_APP_GMAPS_API}> <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={12} > <Marker //Titik Marker akan di letakkan dengan menentukan LongLat position={{ lat: -6.214511929764319, lng: 106.84522285129088, }} // Jika Ingin Marker dapat di drag rubah value draggable menjadi true draggable={false} /> </GoogleMap> </LoadScript> </> ); } export default App;
- Kostumasi Google Maps
Untuk Mengkostumasi style google maps kunjungi website https://mapstyle.withgoogle.com/ , ubah tampilan maps sesuai selera, setelah selesai mengubah tampilan maps sesuai selera selanjutnya copy script style yang berbentuk json.
Selanjutnya kita dapat menggunakan style json tadi pada param options di tag <GoogleMap> dengan key styles , contoh codingan :
// Import Package google-maps yang telah diinstall import { GoogleMap, LoadScript, Marker, InfoWindow, } from "@react-google-maps/api"; function App() { // Atur LongLat Focus map disini saya mengatur LongLat yang mengarah ke Jakarta const center = { lat: -6.2269976, lng: 106.7848748, }; // ContainerStyle Berfungsi Untuk Mengatur StyleContainer Untuk google maps const containerStyle = { width: '800px', height: '800px' }; // Style Json yang di dapatkan pada https://mapstyle.withgoogle.com/ const costumeMaps = [ { "elementType": "geometry", "stylers": [ { "color": "#242f3e" } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#746855" } ] }, { "elementType": "labels.text.stroke", "stylers": [ { "color": "#242f3e" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.locality", "elementType": "labels.text.fill", "stylers": [ { "color": "#d59563" } ] }, { "featureType": "poi", "elementType": "labels.text", "stylers": [ { "visibility": "off" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#d59563" } ] }, { "featureType": "poi.business", "stylers": [ { "visibility": "off" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#263c3f" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#6b9a76" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#38414e" } ] }, { "featureType": "road", "elementType": "geometry.stroke", "stylers": [ { "color": "#212a37" } ] }, { "featureType": "road", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [ { "color": "#9ca5b3" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#746855" } ] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [ { "color": "#1f2835" } ] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "color": "#f3d19c" } ] }, { "featureType": "road.local", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit", "elementType": "geometry", "stylers": [ { "color": "#2f3948" } ] }, { "featureType": "transit.station", "elementType": "labels.text.fill", "stylers": [ { "color": "#d59563" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#17263c" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#515c6d" } ] }, { "featureType": "water", "elementType": "labels.text.stroke", "stylers": [ { "color": "#17263c" } ] } ] return ( <> <LoadScript googleMapsApiKey={process.env.REACT_APP_GMAPS_API}> <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={12} options={{ styles: costumeMaps }} > <Marker //Titik Marker akan di letakkan dengan menentukan LongLat position={{ lat: -6.214511929764319, lng: 106.84522285129088, }} // Jika Ingin Marker dapat di drag rubah value draggable menjadi true draggable={false} /> </GoogleMap> </LoadScript> </> ); } export default App;
Hasil kosutmasi :
# Pesan Penulis
Bagaimana cukup mudah kan?
Untuk Dokumentasi Lengkapnya dapat di lihat Disini. Cukup itu yang dapat saya berikan, semoga bermanfaat. Terimakasih 😁