Integrasi Gmaps pada Aplikasi Reactjs

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 😁